Skip to main content
100%

Line Chart with Circle Tooltip D3 V4

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Jul 13, 2018
Created on Jul 10, 2018

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.

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:

forked from <a href='http://bl.ocks.org/alandunning/'>alandunning</a>'s block: <a href='http://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3'>Line Chart with Circle Tooltip D3 V4</a>

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
83% 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
79% 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
76% match
Loading thumbnail…

d3 mouseover multi-line chart

This interactive multi-line chart displays temperature data for New York, San Francisco, and Austin over time, using a time-scaled x-axis and linear y-axis. The visualization renders three colored lines with a legend and city labels, using SVG paths generated by `d3.svg.line` with basis interpolation. A black vertical guide line follows the mouse across the chart, with the code also setting up per-line mouseover effects to highlight individual data series. The data is parsed from a tab-separated string using `d3.tsv.parse`, with scales and axes built via d3.time.scale, d3.scale.linear, and d3.svg.axis.

ZZoeLeBlanc
74% match
Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs
73% match
Loading thumbnail…

Line Chart

This line chart visualizes world population over time by region, with each region drawn as a distinct colored line on an SVG canvas. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curveBasis, and `d3.nest` to group data. Population estimates from 1950–2014 and medium-variant projections from 2015–2100 come from UN datasets loaded via `d3.csv`. A color legend using `d3.scaleOrdinal` maps regions, and a vertical line marks the year 2021, with mouse interaction logging hovered years to the console.

BBKirst3
73% match
Loading thumbnail…

D3 Example

This interactive visualization displays global cities with populations over 100,000 as circles on a world map. Using SVG rendering within a Vue application, each city is represented by a circle whose area corresponds to population, with one filled pixel per 50,000 people. Overlapping city circles create brighter regions, visually encoding population density. Users can pan and zoom to explore, and hovering reveals a tooltip with the city name and population via d3-tip. The visualization supports scroll-wheel zooming and drag-based panning, with data sourced from GeoNames.

CCurran Kelleher
73% match
Loading thumbnail…

linechart

This line chart visualizes world population trends from 2010 to 2020, with time on the x-axis and population count on the y-axis. The chart is rendered as an SVG using D3 v5, with the line path styled in violet and grid lines in green. The code imports components like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, and parses CSV data from a GitHub gist. Data values are formatted and axis labels are customized through D3’s `axis` and `text` APIs.

Vvaddepallinaveen
73% match