Visualizing data like Bob Ross

This post is the first of what will be a series of explorations into data visualization. I will dive quickly and deeply to lay the foundation as most of this can be found easily on the web.

In upcoming posts, I’ll reuse this same code and go deeper, having a slower conversation around advanced techniques.

I also thought I’d have a little extra fun with this post and channel my inner Bob Ross.

Bob Ross Painting
If this is your first time with us, we’ll be using the free JavaScript library d3.js and work in a simple development environment using jsFiddle for our “canvas” and Chrome Javascript console for debugging. Firefox users can install firebug if you feel more comfortable with that.



We’ll start by adding the basic shape.

Let’s go ahead and move the circle a little. We’ll also make it smaller for now.

We’ll spruce it up with a little corn flower blue.
…yea, that’s nice

Now let’s pull in some better data

The blue is nice, but let’s show off our little unique snowflakes
There now, we’ve built some happy little wedges…

Now let’s fill in the details a little starting with outer labels
Well that’s no good. Looks like we have a “happy accident”.

We have a couple of things to fix here. We need to set the innerRadius for the arc and set sorting to null. We’ll also move the chart a bit more to make room for the text.

Add more good text and clean things up a little…(jsfiddle code)

And just for the fun of it, let’s remove the boring colors and heatmap things a little.

I must say, that’s a pretty decent visualization of your data. You can see the final code, change it, and run it yourself here. All that’s really left is some basic clean up (CSS, JSLint, and code comments if needed).

Of course, this chart is somewhat fragile. You can see that Thursday and Tueday are overlapping a little (text isn’t aligned properly and we aren’t accounting for long string lengths) and the chart doesn’t resize (not a responsive design).

In a future post we’ll address these issues and see what happens if we have too many wedges and how we can update the chart without re-rendering the webpage.

till next time…



…I’ll just go ahead and hide a secret message in the code right here… it’ll be our little secret. And if you tell ANYONE…

())crayola))>

Edward Romano Written by:

I dabble in, and occasionally obsess over, technology and problems that bug me