Instantly share code, notes, and snippets.

@d3noob /datatips.csv
Last active Dec 15, 2016

Embed
What would you like to do?
d3.js tool tips with links in data

This is designed to demonstrate generating tool tips with an HTML linkwith links contained in the source csv file. The graph is based on a simple line graph per the book D3 Tips and Tricks and was generated in response to a question on the d3noob.org blog.

It is also a follow on from a slightly simpler version here.

date close link
1-May-12 58.13 http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d
30-Apr-12 53.98 http://bl.ocks.org/d3noob/11313583
27-Apr-12 67.00 http://bl.ocks.org/d3noob/11306153
26-Apr-12 89.70 http://bl.ocks.org/d3noob/11137963
25-Apr-12 99.00 http://bl.ocks.org/d3noob/10633856
24-Apr-12 130.28 http://bl.ocks.org/d3noob/10633704
23-Apr-12 166.70 http://bl.ocks.org/d3noob/10633421
20-Apr-12 234.98 http://bl.ocks.org/d3noob/10633192
19-Apr-12 345.44 http://bl.ocks.org/d3noob/10632804
18-Apr-12 443.34 http://bl.ocks.org/d3noob/9692795
17-Apr-12 543.70 http://bl.ocks.org/d3noob/9267535
16-Apr-12 580.13 http://bl.ocks.org/d3noob/9211665
13-Apr-12 605.23 http://bl.ocks.org/d3noob/9167301
12-Apr-12 622.77 http://bl.ocks.org/d3noob/8603837
11-Apr-12 626.20 http://bl.ocks.org/d3noob/8375092
10-Apr-12 628.44 http://bl.ocks.org/d3noob/8329447
9-Apr-12 636.23 http://bl.ocks.org/d3noob/8329404
5-Apr-12 633.68 http://bl.ocks.org/d3noob/8150631
4-Apr-12 624.31 http://bl.ocks.org/d3noob/8273682
3-Apr-12 629.32 http://bl.ocks.org/d3noob/7845954
2-Apr-12 618.63 http://bl.ocks.org/d3noob/6584483
30-Mar-12 599.55 http://bl.ocks.org/d3noob/5893649
29-Mar-12 609.86 http://bl.ocks.org/d3noob/6077996
28-Mar-12 617.62 http://bl.ocks.org/d3noob/5193723
27-Mar-12 614.48 http://bl.ocks.org/d3noob/5141528
26-Mar-12 606.98 http://bl.ocks.org/d3noob/5028304
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
/* pointer-events: none; This line needs to be removed */
}
</style>
<body>
<!-- load the d3.js library -->
<script type=
"text/javascript" src="http://d3js.org/d3.v3.min.js">
</script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");// Format tooltip date / time
// Set the rangestrann
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Define 'div' for tooltips
var div = d3.select("body")
.append("div") // declare the tooltip div
.attr("class", "tooltip")
.style("opacity", 0);
// Adds the svg canvas
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 + ")");
// Get the data
d3.csv("datatips.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(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.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
// Tooltip stuff after this
.on("mouseover", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
'<a href= "'+d.link+'" target="_blank">' + //with a link
formatTime(d.date) +
"</a>" +
"<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment