4 ms·

I'm just getting started with d3 myself, and I found this ebook, which is free online, to be a great tutorial for all of things mentioned in the OP's post, but

I'm just getting started with d3 myself, and I found this ebook, which is free online, to be a great tutorial for all of things mentioned in the OP's post, but in greater detail: http://chimera.labs.oreilly.com/books/1230000000345/index.html http://chimera.labs.oreilly.com/books/1230000000345/index.ht...

joeblau 13y ago
D3.js is a beast, but it can be tamed. It took me a month to wrap my head around what was going on, but once you figure out what's happening, the data visualizations you can create are amazing.
kmfrk 13y ago
It's definitely the best book there is, but you're going to need to practice a lot and read a lot of articles to really wrap your head around d3.js. If I could recommend a way to learn d3.js: 1. Read Scott's book (and code the examples). 2. Think of some simple charts you want to make (and code them). 3. Use #d3.js@freenode, Stack Overflow, and see if some of the articles at http://www.d3noob.org/ http://www.d3noob.org/ fit what you're trying to do. 4. Go to http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock, be inspired, fork the code, and apply it to your own idea. Repeat #3. Ideally, find some kind of community where you can discuss with and help each other out regularly, but I don't really know of such a place, and it can be hard to find someone to do this with physically outside Paris, Berlin, NYC, and SF.
- 1wheel 13y ago
  I haven't been to any, but from the google group it looks like London also has quality meetups pretty regularly. This is my favorite getting started on d3 tutorial: http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/ http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-s...
  - kmfrk 13y ago
    It's peculiar how there are a billion beginner-level articles on d3.js, but the people who get stuck usually need something between that and intermediate. If someone considers writing a d3.js tutorial, I'd urge them to use a real example, since this is where people realize they should use features like line.defined(), figure out how to implement gridlines yourself, and so on. As great as d3.js, it's really hard to dive into the official wiki/docs as well as hit them for help.
    - 1wheel 13y ago
      Wow, I've been using d3 for almost a year now and I didn't know that line.defined() existed. I've made lots of stuff with d3 and never needed grid lines or dealt with undefined line values, so my 'getting your hands dirty' tutorial would probably deal with totally different issues than what would be useful for you. At a certain point, you just have to buckle down and read the documentation - a quick peak at the page for svg.axis shows how to get grid lines extremely easily (http://bl.ocks.org/mbostock/4323929 http://bl.ocks.org/mbostock/4323929). Hanging out on the stackoverflow tag is also super helpful. I either know how to answer a question and get some internet points or Lars responds within an hour and I learn something new.
- oscilloscope 13y ago
  The d3.js google group is a good place to discuss intermediate/advanced topics and get some help when you're hopelessly stuck. https://groups.google.com/forum/#!forum/d3-js https://groups.google.com/forum/#!forum/d3-js
- ep103 13y ago
  Should I learn d3 or three.js or raw canvas?
  - mcpherrinm 13y ago
    I would give different answers depending on what you're trying to do. Do you have some data you want to visualize in an interactive way? Maybe try D3.js Do you want to make 3d models or video games? THREE.js Do you want to do custom 2D drawings that aren't suited to the previous two? Maybe raw canvas is for you.
  - Zecc 13y ago
    Did you mean: > Should I learn d3 or three.js or raw canvas first?
  - mattlutze 13y ago
    Find some comparison tutorials between canvas and either of these, to see just how much more labor-intensive canvas tends to be. Then maybe make a decision as to what to dive deep into first.
- mattlutze 13y ago
  I would also check out the readings and resources linked on http://www.cs171.org http://www.cs171.org D3.js was a major focus of the course, and lectures from previous years are published for free, as well. It was really well structured.
danso 13y ago
Whoa, I purchased this book when it was in pre release and even then hath ought it was wonderful. Not only is it he best walk through of D3 so far written, it's one of the best explanations of HTML and JavaScript, even for relative newbies. That it is free is a huge act of generosity.
dnprock 13y ago
I highly recommend reading Mike Bostock's tutorials: https://github.com/mbostock/d3/wiki/Tutorials https://github.com/mbostock/d3/wiki/Tutorials Especially, the first four: Introduction, Three Little Circles, Thinking with Joins, How Selections Work. These articles explain the basic concepts of d3. Then learn by doing is the best way to go. For example, http://vida.io/explore http://vida.io/explore
- pnachbaur 13y ago
  The tutorial that helped me figure out how to use dynamic JSON data was the one on Path Transitions: http://bost.ocks.org/mike/path/ http://bost.ocks.org/mike/path/

joeblau 13y ago

D3.js is a beast, but it can be tamed. It took me a month to wrap my head around what was going on, but once you figure out what's happening, the data visualizations you can create are amazing.

kmfrk 13y ago

It's definitely the best book there is, but you're going to need to practice a lot and read a lot of articles to really wrap your head around d3.js. If I could recommend a way to learn d3.js: 1. Read Scott's book (and code the examples). 2. Think of some simple charts you want to make (and code them). 3. Use #d3.js@freenode, Stack Overflow, and see if some of the articles at http://www.d3noob.org/ http://www.d3noob.org/ fit what you're trying to do. 4. Go to http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock, be inspired, fork the code, and apply it to your own idea. Repeat #3. Ideally, find some kind of community where you can discuss with and help each other out regularly, but I don't really know of such a place, and it can be hard to find someone to do this with physically outside Paris, Berlin, NYC, and SF.

1wheel 13y ago
I haven't been to any, but from the google group it looks like London also has quality meetups pretty regularly. This is my favorite getting started on d3 tutorial: http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/ http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-s...
- kmfrk 13y ago
  It's peculiar how there are a billion beginner-level articles on d3.js, but the people who get stuck usually need something between that and intermediate. If someone considers writing a d3.js tutorial, I'd urge them to use a real example, since this is where people realize they should use features like line.defined(), figure out how to implement gridlines yourself, and so on. As great as d3.js, it's really hard to dive into the official wiki/docs as well as hit them for help.
  - 1wheel 13y ago
    Wow, I've been using d3 for almost a year now and I didn't know that line.defined() existed. I've made lots of stuff with d3 and never needed grid lines or dealt with undefined line values, so my 'getting your hands dirty' tutorial would probably deal with totally different issues than what would be useful for you. At a certain point, you just have to buckle down and read the documentation - a quick peak at the page for svg.axis shows how to get grid lines extremely easily (http://bl.ocks.org/mbostock/4323929 http://bl.ocks.org/mbostock/4323929). Hanging out on the stackoverflow tag is also super helpful. I either know how to answer a question and get some internet points or Lars responds within an hour and I learn something new.
oscilloscope 13y ago
The d3.js google group is a good place to discuss intermediate/advanced topics and get some help when you're hopelessly stuck. https://groups.google.com/forum/#!forum/d3-js https://groups.google.com/forum/#!forum/d3-js
ep103 13y ago
Should I learn d3 or three.js or raw canvas?
- mcpherrinm 13y ago
  I would give different answers depending on what you're trying to do. Do you have some data you want to visualize in an interactive way? Maybe try D3.js Do you want to make 3d models or video games? THREE.js Do you want to do custom 2D drawings that aren't suited to the previous two? Maybe raw canvas is for you.
- Zecc 13y ago
  Did you mean: > Should I learn d3 or three.js or raw canvas first?
- mattlutze 13y ago
  Find some comparison tutorials between canvas and either of these, to see just how much more labor-intensive canvas tends to be. Then maybe make a decision as to what to dive deep into first.
mattlutze 13y ago
I would also check out the readings and resources linked on http://www.cs171.org http://www.cs171.org D3.js was a major focus of the course, and lectures from previous years are published for free, as well. It was really well structured.

danso 13y ago

Whoa, I purchased this book when it was in pre release and even then hath ought it was wonderful. Not only is it he best walk through of D3 so far written, it's one of the best explanations of HTML and JavaScript, even for relative newbies. That it is free is a huge act of generosity.

dnprock 13y ago

I highly recommend reading Mike Bostock's tutorials: https://github.com/mbostock/d3/wiki/Tutorials https://github.com/mbostock/d3/wiki/Tutorials Especially, the first four: Introduction, Three Little Circles, Thinking with Joins, How Selections Work. These articles explain the basic concepts of d3. Then learn by doing is the best way to go. For example, http://vida.io/explore http://vida.io/explore

pnachbaur 13y ago
The tutorial that helped me figure out how to use dynamic JSON data was the one on Path Transitions: http://bost.ocks.org/mike/path/ http://bost.ocks.org/mike/path/