5 ms·
Build An Animated Chart In 19 Lines Of Code With d3.js
- TwistedWeasel 14y agoI'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/ http://bost.ocks.org/mike/chart/
- dgabriel 14y agoAlas, the site is down. I'd love to see this.
- louischatriot 14y agoI just checked and it is up, you can retry!
- stephenlee 14y agoBeautiful 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 14y agoI 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.
- stephenlee 14y agoThanks, the book is fantastic.
- ajtulloch 14y agoA 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/ http://tullo.ch/2012/making-the-site-logo/.
- oulipian 14y agoYour logo doesn't work. I'm using the latest Firefox on a Mac. Error: strengths is undefined.
- ajtulloch 14y agoHmm strange, just tested then and works on my end with Chrome 18 and Firefox 12.0 on OS X.
- fceccon 14y agoI'm on Chrome 20 on OS X and I got this error: Cannot read property '0' of undefined d3.v2.js:5166
- rralian 14y agoI 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.
- xxbondsxx 14y agoSame 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 14y agoAlso plenty of really good beginner d3 tutorials from Scott Murray: http://alignedleft.com/tutorials/ http://alignedleft.com/tutorials/
- dm8 14y agoD3 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?
- louischatriot 14y agoWhat 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 14y agoPfft. I can Build An Animated Chart In 1 Line Of Code With DoesEverythingForYou.js
- louischatriot 14y agoOf 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".