Dev4: utilizing scaleOrdinal for color mapping and selection

Question

Dev4: utilizing scaleOrdinal for color mapping and selection

I have developed a code that generates line graphs on an SVG canvas, however, I am facing difficulties in altering the colors as I defined using the d3.scaleOrdinal function.

Despite defining 12 distinct colors, the output I am getting looks like this. Is there anyone who can assist me with this? Thank you.

  var colorScheme = d3.scaleOrdinal().range([
      '#673ab7',
      '#9c27b0',
      '#e91e63',
      '#f44336',
      '#ff5722',
      '#ff9800',
      '#ffc107',
      '#ffeb3b',
      '#cddc39',
      '#8bc34a',
      '#4caf50',
      '#009688'])
    .domain(d3.range(1,13));

  var line = d3.line()
    .x(function(d) { return x(d.day); })
    .y(function(d) { return y(d.temp); });

  var generateLineChart = function(csvfile, i) {
    d3.csv(csvfile, function(error, data){
      data.forEach(function(d){
        d.month = +d.month,
        d.day= +d.day,
        d.temp= +d.temp;
      });

      svg.append('path')
        .data([data])
        .attr('class','line')
        .style('stroke', function(i){ return colorScheme(i);})
        .attr('d', line);

    }); //end of read csv
  }; //end of line chart

  generateLineChart('/static/data/temp1.csv'1);
  generateLineChart('/static/data/temp2.csv'2);
  generateLineChart('/static/data/temp3.csv'3);
  generateLineChart('/static/data/temp4.csv'4);
  generateLineChart('/static/data/temp5.csv',5);
  generateLineChart('/static/data/temp6.csv',5);
  generateLineChart('/static/data/temp7.csv',6);
  generateLineChart('/static/data/temp8.csv',7);
  generateLineChart('/static/data/temp9.csv',8);
  generateLineChart('/static/data/temp10.csv',80);
  generateLineChart('/static/data/temp11.csv',90);
  generateLineChart('/static/data/temp12.csv',100);

javascript d3.js svg

Answer 1

Answer №1

One issue to address is that in D3, the first argument is consistently the data, regardless of whether it is named d, i, or p. Therefore, the following adjustment should be made:

.style('stroke', function(d, i){ return color2(i);})

However, simply making this change will not suffice due to a second concern.

The second problem lies in repeatedly calling lineChart for each line, resulting in the index always being 0 upon each invocation.

A potential solution involves passing the index as an argument, like so:

lineChart('/static/data/temp1.csv', 1);
lineChart('/static/data/temp2.csv', 2);
lineChart('/static/data/temp3.csv', 3);
//...

Within the function (although the function declarations were omitted), consider including:

function lineChart(url, index){
    //your existing code
    .style('stroke', function(){ return color2(index);})
    .attr('d', line);
};

Please refer to this demonstration for further clarity:

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 200);

var color2 = d3.scaleOrdinal().range(['#673ab7','#9c27b0','#e91e63','#f44336','#ff5722','#ff9800','#ffc107','#ffeb3b','#cddc39','#8bc34a','#4caf50','#009688'])
    .domain(d3.range(1,13));

function draw(dimention, index){
  svg.append("rect").attr("x", Math.random()*470)
  .attr("y", Math.random()*170).attr("width", dimention).attr("height", dimention)
  .attr("fill", function(d,i){ console.log("index is " + i); return color2(index)});
}
  
draw(30, 1);draw(10, 2);draw(25, 3);draw(20, 4);draw(5, 5);
draw(10, 6);draw(8, 7);draw(12, 8);draw(10, 9);draw(17, 10);

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

One issue to address is that in D3, the first argument is consistently the data, regardless of whether it is named d, i, or p. Therefore, the following adjustment should be made:

.style('stroke', function(d, i){ return color2(i);})

However, simply making this change will not suffice due to a second concern.

The second problem lies in repeatedly calling lineChart for each line, resulting in the index always being 0 upon each invocation.

A potential solution involves passing the index as an argument, like so:

lineChart('/static/data/temp1.csv', 1);
lineChart('/static/data/temp2.csv', 2);
lineChart('/static/data/temp3.csv', 3);
//...

Within the function (although the function declarations were omitted), consider including:

function lineChart(url, index){
    //your existing code
    .style('stroke', function(){ return color2(index);})
    .attr('d', line);
};

Please refer to this demonstration for further clarity:

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 200);

var color2 = d3.scaleOrdinal().range(['#673ab7','#9c27b0','#e91e63','#f44336','#ff5722','#ff9800','#ffc107','#ffeb3b','#cddc39','#8bc34a','#4caf50','#009688'])
    .domain(d3.range(1,13));

function draw(dimention, index){
  svg.append("rect").attr("x", Math.random()*470)
  .attr("y", Math.random()*170).attr("width", dimention).attr("height", dimention)
  .attr("fill", function(d,i){ console.log("index is " + i); return color2(index)});
}
  
draw(30, 1);draw(10, 2);draw(25, 3);draw(20, 4);draw(5, 5);
draw(10, 6);draw(8, 7);draw(12, 8);draw(10, 9);draw(17, 10);

<script src="https://d3js.org/d3.v4.min.js"></script>

Dev4: utilizing scaleOrdinal for color mapping and selection

Answer №1

Similar questions

The script is unable to locate the property 'indexOf' because it is undefined

Struggling to store the results of multiple fetch API calls in an array for future access beyond the function

Combining CodeIgniter4 with Vue.js and Webpack's devServer to handle CORS issues

Assistance needed with implementing jQuery tabs

What is the best way to display an Error 404 page in a statically rendered client-side page using Next.js?

Tips for effectively utilizing props in react

What is the method with the greatest specificity for applying styles: CSS or JS?

Is there a way to retrieve the response body in Express framework?

Translating Bootstrap 5 into Angular components for version 13 and above

Error encountered while trying to implement sleep function in script

Controller unable to update AngularJS view

What could be causing my dangerouslySetInnerHTML to show altered content?

Add items to a separate array only if the material UI checkbox is selected

Tips for inserting an object into an array

Instructions on removing rows by using buttons within a JavaScript-generated table

Avoid triggering the resizecolumn event in ExtJS while the columns are still loading

Steer clear of using multiple returns in a loop in JavaScript by utilizing async/await to eliminate the callback pyramid or callback hell

JavaScript function is returning 'undefined' instead of an integer

Checking for valid zip code using a regular expression in JavaScript

Is it possible to achieve consistent scrollY height values across various screen sizes?