D3.js: dataset array with multiple y-axis values

Question

I am starting to start with d3.js, so please be kind :)

given this jsbin example

I have the following dataset:

var dataset = [ [d3.time.hour.utc.offset(now, -5), 1, 10], [d3.time.hour.utc.offset(now, -4), 2, 20], [d3.time.hour.utc.offset(now, -3), 3, 30], [d3.time.hour.utc.offset(now, -2), 4, 40], [d3.time.hour.utc.offset(now, -1), 5, 50], [now, 6, 60], ]; 

Two questions.

• Does d3 offer a better approach to finding the maximum value for my Y axis data (all columns, but the 0th, 0th column is the x axis (time)) in my dataset array? Currently, I just iterate over the entire array of data arrays and make the second array, excluding the first column. Perhaps there is a better data structure other than an array that I should use for this completely?

    var data_arr = []; for (row in dataset){ for (col=1;col < dataset[row].length; col++){ data_arr.push(dataset[row][col]); } } var yScale = d3.scale.linear() .domain([0, d3.max(data_arr)]) .range([h - padding, padding]); 

• Once this is resolved, I still need to determine how the graphs are generally along the y axis! This worked fine before I needed a few y-axis values:

    svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", 2); 

Please take a look at the chart with the code here for full context: http://jsbin.com/edatol/1/edit Any help is appreciated!

Answer 1

I made a couple of changes to your example, and you can see the results at http://jsbin.com/edatol/2/edit .

Firstly, I changed your data a bit. This is basically just a style, but it’s easier for me to work with objects, not arrays:

  //Static dataset var dataset = [ {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 10}, {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 20}, {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 30}, {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 40}, {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 50}, {x: now, y1: 6, y2: 60}, ]; 

Then you can find your domains and ranges, like this:

 var xDomain = d3.extent(dataset, function(i) { return ix; }); var maxY = d3.max(dataset, function(i) { return Math.max(i.y1, i.y2); }); 

Then, to add a few y-values, you just need to add an extra circle with the corresponding values. I gave them different classes so you can use them to select them if you want to do transitions or updates later.

  //Create circles svg.selectAll(".y1") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(dx); }) .attr("cy", function(d) { return yScale(d.y1); }) .attr("class", "y1") .attr("r", 2); //Create circles svg.selectAll(".y2") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(dx); }) .attr("cy", function(d) { return yScale(d.y2); }) .attr("class", "y2") .attr("r", 2);