Line Chart with Axis Tooltips

100%

Line Chart with Axis Tooltips

✓ Published0🌍 Public

Last edited Apr 1, 2021

Created on Apr 1, 2021

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.

AI-generated description

A scatter plot of Data Canvas Sense Yout City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with label

A step-shaped line chart displays Google stock closing prices (GOOGL) from March 2016 to March 2021, with a hover tooltip showing the exact price and date. The visualization uses React with SVG rendering, relying on d3.scaleTime and d3.scaleLinear for axes, d3.line with curveStep for the path, and d3.bisector for nearest-point lookup. Interactive tooltips are implemented through React state and mouse events, while the multiFormat time axis adapts its tick labels based on date granularity. Data loads asynchronously via d3.csv from a remote gist.

RRajat Dangat

89% match

Loading thumbnail…

Line Chart with label V2

This line chart displays Google stock prices (open, high, low, close, and volume) over time from March 2016 to March 2021, using data loaded from a CSV via `d3.csv`. Built with React and d3.v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and a `line` generator with `curveStep` to render the closing price trajectory. A crosshair cursor with `bisector` and `xScale.invert` enables interactive tooltips showing detailed values for each date.

RRajat Dangat

82% match

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart tracking the daily closing price of Google stock over time. The visualization uses a smooth natural curve to connect price points, with circular markers at each data value and interactive tooltips that display the date when hovered. Built with React and D3 v5, the chart renders as SVG and uses `scaleTime` and `scaleLinear` for axes, while `d3.line` with `curveNatural` generates the path. Data is loaded from a CSV file via `d3.csv` and styled with a teal color scheme and Poppins font.

Nnghosh319

82% match

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

79% match

Loading thumbnail…

Multiple Line Chart with ToolTip

This example presents a multiple line chart that tracks sales quantity, total revenue, and total profit across four daily time periods (morning, noon, evening, late night). It uses React with D3 v4 to render an SVG visualization where each metric is drawn as a separate colored line. A hover interaction with an overlay rectangle and a vertical dashed line enables tooltips, displaying precise values for each data point at the cursor position. The chart uses d3.axisBottom and d3.axisLeft for scales, plus d3.bisect for date lookup, with data embedded directly in the JavaScript.

Wwusushi

78% 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

78% 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

78% match

Loading thumbnail…

Simple tooltips in v4

This example shows a simple line chart of stock closing prices over time, with interactive tooltips that appear when the user hovers over each data point. The tooltip displays the formatted date and closing value near the cursor. Built with d3.js v4, it uses `d3.timeParse` and `d3.scaleTime` for the date axis, `d3.line` to draw the path, and mouseover/mouseout events to animate the tooltip's opacity via `transition`. Data comes from a CSV file and is rendered as SVG circles and axes.

Dd3noob

76% match