d3.js tool tip with HTML link

100%

d3.js tool tip with HTML link

✓ Published0🌍 Public

Last edited Sep 10, 2018

Created on Sep 10, 2018

A line graph plots stock closing prices over time from a CSV dataset, with circular markers for each data point. The example demonstrates a D3.js tooltip implemented as an HTML div that appears on mouseover, showing the formatted date and price inside a clickable link to Google. The tooltip transitions opacity on hover and stays positioned relative to the mouse event, while the SVG axes and path are rendered using d3.svg.axis and d3.svg.line. The code removes the pointer-events restriction to enable the link interaction.

AI-generated description

This is designed to demonstrate generating tool tips with an HTML link in them. 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.

The main differences with this example are the addition of the <a> tags in the appropriate places as commented, the removal of the pointer-events: none attribute in the `style section and the slight amending of the transitions of the html divs so that the tool tips stay in place while the mouse moves off the dot.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d'>d3.js tool tip with HTML link</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js tool tip with HTML link

This example shows a line graph of date-stock price pairs from a CSV file, where each data point is marked by a circle. Hovering over a circle triggers an HTML tooltip containing a hyperlink to Google, a formatted date, and the closing price. It uses d3.v3 APIs like `d3.time.scale`, `d3.svg.line`, and `d3.select` to build the SVG chart and manage the tooltip’s position and opacity transitions. The tooltip remains active because the `pointer-events` CSS property is not disabled.

Dd3noob

94% match

Loading thumbnail…

d3.js tool tips with links in data

This example shows a line chart of stock closing prices that, when hovering over a point, displays a tooltip containing the date, the price, and a hyperlink to a related resource stored in the CSV data. The tooltip appears with a fade-in effect and includes an HTML anchor tag that opens the link in a new tab. Built with D3 v3, the code uses `d3.csv` to load the data, `d3.time.scale` and `d3.svg.line` for the chart, and SVG circles with mouseover events to trigger the tooltip, which is a styled `div` positioned at the cursor.

Dd3noob

89% match

Loading thumbnail…

Simple d3.js tooltips

A line chart plots stock closing prices over time, with a tooltip that reveals the exact date and price when hovering over a data point. The visualization uses d3.js to render SVG circles for each data point and a path for the line, reading time-series data from a CSV file. The tooltip is implemented using an HTML div that appears via d3 transitions on mouseover and mouseout events, positioning itself near the cursor using `d3.event.pageX` and `d3.event.pageY`. The chart axes employ `d3.svg.axis` with time and linear scales.

Dd3noob

84% match

Loading thumbnail…

Tooltip with link in v6

This example shows a time-series line chart of stock close prices, with persistent tooltips that appear on mouseover and include a hyperlink to Google. The tooltip displays the formatted date and closing value, anchored to the cursor position. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3.axisBottom/axisLeft for rendering. Circles are appended per data point, with tooltip behavior triggered by mouseover events.

Dd3noob

84% match

Loading thumbnail…

Tooltip with link in v6

A line chart displays stock close prices over time, with each data point marked by a circle. Hovering over a circle reveals a tooltip showing the formatted date and value, where the date is a hyperlink to Google. The visualization is built with D3 v6, using `d3.csv` to load the data, `d3.timeParse` and `d3.timeFormat` for date handling, and `d3.line` to generate the SVG path. Tooltips are HTML divs positioned via mouse events and animated with opacity transitions.

Dd3noob

82% match

Loading thumbnail…

Tooltip with link in v7

A line chart displays stock closing prices over time, with circular markers for each data point. Hovering over a marker reveals a tooltip containing the formatted date and closing value, with the date rendered as a hyperlink to an external site. The visualization uses d3.csv to load the timestamped data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. Tooltips are implemented as HTML divs positioned via event.pageX and pageY, with opacity transitions on mouseover.

Dd3noob

82% match

Loading thumbnail…

Line Chart with Axis Tooltips

This example shows a line chart of Google stock data, tracking daily closing prices over time. It uses a React-based SVG visualization with D3 scales for mapping data to coordinates. The chart features interactive axis tooltips that appear on mouse movement, displaying detailed date and price information. The code implements custom tooltip paths for both axes, uses d3.bisector for data lookup, and includes a multi-format time formatter for adaptive tick labels. The data source is a CSV file containing five years of historical stock data for GOOGL.

RRajat Dangat

81% match

Loading thumbnail…

Multi-links in tooltips using v7

A line chart displays stock closing prices over time, with a small tooltip appearing on mouseover for each data point. The tooltip is a persistent, styled `<div>` that shows the date and price, and includes a hyperlink to a related resource. The chart is rendered with SVG using D3 v7, drawing a path for the data series and circles for individual points. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with data sourced from data-link.csv.

Dd3noob

80% match