Infographic ideas are way more popular than Georgia news, according to the humble record that is the visitor log here at greencracker.net. So, here’s a post to nerd out with. It’s a beginner-intermediate graph tutorial. By “tutorial,” I mean heavily-commented code, pretty much.
This is what we’ll make:
Hi! So, first thing, let me tell you how the page is laid out because it’s a little different than most tutorials. It contains two (2!) svgs. No need to code just yet, this is an FYI.
OK now the coding starts. Let’s start with the html.
Put all the classes in the body:
The next hunk reads in the data and wrangles it into a form D3 can use:
Now the world’s most simple change function. This is what makes the transition nice-looking. If this were not here and you just depended on the redraw() function, the graph would change in a non-visually pleasing way, like a powerpoint slide without a transition applied.
So finally let’s start drawing some bars. This is the world’s simplest enter-append-exit sequence. You can fancy it up here if you like.
I hope this has helped! Drop a comment if I can help.