Forays into D3

D3, or Data Driven Documents, is a powerful Javascript library that provides powerful tools to wield in forming your charts and graphs. Its primary focus is to allow for highly abstracted ways to visual data, which would allow for the seamless use of the same code as your data changes. It does this through custom functions, which allow you to function chain, and the use of SVG, Scalable Vector Graphics.

Unfortunately all these moving parts means that the learning curve is pretty steep for complex . But while I’m still climbing that curve, I’ll show you some of what I’ve learn so far.

Just kidding. I copied that from the D3 examples page. That’s actually a really useful way to create your own graphs. It’s all open source, and considering they don’t really have built in charts or graphs that you can just use, like some comparable libraries do, it’s the best way until you become proficient yourself. Plus a lot of the math can get complicated, unless you remember your trig and calculus well. I will say that most of the examples require more than a little tweaking to get working, and incorporating your own data into them can get complicated.

This is what I can do in D3 with no crutches right now.

One thing that is pretty amazing about it is that it basically lets you code for what you want to be there. I’ll show you what I mean. That rectangle and circle was created in my .js file onto an index page with just an empty div with an ID of “blog” with the following:

I can also quickly make a line chart with a static data set. Incorporating live data can obviously be more complicated and that’s for another time.

The “magic” of D3 can be seen in lineFunction. “d3.svg.line()” uses a D3 “generator” that essentially defines the line you’re going to draw. You just need to declare what data you’re going to use on each axis with the “.x” and “.y” functions.

Obviously this is a BASIC introduction into D3. The website d3js.org provides a ton of tutorials that I’d recommend.

Show your support

Clapping shows how much you appreciated Mike Handwerker’s story.