Skip to content

Instantly share code, notes, and snippets.

@Grepsy
Forked from ilyabo/index.html
Created January 4, 2017 09:39
Show Gist options
  • Save Grepsy/6a2940321ebdfd0e97ed2fcfb36d13ef to your computer and use it in GitHub Desktop.
Save Grepsy/6a2940321ebdfd0e97ed2fcfb36d13ef to your computer and use it in GitHub Desktop.
D3 tooltip using SVG title element
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 800, h = 500;
var colors = d3.scale.category20();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
var data = d3.range(20).map(function() { return { x:Math.random()*w, y:Math.random()*h, r:Math.random()*30 } });
vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("stroke", "black")
.attr("fill", function(d, i) { return colors(i); })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", function(d, i) { return d.r; })
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip
.append("svg:title")
.text(function(d, i) { return "My color is " + colors(i); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment