CODEWITHSUNDEEP
javascripthtmld3.js
CodingMarg
CodingMarg

Reputation: 23

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"

Upvotes: 2

Views: 175

Answers (1)

Richard
Richard

Reputation: 722

There are a couple of changes you need to make, first the function you defined to draw the lines only takes 5 params and you are passing both the scale and the color value, it takes the first of them (scale) which is the always the same therefore your output is always the same color.

var MakeLine = function (data, country, xScale, yScale, Color) {

Second since you probably are going to have more than 2 countries you don't want to create intermediate variables just send the evaluation

var ColorScale = d3.scaleOrdinal().domain(countries).range(d3.schemeDark2);
  MakeAxes(graph, margins, xScale, yScale);

  d3.select("svg#linegraph")
    .append("g")
    .attr("id", "lines")
    .attr("transform", MakeTranslateString(margins.left, margins.top));

  MakeLine(data, "Argentina", xScale, yScale, ColorScale("Argentina"));
  MakeLine(data, "Egypt", xScale, yScale, ColorScale("Egypt"));

Even better if you pass the country name as a variable when you go through data to have a single statement doing everything.

Upvotes: 1

Related Questions