D3 Array Input Line Graph Example

I'm very new to d3 and in order to learn I'm trying to manipulate the d3.js line example, the code is below. I'm trying to modify this to use model data that I already have on han

Solution 1:

Check out d3's array functions, zip is among them.

Here's a commented version of the original gist working with your data: http://bl.ocks.org/patrickberkeley/9162034

The core of it is this:

// 1) Zip the close value with their corresponding date/time
//    Results in an array of arrays: 
//
//    [[582.13, "02:30:00"], [583.98, "02:45:00"], ...]
//
data = d3.zip(data.close, data.date).map(function(d) {
  //2) Format eachcloseand date/time value so d3 understands what each represents.
  close = +d[0];

  // If your data source can't be changed at all, I'd rename`date` to `time` here.
  date = parseTime(d[1]);

  //3) Return an object foreachcloseand date/time pair.
  return {close: close, date: date};
});

Solution 2:

You can pass one of your arrays to .data() and use the index to get the respective element from the other:

var line = d3.svg.line()
  .x(function(d) { return x(d); })
  .y(function(d, i) { return y(tl.close[i]); });

svg.selectAll("path")
   .data([tl.date])
   .enter().append("path")
   .attr("d", line);

You just have to remember to set the domains of the scales you're using with the correct arrays.