Build An Animated Chart In 19 Lines Of Code With d3.js

http://needforair.com/blog/2012/05/09/d3-tutorial/

by louischatriot • 14 years ago

71 17 14 years ago

I've been learning d3.js myself lately, and i'm very impressed. As it's popularity increases it's worth reading this article from Mike Bostock, the creator of d3 proposing some conventions to follow when building charts with d3...

http://bost.ocks.org/mike/chart/

dgabriel• 14 years ago

Alas, the site is down. I'd love to see this.

louischatriot3• 14 years ago

I just checked and it is up, you can retry!

stephenlee2• 14 years ago

Beautiful chart, I want to make some interactive charts and d3.js is just suited for me. But I can't dive into JavaScript though it looks like easy. I'm familiar with Python. Anyone can suggest enough JavaScript tutorials to hack d3.js. Thanks!

monkeyfacebag• 14 years ago

I would get yourself a copy of The Good Parts. As someone who also went from Python to JS, it didn't fully click until I sat down and read through the book. Now there are aspects of JS I actually prefer over Python.

stephenlee2• 14 years ago

Thanks, the book is fantastic.

ajtulloch2• 14 years ago

A few months ago I learned d3.js and made myself an interactive site logo for myself with it. It's an awesome library.

Check out the logo (try clicking it and dragging the letters) and tutorial at http://tullo.ch/2012/making-the-site-logo/.

oulipian• 14 years ago

Your logo doesn't work. I'm using the latest Firefox on a Mac. Error: strengths is undefined.

ajtulloch2• 14 years ago

Hmm strange, just tested then and works on my end with Chrome 18 and Firefox 12.0 on OS X.

xxbondsxx• 14 years ago

Same as oulipian, I got some error about 0 being undefined.

Also, if you are planning on doing a spring-mass simulation, it's much better to use arbor.js which has background thread support (and is non-blocking)

vlandham• 14 years ago

Also plenty of really good beginner d3 tutorials from Scott Murray:

http://alignedleft.com/tutorials/

dm8• 14 years ago

D3 is awesome but I've always felt it is more suitable for complex visualizations. For simple stuff like line graph etc. Existing graphing libraries are pretty cool. Anyone using it for common visualizations like line chart or pie chart?

louischatriot3• 14 years ago

What I like in d3 is that it leaves completely free to do whatever you want, be it simple bar charts or complicated stuff. I don't like integrative libraries that don't allow you to make your graphs evolve.

I used it to build animated line charts but those are a bit more complex (you have to use SVG paths with Bezier curves which are a pain to calculate ...)

cdomigan• 14 years ago

Pfft. I can Build An Animated Chart In 1 Line Of Code With DoesEverythingForYou.js

louischatriot3• 14 years ago

Of course, but the point here is that d3.js really is not "doeseverythingforyou.js" : it only takes care of the "boring" stuff (manipulating DOM, binding data) and lets you do whatever you imagine. So it's more like "build this chart writing only the 19 lines of javascript that matter".

Build An Animated Chart In 19 Lines Of Code With d3.js

Related Stories