| license: mit |
This is a follow on from the simple scatterplot used as an example in the book D3 Tips and Tricks.
It is aimed at demonstrating a simple tooltip using d3.js and should be taken in context with the text of the book which can be downloaded for free from Leanpub.
forked from d3noob's block: Simple d3.js tooltips
| 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 */ | |
| 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 { | |
| color: white; | |
| position: absolute; | |
| text-align: center; | |
| width: 60px; | |
| height: 28px; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: rgba(0,0,0,.8); | |
| border: 2px solid black; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="http://d3js.org/d3.v5.min.js"></script> | |
| <script> | |
| // Set the dimensions of the canvas / graph | |
| const margin = { | |
| top: 30, | |
| right: 20, | |
| bottom: 30, | |
| left: 50 | |
| }; | |
| const width = 600 - margin.left - margin.right; | |
| const height = 270 - margin.top - margin.bottom; | |
| // Parse the date / time | |
| const parseDate = d3.timeParse('%d-%b-%y'); | |
| const formatTime = d3.timeFormat('%e %B'); | |
| // Set the ranges | |
| const x = d3.scaleTime().range([0, width]); | |
| const y = d3.scaleLinear().range([height, 0]); | |
| // Define the axes | |
| const xAxis = d3.axisBottom(x).ticks(5); | |
| const yAxis = d3.axisLeft(y) | |
| .ticks(5); | |
| // Define the line | |
| const valueline = d3.line() | |
| .x(d => x(d.date)) | |
| .y(d => y(d.close)); | |
| // Define the div for the tooltip | |
| const div = d3 | |
| .select('body') | |
| .append('div') | |
| .attr('class', 'tooltip') | |
| .style('opacity', 0); | |
| // Adds the svg canvas | |
| const 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').then(data => { | |
| data.forEach(d => { | |
| d.date = parseDate(d.date); | |
| d.close = +d.close; | |
| }); | |
| // Scale the range of the data | |
| x.domain(d3.extent(data, d => d.date)); | |
| y.domain([0, d3.max(data, d => d.close)]); | |
| // Add the valueline path. | |
| svg | |
| .append('path') | |
| .attr('class', 'line') | |
| .attr('d', valueline(data)); | |
| // Add the scatterplot | |
| svg | |
| .selectAll('dot') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('r', 5) | |
| .attr('cx', d => x(d.date)) | |
| .attr('cy', d => y(d.close)) | |
| .attr('stroke-width', '20px') | |
| .attr('stroke', 'rgba(0,0,0,0)') | |
| .style('cursor', 'pointer') | |
| .on('mouseover', d => { | |
| div | |
| .transition() | |
| .duration(200) | |
| .style('opacity', 0.9); | |
| div | |
| .html(formatTime(d.date) + '<br/>' + d.close) | |
| .style('left', d3.event.pageX + 'px') | |
| .style('top', d3.event.pageY - 28 + 'px'); | |
| }) | |
| .on('mouseout', () => { | |
| div | |
| .transition() | |
| .duration(500) | |
| .style('opacity', 0); | |
| }); | |
| // 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> |