Learning d3.js for data visualisation [closed]

Answer 1

I've written a few tutorials for beginners to learn both Javascript and data visualization:

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions/

I find the first four tutorials from wiki very useful to learn D3 fundamentals:

https://github.com/mbostock/d3/wiki/Tutorials

Introduction, Three Little Circles, Thinking with Joins, How Selections Work.

My team runs https://vida.io. We use template approach to d3 and allow user to quickly create working document, upload new data, and bind data to document through GUI editor. Check out examples to get started:

https://vida.io/explore

Answer 2

Scott Murray's tutorials are a great starting place: http://alignedleft.com/tutorials/d3/

Regarding environments, you might find this useful: http://tributary.io. It's an interactive coding editor designed to help you learn d3.

Answer 3

Here's a list of resources that I'm using to learn d3js. The official site can be a bit overwhelming for someone new to web development so here's a few more:

Tutorials

• Official D3js website has a list of good examples and tutorials here
• Square has a great quick intro to D3 when they onboard here
• Christophe Viau has a good one page intro here
• Jerome Cukier's "Hello World" in D3, which goes into more detail of setting up your environment available here
• Scott Murray (alignedleft) explains things very well. He's also the author of 'Interactive Data Visualization', which I highly recommend. Tutorial here

Reference

• You're going to see a lot of different d3 functions and wonder what they do. Use the official API here.

Answer 4

I've been through many of the d3.js tutorials and found them to be confusing. When a person is not yet very familiar with HTML and CSS, they need a bit more explanation of the details. Those details are better presented in NRecursions:
Part1: http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
Part2: http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html

Answer 5

Scott Murrays website is a good first start http://alignedleft.com/tutorials/d3/.

Once done with that, I might recommend you take a look at this website http://techslides.com/over-1000-d3-js-examples-and-demos/, it lists 1000 examples of d3. You can usually copy the javascript data and code and play around with it locally on your own computer.

You can also try to take one of these plots and see if you can reconstruct it.

The reason why I found this to be useful is that you need to be able to recognize the errors that d3 throws at you. It's the moments that you have no idea why there is an error that are troublesome. By having an example that you are reconstructing you guarantee yourself of a copy of code that works such you might be able to more easily correct yourself.

Answer 6

Since I recently found it, I'd recommend working with http://phrogz.net/js/d3-playground/ as well for a sandbox in which to trial out and learn how the pieces can work together.