Build An Animated Chart In 19 Lines Of Code With d3.js | Hacker News Reader

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

needforair.com

71 pointslouischatriot17 comments

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/

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/.

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

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

I'm on Chrome 20 on OS X and I got this error:

    Cannot read property '0' of undefined      d3.v2.js:5166

I got this too. It's reproduceable for me if I click on any of the nodes before the page is ready for it, and once this happens I can't use it at all. But if I wait a second or two before doing this it works fine. Using latest chrome.

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)

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

http://alignedleft.com/tutorials/

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!

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.

Thanks, the book is fantastic.

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?

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 ...)

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

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".

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

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

Reply on news.ycombinator.com