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.
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.
Now let’s pull in some better data
The blue is nice, but let’s show off our little unique snowflakes
Now let’s fill in the details a little starting with outer labels
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…