| license: mit |
This is a simple graph demonstrating the addition of tooltips with a hyperlink in a graph. This was written using d3.js v4 and is a follow on to the simple scatter plot example with tooltips here.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Tooltip with link in v4
| 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 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> /* set the CSS */ | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 2px; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 60px; | |
| height: 28px; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: lightsteelblue; | |
| border: 0px; | |
| border-radius: 8px; | |
| } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v4.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"); | |
| var formatTime = d3.timeFormat("%e %B"); | |
| // 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); }); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // 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 + ")"); | |
| // Get the data | |
| d3.csv("data.csv", function(error, data) { | |
| if (error) throw error; | |
| // 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. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("d", valueline); | |
| // add the dots with tooltips | |
| 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); }) | |
| .on("mouseover", function(d) { | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div .html( | |
| '<a href= "http://google.com">' + // The first <a> tag | |
| formatTime(d.date) + | |
| "</a>" + // closing </a> tag | |
| "<br/>" + d.close) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }); | |
| // 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)); | |
| }); | |
| </script> | |
| </body> |