So I’ve been diving head first into d3.js and I must say its a mighty fine library! I do feel like getting up to speed with it can take quite a bit of reading and playing, and now that I’ve figured out how to do a couple of things with it I wanted to share how I go about using it. So I made a screencast of myself building a bar chart.
The video is a little long at 40 minutes, and it’s just me, my terminal and the browser, but I do hope it helps people who are just starting get into a d3 frame of mind.
[d3cast] Simple Bar Chart Walkthrough from Ian Johnson on Vimeo.
You can follow along with annotated (commented) javascript or just look at the resulting html/css/javascript while I talk.
As an aside, the annotated javascript was generated with the awesome docco project.
Hope this was helpful, I plan to do more screencasts in the future as I get deeper into d3. Any feedback or suggestions are welcomed!
How good is d3 for creating line charts specially scientific charts with chart in chart capability?
@MySchizoBuddy d3 could certainly help you create line charts for scientific data. It is a very flexible and powerful library. It is more about generating a document based on data, so once you get used to thinking in that way it becomes easier to see how powerful it is.
Very helpful. Thanks for posting this!
Great video, for a non-programmer like me the explanation was really easy to follow. I look forward to further tutorials!
Hey, this tutorial is pretty neat, but I noticed its a bit different from the one that’s included in the examples on the D3.js site.
https://github.com/mbostock/d3/blob/master/examples/bar/bar.html
If you change the labels of the abbreviations of states to the full name (in the CSV file), the full name won’t show up. Any suggests would be super useful – its been frustrating to toy around with getting the labels right.
@Bob, I think it would be better to add a new column where you specify the full name, then access that data when making your text.
so if your new column was called fullname then you could do text(d.fullname) inside the function.