forked from wdickerson's block: Tooltip on a Multi-line Chart
Created
June 15, 2018 09:17
-
-
Save cse4qf/c991123ac46e7d5374016217aee1d758 to your computer and use it in GitHub Desktop.
Tooltip on a Multi-line Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
// 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; | |
d3.json('state-populations.json', 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |