/* style for made in champaign */

Creating Sankey Diagrams with d3.js and controlling the colors

I’m continuously impressed with what Mike Bostock is able to pump out with his d3.js kit.

The examples he posts provide endless inspiration, and so his work was invaluable when I needed to create a visualization for a recent piece of work.



The only problem I had is that the default code automatically assigns colors from a pre-defined palette, and I needed to have some control over the categorization.

Controlling Color

twitter_communicatorsThe graphic above was used in a piece about discussions on Twitter over at CU-CitizenAccess.org. It shows the progression of ideas from the origin, and the people who help to facilitate or enhance it.

To control the colors, change the following code:

.style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, ""));})

… to this:

.style("fill", function(d) { return d.color; })

To help, here is what the entire block of code looks like:

 .attr("height", function (d) { return d.dy; })
 .attr("width", sankey.nodeWidth())
 .style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
 .style("fill", function(d) { return d.color; })
 // .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, ""));})
 .append("title").text(function (d) { return d.name + "\n" + format(d.value);});

Then, in your json feed, add a section for the colors to the nodes and after the names, like so:


And that’s it.

You can swap the words “yellow” out for hexadecimal or RGB color values.

Posted in Blog | Leave a comment

Breathing new life into an old server from eBay for SOHO firewalling and virtualization

Dell CS24-SC Despite having a business class Internet connection, the performance has been very sluggish lately, so I wanted a way to monitor the traffic to see if something stood out.

I’ve also been suspicious my little Apple Airport router just wasn’t able to handle the connections, and that maybe even my servers were being targeted. Besides, with all the NSA domestic spying in the news this past year, I think we’re all growing a little bit more self-conscious.

I had to do something.

The Internet was constantly slowing to a crawl and I was reaching the point of exasperation to figure out what was going on. I was about to spend whatever it took to get things back to normal, but then I had a random thought to look for a used business server on eBay and build a firewall gateway.

So, I chatted with some folks on the networking subreddit about business class routers, and several suggested looking into PFSense and Untangle and throwing it on an old machine.

It turns out there are tons of old Dell 1U CS24-SC 1U servers on eBay for about $135 plus s/h. Yeah, they’re several years old, but they come with dual quad-core L5420 Xeons supporting virtualization, two onboard NICs, BIOS enabled RAID 0/1, and can handle 48GB of RAM. I picked up one with 8GB of RAM and 2 500GB hard disks. 

Comparatively speaking, that’s close to the same level of performance of a newish Intel i7 machine consumer grade machine, but for a lot less money. The only downside to the server has been how loud the fans are, which wasn’t totally unexpected.

I ordered a few 40mm silent running cooling fans from NewEgg and dropped two of them in, and its cut the noise in half, but now I noticed that the power supply is loud. The next thing I plan to do is open up the power-supply and replace those fans with two more of the 40mm fans.

As for the virtualization environment, I now have CentOS 6 with KVM installed, and happily running two smaller VMs: PFSense w/ Snort and another CentOS for powering this web server (which is now migrated off of my 8 year old iMac). 

I check in on the Snort logs and see spurts of heavy port scanning of my network being blocked. I’m not entirely sure if its accurate, but Snort is reporting a number of intrusion attempts from “Known Russian Business Network IP”. Whatever that means… probably a good thing to keep them out of my network anyhow.

 Fan Splicing

Here are some close-ups documenting the steps to replace the fans in the computer chassis and the power supply.

Since I like to stare death in the face, you’ll notice the power supply is still plugged in. I just wanted to see if I could keep the system up and running while I did the work. I did get bit a few times with 110v… but nothing harmful. It just feels like a shot of espresso kicking in.


2014-02-13 12.27.13

A close up of where the main cooling fans go. The original fans are seen in the picture above, and the empty slots are where the new fans will go. They are easy to remove; just gently depress the little clip that fits into a slot in the chassis.

The old fans are actually two fans glued together. I think the motherboard starts spinning the second fan when things start to get hot. 


2014-02-13 13.11.17

I clipped off the connections from the old fan to use them with the new ones. Make sure to be generous with the length because it will be a tight fit otherwise. The wire colors between the new and old fans match up. I used shrink tubing to keep everything tight and insulated. The spare wires were all shoved into a separate heat shrink so they don’t wander around and short something that they shouldn’t.

Because there are two sets of wires, it is possible to add a second series of fans. If I were to do this, then it’d just be a matter of wiring it up and gluing them together just like the old fans.

2014-02-13 13.13.46

And here the fans are all neat and back into the chassis. I left the old fans disconnected, which apparently causes some consternation for the computer since it is now blinking an orange warning light on the front panel. But, the computer works so it can be easily ignored.

On to the power supply…

2014-02-13 12.26.57


2014-02-13 12.27.06


It was a bit tricky getting the power supply out without powering anything down or unplugging things. Unless you’re really curious about what the computer will do when the power supply fans are disconnected, as I was, then probably better to just unplug it all.

2014-02-13 13.19.55

Anyhow, there are just a few screws that hold everything together and they are easily removed. There were no special tricks to this. You can see in the picture above that the fans are already out of the supply. This part was easy… I didn’t get get bit by any electricity until I started putting it all back together.


2014-02-13 13.15.40


Sure enough, even after disconnecting both of the fans, the power supply keeps going and the computer chugs along. No beeps or total freak outs. That’s all I really wanted to know.


2014-02-13 13.33.59


Like before, the old connections were snipped off so they could be repurposed for the new fans. In this case, there are only positive and negative wires, so just take both of the positive wires from the new fans (red and yellow) and connect them to the red wire on the old connection.

2014-02-13 13.41.55

Voila! Just a bit more heat shrinking tube and the job is done. Since heat shrink tube is available in several levels of thickness, I put a bit on the single red wire on the old connection since the yellow and red on the new connection were doubled-up. Then I overlapped it all with another layer of thicker heat shrink tube.

The reason for this is because shrink tube only shrinks so much, and then stops. Adding another layer just ensures that everything stays nice and tight.


2014-02-13 13.48.41

Route the new wires along the side of the power supply case and tuck it behind the circuit board. Its a bit tight behind the circuit board, but everything will fit.

This is where you really need to be careful because that innocuous looking heat-sink is live, so it will give you a nice zap (assuming you are as dumb as me and leave everything plugged in).


2014-02-13 13.45.39

The screws from the old fans will not fit the new fans, so make sure you hold onto the little screw bags that come with the fans. Also, the new fans are not as thick as the old ones, so there will be some space left to fill.


2014-02-13 13.57.51

I used some aluminum tape to fill the space left by the new fans. Everything fit flush and looks great. The quiet sound is very noticeable compared with how loud the server was before.

I’ve now got 4 of the new fans being used, 2 for the CPUs and 2 for the power supply. Since my server is only being used as a UTM firewall and web server for the time being, I don’t have to worry about taxing the processors and overheating. If it becomes a concern, the CPU voltage can always be stepped-down in the BIOS.

Altogether, the new fans are better, but they are not completely silent. Since I very much enjoy working in a very quiet atmosphere, they are the loudest thing in the office, but its really just a low flow of air. I’d say its about as quiet as some of the old desktop computers from the mid-90s.




Posted in General | 2 Responses

Mural Dedication and Augmented Reality for Rose & Taylor Barbershop

The mural dedication for The Rose & Taylor Barbershop went very well.

It was great to see people come to explore the space, and especially learn about Augmented Reality.

The News-Gazette did a really nice job covering the event.

And Darrell Hoeman with CU-CitizenAccess.org put together a fantastic documentary:

Posted in Blog, General | Tagged , , | Leave a comment

Mural in Place

The printing of the mural was made possible from funding through generous contributions by faculty at the Graduate School of Library and Information Science at the University of Illinois. I have not yet had a chance to thank Sharon Irish and Jon Gant in person.

Although installed, the official unveiling is awaiting my integration of the Augmented Reality component.

I am very excited to see this finally reach fruition. My additional thanks to Kevin Hamilton, who really served as the restless force behind this entire project. And last but not least, thanks to my teammates Danielle Sheppard, Pat McPherson and Hugh Sato for their inspiration and many hours of contribution.

The east wall of the hallway leading to the beauty and beauty salon at the Rose & Taylor Barbershop on North First St., Champaign, IL.

The east wall of the hallway leading to the beauty and beauty salon at the Rose & Taylor Barbershop on North First St., Champaign, IL. Photo courtesy of Kevin Hamilton.


The empty space will eventually be filled with a bulletin board for the community to use for posting.

The empty space will eventually be filled with a bulletin board for the community to use for posting. Photo courtesy of Kevin Hamilton.


The printed-on-vinyl mural represents a collection of photographs overlaid on Sanborn maps.

The photographs are meant to be settled into an unraveling scroll that is intertwined in the history of the area.

Augmented Reality will be used to engage the patron with another perspective of the history by allowing for the original image to be viewed, as well as linked to a website, created by Noah Lenstra, for curating the local history of the community.

The official unveiling will be scheduled once the Augmented Reality component has been tested and confirmed working.

Posted in Blog | Tagged , , , , | Leave a comment