D3 - Making Stroke-width Covary With Second Data Set

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 ea

Solution 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.