D3 - Create a covariance hatch width with a second dataset
I am building a fairly simple multi-line graph measuring values over time using a .tsv dataset. I want to include a second .tsv that will change the stroke width of each line. Both datasets have the same x (time) value, but each will plot each row of y-values, and the other dataset will plot the line stroke width (let's call it "z") in x and y values.
In other words: Dataset1 = x, y Dataset2 = x, z
I am using the Bostock Multi-Series Row Table as a base reference.
One thought I had: should I concatenate two .tsv into one .json?
source to share
Whether you are going to concatenate into a JSON file or one TSV file, I highly recommend joining these two files. Besides making data access less confusing, you only need one 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 can 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; });
});
Please note that you will not be able to change the line stroke width in SVG. That is, each path
has a width that cannot be dynamically changed. To do this, you need to split the line into separate segments, or create a filled path that simulates a line of different widths.
source to share