Skip to main content
SimilarExport ZIP
100%

Selecting a Year on a Line Chart with D3.js!

✓ Published0🌍 Public
Fforcox43
Last edited Jul 22, 2020
Created on Jul 22, 2020

This example presents a line chart of global population estimates from 1950 to 2100, with lines colored by region. A vertical black line marks the selected year, and moving the mouse over the chart updates this line to the nearest year. The visualization is built with D3.js (v5) using the `select` API, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generators, with data loaded from CSV files. The line chart and color legend are implemented as reusable components (using `selection.enter` and `merge`) within a React framework, rendering to SVG.

AI-generated description

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays global population trends by region from 1950 to 2100, with a draggable mouse interaction that updates a selected year to highlight a specific time point. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to organize data, while a custom `lineChart` module renders SVG paths with `d3.line` and `curveBasis`. A brush-like `rect` element captures `mousemove` events to invert the x-scale and trigger year selection. Data comes from UN population estimates, with a color legend built via a reusable `colorLegend` function.

RRyan Malone
91% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays global population trends for regions from 1950 to 2100, with a movable vertical line that lets the user select a specific year. The chart highlights population values for that chosen year via circles on each regional line, with a color legend identifying each region. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. Data comes from UN population estimates and medium variant projections, loaded via `csv` and processed through `nest` and `melt` functions. Hover interactions are handled by the `mouse` callback on an invisible rectangle.

FflexKeks
91% match
Loading thumbnail…

Selecting a year of a line chart

This interactive line chart visualizes population estimates for global regions from 1950 to 2100, combining data from two UN CSV files. A vertical black line marks the currently selected year, which updates when the user hovers over the plot area, prompting a re-render through a state-setting callback. The visualization uses D3.js v5 to scale time and linear axes, render multi-line paths with a basis curve, and display a categorical color legend. The SVG output includes axis tick marks, labels, and a title, all styled via CSS.

YYedrup
90% match
Loading thumbnail…

Selecting a Year on a Line Chart

This visualization displays population trends over time for global regions, with a vertical line marking the currently selected year. Users can hover over the chart to change the selection, which updates the highlighted year. The chart uses D3 v5 with SVG rendering, employing scales like `scaleTime` and `scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. Data comes from UN population estimates and medium variant projections, processed via `d3.csv` and `d3.nest`. A custom color legend shows region names, and the selection uses mouse events to update the year.

FflexKeks
90% match
Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move the mouse across the chart to select a different year, updating the line’s position. The line chart uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveBasis for rendering, while d3.nest groups data by region. A d3.Ordinal scale with schemeCategory10 colors each line, and a custom colorLegend component displays the categories. Data comes from UN population estimates and medium variant projections, processed with d3.csv and d3.timeParse.

Jjeelong
90% match
Loading thumbnail…

Selecting a year on a line chart

This interactive line chart shows how population changes over time across world regions, with a vertical line marking the currently selected year. Users move the mouse over the chart to change the selection, which updates the line in real time. The chart is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line` for the sparklines, and a `mouse` event on a transparent rectangle to capture the cursor position. The color legend is generated with `colorLegend`, and the data comes from UN population estimates.

BB Sundaresan
90% match
Loading thumbnail…

Selecting a Year on a Line Chart

The visualization displays population over time for world regions with selectable year brackets, showing trajectories from 1950 through 2100 using a line chart with a color-coded legend. A vertical guide line appears at the selected year, and users can update the selection by mousing over the chart, which triggers the `setSelectedYear` callback. The code uses D3 v5’s `nest` for data grouping, `scaleTime` and `scaleLinear` for axes, `curveBasis` for line smoothing, and SVG rendering with data from UN population estimates.

HHasideluxe
90% match
Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays population trends over time for global regions, with a draggable vertical line enabling year selection. The chart updates dynamically as users hover, highlighting the selected year across all series. Built with D3 v5, it uses `nest()` for data grouping, `scaleTime` and `scaleLinear` for axes, and `line()` with `curveBasis` for smooth paths. Data comes from UN population estimates (1950-2100), with a color legend and axis labels rendered as SVG elements.

Ssingularity6033
90% match