using d3.scaleOrdinal troubleshooting

I'm making a parallel plot (see: https://www.data-to-viz.com/graph/parallel.html) and need each of my lines to be different colors based on the country they're assigned too. I'm working in JS d3.

This is the scale I have right now:

var ColorScale = d3.scaleOrdinal().domain(countries).range(d3.schemeDark2);  

But I don't think the issue is here since when I check each country has a different color code. I have a function to make lines that gets passed the color, and then here's that code:

d3.select("g#lines")  .append("path")  .datum(data)  .attr("class", "line")  .attr("d", LineGenerator)  .style("stroke", Color);  

When I inspect the page, stroke is always set to rgb(102, 102, 102) which I believe is grey. I don't think I have a css rule overwriting it.

Here's a link to the full code on codesandbox if you're interested: https://codesandbox.io/s/csc-160-project-forked-5bx01

This is being written in the "parallelplot.js" file. The "plot.html" file is where it's drawn. The data is from "DataTransposed.csv"

https://stackoverflow.com/questions/67327298/using-d3-scaleordinal-troubleshooting April 30, 2021 at 10:07AM