Learning d3.js for data visualisation [closed]

I want to start learning to make data visualisations (as side project in my PhD) preferably with the D3.js package. I do not have java-experience but i do have a background in OOP as i mostly work in python. As such, I was wondering what's the best way to learn working with d3 and which environment one could recommend me.

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.

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.

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.

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

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.