Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active March 31, 2022 00:43
Show Gist options
  • Save d3noob/40bfe16d0b344852df92d97510d2825e to your computer and use it in GitHub Desktop.
Save d3noob/40bfe16d0b344852df92d97510d2825e to your computer and use it in GitHub Desktop.
Download ZIP
Favorite tooltip (complex version) v7
Raw
.block
license: mit
Raw
README.md

This is a follow on from the simple tooltip graph written with d3.js v7.

It extends a tooltip technique which I find particularly neat.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

Raw
atad.csv
date close
26-Mar-12 606.98
27-Mar-12 614.48
28-Mar-12 617.62
29-Mar-12 609.86
30-Mar-12 599.55
2-Apr-12 618.63
3-Apr-12 629.32
4-Apr-12 624.31
5-Apr-12 633.68
9-Apr-12 636.23
10-Apr-12 628.44
11-Apr-12 626.20
12-Apr-12 622.77
13-Apr-12 605.23
16-Apr-12 580.13
17-Apr-12 543.70
18-Apr-12 443.34
19-Apr-12 345.44
20-Apr-12 234.98
23-Apr-12 166.70
24-Apr-12 130.28
25-Apr-12 99.00
26-Apr-12 89.70
27-Apr-12 67.00
30-Apr-12 53.98
1-May-12 58.13
Raw
data.csv
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
18-Apr-12 443.34
17-Apr-12 543.70
16-Apr-12 580.13
13-Apr-12 605.23
12-Apr-12 622.77
11-Apr-12 626.20
10-Apr-12 628.44
9-Apr-12 636.23
5-Apr-12 633.68
4-Apr-12 624.31
3-Apr-12 629.32
2-Apr-12 618.63
30-Mar-12 599.55
29-Mar-12 609.86
28-Mar-12 617.62
27-Mar-12 614.48
26-Mar-12 606.98
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y"),
formatDate = d3.timeFormat("%d-%b"),
bisectDate = d3.bisector(function(d) { return d.date; }).left;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");
// Adding a separate group to 'layer' the objects
var lineSvg = svg.append("g");
var focus = svg.append("g")
.style("display", "none");
// Get the data
d3.csv("atad.csv").then(function(data) {
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
lineSvg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
// append the x line
focus.append("line")
.attr("class", "x")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);
// append the y line
focus.append("line")
.attr("class", "y")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", width)
.attr("x2", width);
// append the circle at the intersection
focus.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "blue")
.attr("r", 4);
// place the value at the intersection
focus.append("text")
.attr("class", "y1")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "-.3em");
focus.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em");
// place the date at the intersection
focus.append("text")
.attr("class", "y3")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4")
.attr("dx", 8)
.attr("dy", "1em");
// append the rectangle to capture mouse
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.pointer(event,this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.select("circle.y")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")");
focus.select("text.y1")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y2")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(d.close);
focus.select("text.y3")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select("text.y4")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.text(formatDate(d.date));
focus.select(".x")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.close) + ")")
.attr("y2", height - y(d.close));
focus.select(".y")
.attr("transform",
"translate(" + width * -1 + "," +
y(d.close) + ")")
.attr("x2", width + width);
}
});
</script>
</body>
@huyen-nguyen
Copy link

huyen-nguyen commented Mar 31, 2022

Very neat and clean design. The little drop shadow effect is elegant yet useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment