CODEWITHSUNDEEP
d3.jsvisualization
Union find
Union find

Reputation: 8150

Plotting multiple lines with different number of values

I have a csv with two columns of data for two lines on a multiple-line series chart.

The data is like this:

date,Presidential Approval,Congressional Approval
1/11/09,,39
2/8/09,64,
3/12/09,59,
4/6/09,61,
4/21/09,,49
4/21/09,63,
6/14/09,61,

As you can see, the data doesn't map over for the two columns, but I want the two lines to be on the same chart.

Is there a way to use the enter method with two time series like this?

If you use the classical D3 enter pattern:

var lines = svg.selectAll(".lines")
      .data(data_array)
      .enter()
        .append('g')
        .attr('data-name', function(d,i) { return d.name; })
        .attr('class','lines');

    lines
      .append("path")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke-width", 4.75);

It returns 0 values for the empty values. I'd like it to just skip over those and interpolate between the points for each line.

Upvotes: 0

Views: 37

Answers (1)

Union find
Union find

Reputation: 8150

Best way I found to do this was to filter my data ahead of time in the nesting phase:

var data_array = keys.map(function(name) {
      return {
        name: name, // values > 0 will be excluded
        values: data.filter(function(d) { return +d[name] > 0 }).map(function(d) {
          return {date: d.date, poll: +d[name]};
        })
      };
    });

Upvotes: 1

Related Questions