Tooltip on a Multi-line Chart D3V4

.block

license: mit

README.md

Built with blockbuilder.org

index.html

<svg width='800' height='400'></svg>
<div id='tooltip' style='position:absolute;background-color:lightgray;padding:5px'></div>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
  
  var jsonData = [
  {
    "name": "California",
    "show": true,
    "color": "red",
    "currentPopulation": 37253956,
    "history": [
      {
        "year": 1910,
        "population": 2377549
      },
      {
        "year": 1920,
        "population": 3426861
      },
      {
        "year": 1930,
        "population": 5677251
      },
      {
        "year": 1940,
        "population": 6907387
      },
      {
        "year": 1950,
        "population": 10586223
      },
      {
        "year": 1960,
        "population": 15717204
      },
      {
        "year": 1970,
        "population": 19953134
      },
      {
        "year": 1980,
        "population": 23667902
      },
      {
        "year": 1990,
        "population": 29760021
      },
      {
        "year": 2000,
        "population": 33871648
      },
      {
        "year": 2010,
        "population": 37253956
      }
    ]
  },
  {
    "name": "Michigan",
    "show": true,
    "color": "blue",
    "currentPopulation": 9883640,
    "history": [
      {
        "year": 1910,
        "population": 2810173
      },
      {
        "year": 1920,
        "population": 3668412
      },
      {
        "year": 1930,
        "population": 4842325
      },
      {
        "year": 1940,
        "population": 5256106
      },
      {
        "year": 1950,
        "population": 6371766
      },
      {
        "year": 1960,
        "population": 7823194
      },
      {
        "year": 1970,
        "population": 8875083
      },
      {
        "year": 1980,
        "population": 9262078
      },
      {
        "year": 1990,
        "population": 9295297
      },
      {
        "year": 2000,
        "population": 9938444
      },
      {
        "year": 2010,
        "population": 9883640
      }
    ]
  },
  {
    "name": "Texas",
    "show": true,
    "color": "green",
    "currentPopulation": 25145561,
    "history": [
      {
        "year": 1910,
        "population": 3896542
      },
      {
        "year": 1920,
        "population": 4663228
      },
      {
        "year": 1930,
        "population": 5824715
      },
      {
        "year": 1940,
        "population": 6414824
      },
      {
        "year": 1950,
        "population": 7711194
      },
      {
        "year": 1960,
        "population": 9579677
      },
      {
        "year": 1970,
        "population": 11196730
      },
      {
        "year": 1980,
        "population": 14229191
      },
      {
        "year": 1990,
        "population": 16986510
      },
      {
        "year": 2000,
        "population": 20851820
      },
      {
        "year": 2010,
        "population": 25145561
      }
    ]
  }
];
  
// Define margins, dimensions, and some line colors
const margin = {top: 40, right: 120, bottom: 30, left: 40};
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Define the scales and tell D3 how to draw the line
const x = d3.scaleLinear().domain([1910, 2010]).range([0, width]);     
const y = d3.scaleLinear().domain([0, 40000000]).range([height, 0]);
const line = d3.line().x(d => x(d.year)).y(d => y(d.population));

const chart = d3.select('svg').append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
const tooltip = d3.select('#tooltip');
const tooltipLine = chart.append('line');
  
// Add the axes and a title
const xAxis = d3.axisBottom(x).tickFormat(d3.format('.4'));
const yAxis = d3.axisLeft(y).tickFormat(d3.format('.2s'));
chart.append('g').call(yAxis); 
chart.append('g').attr('transform', 'translate(0,' + height + ')').call(xAxis);
chart.append('text').html('State Population Over Time').attr('x', 200);
  
// Load the data and draw a chart
let states, tipBox;
jsonData.forEach(d => {
  states = d;

  chart.selectAll()
    .data(states).enter()
    .append('path')
    .attr('fill', 'none')
    .attr('stroke', d => d.color)
    .attr('stroke-width', 2)
    .datum(d => d.history)
    .attr('d', line);
  
  chart.selectAll()
    .data(states).enter()
    .append('text')
    .html(d => d.name)
    .attr('fill', d => d.color)
    .attr('alignment-baseline', 'middle')
    .attr('x', width)
    .attr('dx', '.5em')
    .attr('y', d => y(d.currentPopulation)); 
  
  tipBox = chart.append('rect')
    .attr('width', width)
    .attr('height', height)
    .attr('opacity', 0)
    .on('mousemove', drawTooltip)
    .on('mouseout', removeTooltip);
})

function removeTooltip() {
  if (tooltip) tooltip.style('display', 'none');
  if (tooltipLine) tooltipLine.attr('stroke', 'none');
}

function drawTooltip() {
  const year = Math.floor((x.invert(d3.mouse(tipBox.node())[0]) + 5) / 10) * 10;
  
  states.sort((a, b) => {
    return b.history.find(h => h.year == year).population - a.history.find(h => h.year == year).population;
  })  
    
  tooltipLine.attr('stroke', 'black')
    .attr('x1', x(year))
    .attr('x2', x(year))
    .attr('y1', 0)
    .attr('y2', height);
  
  tooltip.html(year)
    .style('display', 'block')
    .style('left', d3.event.pageX + 20)
    .style('top', d3.event.pageY - 20)
    .selectAll()
    .data(states).enter()
    .append('div')
    .style('color', d => d.color)
    .html(d => d.name + ': ' + d.history.find(h => h.year == year).population);
}
</script>