CODEWITHSUNDEEP
javascriptchartsd3.jsgraphing
CQM
CQM

Reputation: 44220

d3js replica of nested line graph

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

Upvotes: 0

Views: 691

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 2

Related Questions