Kick-ass, open source, hackable examples
Every now and then it's nice to just sit back and check out the cool shit people have built with D3. Not only can it serve as inspiration to create something great of your own, it can also be a great way to learn!
Before I get all "this is a learning opportunity" on you though, let's look at some cool shit.
Tokyo Wind Map
The Tokyo Wind Map is exactly what it sounds like, and it's awesome. It uses D3 to show live, animated wind data from Tokyo and the result is a beautiful, mesmerizing visualization. Don't miss the controls, which are in Japanese but clicking around is still fun. Not to mention the fact that the map is open source.
Sunburst Skill Map
Sunburt skill map might not be as inspiring as the wind map (and it's a different sort of "map" entirely), but it's a good example of integrating multiple visualization pieces. There are plenty of chart libraries out there that include the constituent pieces of a sunburst chart, breadcrumbs, and a line chart seen here, but how easily could you tie them together? Updating two charts in response to interactions with a third is going to require, at a minimum, that all the pieces have a good API for being updated programmatically at runtime.
The code for this example probably doesn't qualify as "simple", but it is in the neighborhood of 300 lines. Not too shabby for three interconnected charts.
Sankey Diagrams
Sankey diagrams are network flow diagrams and people have created some awesome ones. The one in the image above is probably my favorite because of the particles flowing through. I strongly encourage you to click through and play with dragging the rectangles to adjust the flow paths.
In this one the particles come in bursts, which introduces an interesting organic quality. There is also a version that animates gradient fills when you roll over a path. Rest assured the code for these (click the Gist link at the top of the page) contains plenty of techniques to learn from.
Lastly, it's not just eye candy. “The what” and “the why” of government spending uses a Sankey diagram to (effectively, IMO) show how various parts of a government budget are connected.
Force directed graphs
Honestly, I'm only grudgingly including this one. I don't get the appeal, and I can't imagine how you'd make one useful, but everyone seems to love force directed graphs. So there you go, knock yourself out. 😂
Radial Trees
This interactive chord diagram is fun to play with and this radial tree has a preciseness that I find super compelling. Not to mention, the full source including HTML, CSS, and JavaScript is less than 80 lines!
Streamgraph
Last but not least is this psychedelic river. While this one's data is randomly generated, you've probably seen visualizations like this used to depict things like market share. You can click the button at the top left and it will transition to a new set of random data, animating over the course of two and a half seconds.
That's pretty cool, but it's a little slow for my tastes. I'm also not crazy about the colors.
Let's fix both of those things.
Since the original is hosted on http://bl.ocks.org, that means it's backed by a GitHub Gist. Since it's backed by a Gist, that means we can view and edit it on http://blockbuilder.org. In fact, all we have to do is modify the URL.
Instead of https://bl.ocks.org/mbostock/4060954, let's go to http://blockbuilder.org/mbostock/4060954. Here's a link.
Once there, scroll down to line 65 of index.html. That's where the transition's duration is being set, currently with the code .duration(2500). Try chopping off that leading 2 and things get pretty snappy. 😄
On line 50 you can see the fill color being randomly chosen with code equivalent to .attr("fill", () => z(Math.random())), and the z it's referring to is just var z = d3.interpolateCool on line 39.
Change that line to var z = d3.interpolateWarm and you'll something like this!
Are you not entertained educated?
I hope this small collection of kick ass examples inspires you to keep growing your D3 skills. I mean, how cool would it be to be able to build stuff like this from scratch?! You absolutely can, and it's not as big a leap as you probably think it is.
While strong fundamental knowledge is important, never discount the power of experimentation. Find something that blows your hair back, load it in Blockbuilder and start tinkering! You might be amazed at how the pieces start to fit together.
Enjoy!