D3 multi-series line chart with tooltips and legend

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

81% match

Multi-links in tooltips using v4

This example shows a line chart of stock closing prices over time, where each data point is a circle that reveals a tooltip on mouseover. The tooltip displays the formatted date and price, and the date itself is wrapped in a hyperlink that points to a different URL from the CSV data. The visualization is built with D3 v4, using SVG for rendering and transitions for tooltip opacity. Data is loaded from a CSV file with `d3.csv`, dates are parsed with `d3.timeParse`, and the axes are generated with `d3.axisBottom` and `d3.axisLeft`.

81% match

HTML Starter

This visualization demonstrates multi-axis line charts with interactive selection and tooltips, allowing users to compare multiple data series across weeks. The chart renders a per-rectangle interaction area that highlights all chart lines associated with a given week on hover, displaying a tooltip with each series name and value. The code uses D3.js v5 with SVG’s `select`, `attr`, and `style` APIs to build the chart, and custom selection rectangles trigger mouseover and mouseout events to control tooltip visibility. The data is loaded from a CSV file containing numerical values for nine columns (A–I). Animation is present in the rendering of the chart layout.

TTaustus

81% match

Untitled

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

CCrossZeigler

80% match

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.

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

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.

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.