Skip to main content
SimilarExport ZIP
100%

?

✓ Published0🌍 Public
VVvgupta
Last edited Mar 13, 2020
Created on Mar 13, 2020

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.

AI-generated description

reference https://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3

MIT 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…

Selecting a Year on a Line Chart

This visualization displays population trends over time for various world regions using a line chart, rendered with SVG. Users can hover over the chart to select a specific year, which updates a vertical black line to mark that point in time. Built with D3 v5, the code utilizes `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for axes, `line` with `curveBasis` for the paths, and `nest` to group data by region. The color legend is created using `scaleOrdinal` with `schemeCategory10`. Data comes from UN population estimates.

NNikola Rožić
81% match
Loading thumbnail…

Selecting a year on a line chart

This line chart shows population growth over time for multiple regions, with a vertical line marking a selected year. Users can move the mouse across the chart to select a different year, which updates the line’s position. The visualization uses D3 v5 to render SVG elements, including axes, line paths with a curve basis, and a color legend. Population data is sourced from UN estimates and medium-variant projections, processed from CSV files. The chart includes interactive mouse events and uses D3’s `scaleTime` and `scaleLinear` for axes.

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

Line Chart

This example shows world population trends as a line chart, plotting year on the x-axis against percentage on the y-axis. The chart uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes and `line` to generate the path. Data is loaded from a CSV file via `csv`, with axes labeled and styled using `axisBottom`, `axisLeft`, and CSS. The line is drawn with a pink stroke, and the chart includes a title and axis labels.

TTejaswicmandava
80% match
Loading thumbnail…

Untitled

This example displays a world population area chart over time, using a maroon filled path with a smooth curve to emphasize the data’s upward trend. The SVG rendering relies on D3 v5’s `area`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with data loaded from a CSV file. The y-axis labels are formatted in billions, and the x-axis labels are rotated vertically for readability, alongside custom tick grids and a descriptive title.

AAbishek-Dulal
80% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time by region, with a movable vertical line that updates the selected year on hover. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render smooth paths from UN population estimates and medium-variant projections (1950–2100). A d3.ordinal color scale distinguishes regions via a legend, while mouse events trigger year selection through d3.mouse and axis inversion. SVG rendering handles all elements, including gridlines, labeled axes, and an interactive overlay rect.

AAmmar Ehab
80% match
Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera
79% match