Built with blockbuilder.org
forked from jwilber's block: v5 line tooltip
license: mit |
Built with blockbuilder.org
forked from jwilber's block: v5 line tooltip
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<div id="my_dataviz"></div> | |
<script> | |
// set the dimensions and margins of the graph | |
var margin = {top: 10, right: 30, bottom: 30, left: 60}, | |
width = 460 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
// append the svg object to the body of the page | |
var svg = d3.select("#my_dataviz") | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", | |
"translate(" + margin.left + "," + margin.top + ")"); | |
//Read the data | |
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv").then((data) => { | |
// Add X scale | |
var xs = d3.scaleLinear() | |
.domain([1,100]) | |
.range([ 0, width ]); | |
svg.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(xs)); | |
// Add Y scale | |
var ys = d3.scaleLinear() | |
.domain([0, 13]) | |
.range([ height, 0 ]); | |
svg.append("g") | |
.call(d3.axisLeft(ys)); | |
// define line generator | |
var line = d3.line() | |
.x(function(d, i) { | |
return xs(d.x); | |
}) // set the x values for the line generator | |
.y(function(d) { return ys(d.y); }) // set the y values for the line generator | |
.curve(d3.curveMonotoneX) | |
var line2 = d3.line() | |
.x(function(d, i) { | |
return xs(d.x); | |
}) // set the x values for the line generator | |
.y(function(d) { return ys(d.y * 2); }) // set the y values for the line generator | |
.curve(d3.curveMonotoneX) | |
svg | |
.append("path") | |
.datum(data) | |
.attr('fill', 'none') | |
.attr("stroke", "coral") | |
.attr("stroke-width", 4.5) | |
.attr("d", line) | |
svg | |
.append("path") | |
.datum(data) | |
.attr('fill', 'none') | |
.attr("stroke", "coral") | |
.attr("stroke-width", 4.5) | |
.attr("d", line2) | |
// This allows to find the closest X index of the mouse: | |
var bisect = d3.bisector(d => d.x).left; | |
// // Create the circle that travels along the curve of chart | |
var focus = svg | |
.append('g') | |
.append('circle') | |
.style("fill", "skyblue") | |
.attr("stroke", "black") | |
.attr('r', 8.5) | |
.style("opacity", 0) | |
var focus2 = svg | |
.append('g') | |
.append('circle') | |
.style("fill", "skyblue") | |
.attr("stroke", "black") | |
.attr('r', 8.5) | |
.style("opacity", 0) | |
// // Create the text that travels along the curve of chart | |
var focusText = svg | |
.append('g') | |
.append('text') | |
.style("opacity", 0) | |
.attr("text-anchor", "left") | |
.attr("alignment-baseline", "middle") | |
// // Create a rect on top of the svg area: this rectangle recovers mouse position | |
svg | |
.append('rect') | |
.style("fill", "none") | |
.style("pointer-events", "all") | |
.attr('width', width) | |
.attr('height', height) | |
.on('mouseover', mouseover) | |
.on('mousemove', mousemove) | |
.on('mouseout', mouseout); | |
// What happens when the mouse move -> show the annotations at the right positions. | |
function mouseover() { | |
focus.style("opacity", 1) | |
focus2.style('opacity', 1) | |
focusText.style("opacity",1) | |
} | |
function mousemove() { | |
// recover coordinate we need | |
var x0 = xs.invert(d3.mouse(this)[0]); | |
var i = bisect(data, x0, 1); | |
selectedData = data[i] | |
focus | |
.attr("cx", xs(selectedData.x)) | |
.attr("cy", ys(selectedData.y)) | |
focus2 | |
.attr("cx", xs(selectedData.x)) | |
.attr("cy", ys(2* selectedData.y)) | |
focusText | |
.html("x:" + selectedData.x + " - " + "y:" + selectedData.y) | |
.attr("x", xs(selectedData.x)+15) | |
.attr("y", ys(selectedData.y)) | |
} | |
function mouseout() { | |
focus.style("opacity", 0) | |
focusText.style("opacity", 0) | |
} | |
}) | |
</script> | |
</body> |