D3 - Making stroke-width covary with second data set

Question

I'm building a pretty straightforward multi-line chart measuring values over time using a .tsv dataset. I want to incorporate a second .tsv that will change the stroke-width of each line. The two datasets have the same x-value(time), but one will plot each line's y-value, and the other dataset will plot the line's stroke-width (let's call it 'z') over the x and y values.

In other words: Dataset1 = x,y Dataset2 = x,z

I'm using Bostock's Multi-Series Line chart as my base reference.

One thought I've had: Should I merge the two .tsv's into a single .json?

Answer 1

Regardless of whether you're going to combine into a JSON file or a single TSV, I would highly recommend joining the two files. Apart from making data access less confusing, you'll also need only a single load call instead of two nested ones. So instead of something like

d3.tsv("1.tsv", function(error1, data1) {
  d3.tsv("2.tsv", function(error2, data2) {
    // ...
    something.selectAll("path")
      .data(data1).enter()
      .append("path")
      .style("stroke-width", function(d, i) { return data2[i].z; })
      .attr("d", function(d) { return d.y; });
  });
});

you could do something like

d3.tsv("1.tsv", function(error, data) {
    // ...
    something.selectAll("path")
      .data(data1).enter()
      .append("path")
      .style("stroke-width", function(d) { return d.z; })
      .attr("d", function(d) { return d.y; });
});

Note that you won't be able to vary the stroke width of a line in SVG though. That is, each path has a width that you can't change dynamically. To achieve this, you would need to break up the line into separate segments or create a filled path that simulates a line of varying width.