Skip to main content
100%

Line Chart with Circle Tooltip D3 V4

✓ Published0🌍 Public
Aalandunning
Last edited Oct 19, 2016
Created on Sep 22, 2016

This line chart displays yearly population values from a JSON file, with a circle tooltip that follows the mouse to reveal the exact value at each data point. Built with D3 v4 and rendered as SVG, the chart uses `d3.json` to load data, `d3.timeParse` and `d3.scaleTime` for the x-axis, and `d3.line` to draw the line. A bisector and `d3.mouse` handle the interactive tooltip, which includes hover lines and a formatted y-axis showing values in thousands.

AI-generated description

This chart is based on <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3883245'>Line Chart</a>

it uses a json file storing year values and population values. The chart employs conventional margins and a number of D3 features:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Circle Tooltip D3 V4

This line chart visualizes yearly population values from a JSON dataset, with a focus circle and crosshairs that track the mouse to reveal the nearest data point. Built with D3 v4, it uses SVG rendering and employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.line` for the path, and `d3.bisector` for efficient mouseover lookup. The y-axis labels are formatted in thousands with a "k" suffix, and the chart follows conventional margins.

AAnanda90
94% match
Loading thumbnail…

?

This example shows a line chart of population values from 2005 to 2015, drawn as an SVG path using D3 v4’s `d3.line` and `d3.scaleTime`/`d3.scaleLinear` scales. The data is loaded from `data.json` with `d3.json` and parsed via `d3.timeParse`. A hover interaction uses a transparent overlay rectangle, `d3.mouse`, and `d3.bisector` to find the nearest year, then updates a focus circle, dashed hover lines, and a value label via direct SVG attribute manipulation. The y-axis labels are formatted in thousands with a custom tick format.

VVvgupta
83% match
Loading thumbnail…

Line Chart with Circle Tooltip D3 V4

This line chart displays population values for two cities, Charlottesville and New Haven, from 2005 to 2015, loaded from a JSON file. Built with D3 v4 and rendered as SVG, it uses d3.timeParse and d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to draw the population trends. A circle tooltip appears on mouseover, with dashed hover lines, using d3.bisector to find the nearest data point. The y-axis tick labels are formatted in thousands with a "k" suffix.

ZZoeLeBlanc
83% match
Loading thumbnail…

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
80% match
Loading thumbnail…

interactive line chart

An interactive line chart displays monthly values from a small dataset, with pink circular markers for each data point and a black polyline connecting them. Hovering over a circle highlights it in red, reveals its value in a tooltip, and draws a dashed vertical line from the point to the x-axis. The visualization uses D3 v4 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `transition.style` for the hover effects. Data is loaded from a JSON file and rendered as SVG, with axis labels shown at the bottom.

Aalicemontel
79% match
Loading thumbnail…

Tooltip on a Multi-line Chart - I

A multi-line chart displays state population changes over time, with each line color-coded per state. A vertical guide line and tooltip appear on mousemove, showing the year and ranked populations. The tooltip sorts states by population for that year and lists them with values. Built with D3 v4, it uses `d3.scaleLinear`, `d3.line`, SVG paths, and a transparent overlay rect to capture mouse events.

Aandrewcowley
78% match
Loading thumbnail…

interactive line chart from dataset

This interactive line chart visualizes a time series of monthly values from a small JSON dataset, plotting seven data points with circles connected by a black line. Hovering over a circle highlights it in red, reveals a dashed vertical guideline from the point to the baseline, and displays the exact value as text. The chart uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` for date handling. Mouseover and mouseout events control opacity for the guide lines and value labels.

Aalicemontel
78% match
Loading thumbnail…

interactive line chart

This interactive line chart displays a time series of values over twelve months, with a circular marker at each data point. Hovering over a circle highlights it in red and reveals a tooltip showing the exact value, along with a dashed vertical line connecting the point to the x-axis. The visualization uses D3 v4 with an SVG canvas, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`. It loads external CSV data from a gist, parses dates with `d3.timeParse`, and animates the hover transitions with `transition().duration()`.

Aalicemontel
78% match