D3 Multi Series Line Chart with Clickable Legend

Question

I'm having a D3 v3 Multi Series line chart in my application and it works properly. But in a scenario where the data points for all series are equal, we can't identify the multiple lines because they are getting overlapped with each other. If all the data points are equal for three series, we can only see one single line instead of three lines. After getting some suggestions from developers I thought of going with a legend for the chart so that I can click the legend and see lines of the chart. Following is my sample code. Can someone help me to implement a legend with clickable behavior for it? Or else if there is any other solution for the problem they are also welcome. Sample Code: https://jsfiddle.net/yasirunilan/rvoft1h8/

    var data = [
  {
    name: "USA",
    values: [
      {date: "2000", price: "100"},
      {date: "2001", price: "110"},
      {date: "2002", price: "145"},
      {date: "2003", price: "241"},
      {date: "2004", price: "101"},
      {date: "2005", price: "90"},
      {date: "2006", price: "10"},
      {date: "2007", price: "35"},
      {date: "2008", price: "21"},
      {date: "2009", price: "201"}
    ]
  },
  {
    name: "Canada",
    values: [
      {date: "2000", price: "100"},
      {date: "2001", price: "110"},
      {date: "2002", price: "145"},
      {date: "2003", price: "241"},
      {date: "2004", price: "101"},
      {date: "2005", price: "90"},
      {date: "2006", price: "10"},
      {date: "2007", price: "35"},
      {date: "2008", price: "21"},
      {date: "2009", price: "201"}
    ]
  },
  {
    name: "Maxico",
    values: [
      {date: "2000", price: "100"},
      {date: "2001", price: "110"},
      {date: "2002", price: "145"},
      {date: "2003", price: "241"},
      {date: "2004", price: "101"},
      {date: "2005", price: "90"},
      {date: "2006", price: "10"},
      {date: "2007", price: "35"},
      {date: "2008", price: "21"},
      {date: "2009", price: "201"}
    ]
  }
];

var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = '0.85';
var circleOpacityOnLineHover = "0.25"
var circleRadius = 3;
var circleRadiusHover = 6;


/* Format Data */
var parseDate = d3.timeParse("%Y");
data.forEach(function(d) { 
  d.values.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;    
  });
});


/* Scale */
var xScale = d3.scaleTime()
  .domain(d3.extent(data[0].values, d => d.date))
  .range([0, width-margin]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data[0].values, d => d.price)])
  .range([height-margin, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

/* Add SVG */
var svg = d3.select("#chart").append("svg")
  .attr("width", (width+margin)+"px")
  .attr("height", (height+margin)+"px")
  .append('g')
  .attr("transform", `translate(${margin}, ${margin})`);


/* Add line into SVG */
var line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.price));

let lines = svg.append('g')
  .attr('class', 'lines');

lines.selectAll('.line-group')
  .data(data).enter()
  .append('g')
  .attr('class', 'line-group')  
  .on("mouseover", function(d, i) {
      svg.append("text")
        .attr("class", "title-text")
        .style("fill", color(i))        
        .text(d.name)
        .attr("text-anchor", "middle")
        .attr("x", (width-margin)/2)
        .attr("y", 5);
    })
  .on("mouseout", function(d) {
      svg.select(".title-text").remove();
    })
  .append('path')
  .attr('class', 'line')  
  .attr('d', d => line(d.values))
  .style('stroke', (d, i) => color(i))
  .style('opacity', lineOpacity)
  .on("mouseover", function(d) {
      d3.selectAll('.line')
                    .style('opacity', otherLinesOpacityHover);
      d3.selectAll('.circle')
                    .style('opacity', circleOpacityOnLineHover);
      d3.select(this)
        .style('opacity', lineOpacityHover)
        .style("stroke-width", lineStrokeHover)
        .style("cursor", "pointer");
    })
  .on("mouseout", function(d) {
      d3.selectAll(".line")
                    .style('opacity', lineOpacity);
      d3.selectAll('.circle')
                    .style('opacity', circleOpacity);
      d3.select(this)
        .style("stroke-width", lineStroke)
        .style("cursor", "none");
    });


/* Add circles in the line */
lines.selectAll("circle-group")
  .data(data).enter()
  .append("g")
  .style("fill", (d, i) => color(i))
  .selectAll("circle")
  .data(d => d.values).enter()
  .append("g")
  .attr("class", "circle")  
  .on("mouseover", function(d) {
      d3.select(this)     
        .style("cursor", "pointer")
        .append("text")
        .attr("class", "text")
        .text(`${d.price}`)
        .attr("x", d => xScale(d.date) + 5)
        .attr("y", d => yScale(d.price) - 10);
    })
  .on("mouseout", function(d) {
      d3.select(this)
        .style("cursor", "none")  
        .transition()
        .duration(duration)
        .selectAll(".text").remove();
    })
  .append("circle")
  .attr("cx", d => xScale(d.date))
  .attr("cy", d => yScale(d.price))
  .attr("r", circleRadius)
  .style('opacity', circleOpacity)
  .on("mouseover", function(d) {
        d3.select(this)
          .transition()
          .duration(duration)
          .attr("r", circleRadiusHover);
      })
    .on("mouseout", function(d) {
        d3.select(this) 
          .transition()
          .duration(duration)
          .attr("r", circleRadius);  
      });


/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale).ticks(5);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height-margin})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append('text')
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("Total values");

D3 Multi Series Line Chart with Clickable Legend

Answers (1)

Related Questions