Skip to content

Instantly share code, notes, and snippets.

@davegotz
Created January 12, 2022 14:05
Show Gist options
  • Save davegotz/a020277b90c5eac4e1de3d8e34396c5b to your computer and use it in GitHub Desktop.
Save davegotz/a020277b90c5eac4e1de3d8e34396c5b to your computer and use it in GitHub Desktop.
Tippy Tooltips and D3 Example
<html>
<head>
<title>Example of Using Tippy Tooltips with D3</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Notice these two new scripts... tippy is the tooltip library and it depends on popper. -->
<!-- This leverages the tippyjs library. -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<style>
/* Style information for axis labels */
.axis-label {
font-family: sans-serif;
font-size: 12px;
}
/* Style information for axis lines and tick marks */
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
/* This styles the tool tip. */
.tippy-box {
color: #fefefe;
font-family: sans-serif;
padding: 5px 8px;
border-radius: 2px;
opacity: 0.9;
font-weight: bold;
}
</style>
</head>
<body>
<svg width="640" height="480"></svg>
<script>
let margin = 40;
let data = [
[0, 0.1],
[10, 0.4],
[20, 0.2],
[30, 0.3],
[40, 0.2],
[50, 0.5],
[60, 0.2],
[70, 0.9],
[80, 0.4],
[90, 0.3],
[100, 0.1],
];
// Define scales for the x and y axes.
// We'll set the x axis to be 0-100
var x = d3.scaleLinear()
.domain([0,100])
.range([margin,640-margin]);
// And we'll set the y axis to be 0-1
var y = d3.scaleLinear()
.domain([0,1])
.range([480-margin,margin]);
let svg = d3.select("svg");
// New draw the X axis and label.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,"+(480-margin)+")")
.call(d3.axisBottom(x))
svg.append("text")
.attr("class", "axis-label")
.attr("x", x(50))
.attr("y", 480-3)
.style("text-anchor", "middle")
.text("X Axis Label");
// Now the Y axis and label.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+margin+",0)")
.call(d3.axisLeft(y));
svg.append("text")
.attr("transform", "rotate(90)")
.attr("class", "axis-label")
.attr("x", y(0.5))
.attr("y", -3)
.style("text-anchor", "middle")
.text("Y Axis Label");
// Add the line for the line chart.
let line = d3.area()
.x(d => x(d[0]))
.y1(d => y(d[1]))
.y0(d => y(0))
.curve(d3.curveCardinal);
svg.append("path")
.attr("d", line(data))
.attr("fill", "pink")
.attr("stroke", "black");
// Add circles for the actual data points.
let dots = svg.selectAll(".dot").data(data);
dots.enter().append("circle")
.attr("class", "dot")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.style("fill", "red")
.style("stroke", "black")
// These next two lines support tool tips...
// First, we set the content of the tooltip.
.attr('data-tippy-content', d=> "Value of " + d[1])
// Then we call tippy on the DOM nodes for these objects.
.call(s=>tippy(s.nodes()))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment