Skip to content

Instantly share code, notes, and snippets.

@praveenuics

praveenuics/.block

Last active June 19, 2020 21:49
Show Gist options
  • Save praveenuics/fa0fc4397116f22c3e9bbf67a3a954e9 to your computer and use it in GitHub Desktop.
Save praveenuics/fa0fc4397116f22c3e9bbf67a3a954e9 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip on a Multi-line Chart D3V4
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<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>
</head>
<body>
<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.history).enter()
.append('text')
.html(d => d.year)
.attr('fill', d => d.color)
.attr('alignment-baseline', 'middle')
.attr('x', width)
.attr('dx', '.5em')
.attr('y', d => y(d.population));
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>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment