Question

I am trying to use d3js to recreate the chart below

I have been trying to follow along with this question D3js – Creating and easily updating a multi-line chart but I am missing some fundamentals that seem to be assumed with everything related to d3js documentation:

1. How does d3js actually draw anything? Where does it actually loop through the dataset?

2. domain and range, okay this is my fault, I need to go over graphing basics, but I had assumed d3 would take care of that, in this example what does this actually mean?

   var w = 25,
   h = 200;
   
   var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);
   

What is this actually telling the d3.scale.linear method?

3) ultimately I would like to create the graph above given data that goes from 1 – 100 (or higher), and with the Y axis increasing as the numbers go higher and the X axis increasing as the date goes further out. How would that data even be formatted, in a key value pair?

4) does d3 simply stack all the JS instructions up like in layers? this is an extension of 1) , I don’t really get how it renders anything. Something about the SVGs

Answer 1

I’d recommend that you take a look at some of the d3 tutorials to gain a better understanding of what’s going on. Concerning your specific questions, see below.

1. It never loops, it works by binding data to (potentially non-existant) elements and operating on selections (i.e. subsets) of changed, new and deleted elements. See this tutorial for example.
2. The d3.scale.* methods make graph scales. That is, they map input values to output values (the coordinates within your graph). d3.scale.linear() creates a linear scale, as the name suggests.
3. You can format the data any way you want really. Again, have a look at the tutorials for examples.
4. See 1.