Selecting a Year on a Line Chart

100%

Selecting a Year on a Line Chart

✓ Published1🌍 Public

Last edited Apr 9, 2020

Created on Apr 9, 2020

Forked from Selecting a Year on a Line Chart

This line chart displays population trends over time for global regions, using United Nations population estimates from 1950 to 2100. A movable vertical line marks the currently selected year, and moving the mouse across the chart updates the selection to the nearest year, re-rendering the visualization. The chart uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by region. A separate color legend identifies each region, with SVG rendering and d3.mouse handling for interaction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time for global regions, with a mouse-driven vertical line denoting the currently selected year. Moving the cursor across the chart dynamically updates the blue selection line, highlighting population values at that moment. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data, `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom `colorLegend` module for categorical color encoding. Data comes from UN population estimates and medium-variant projections, spanning 1950 to 2100.

CCurran Kelleher

96% match

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

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart shows population estimates and projections over time for global regions from 1950 to 2100. A vertical black line marks the currently selected year, which changes dynamically as the user moves the mouse across the chart. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.mouse to detect hover position, triggering a re-render with the new year. Data comes from UN population estimates and medium-variant projections, rendered as SVG with a categorical color legend.

RRajib Kumar Chanda

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive visualization displays UN population estimates and projections by global region from 1950 to 2100 as a multi-line chart, with color-coded lines sorted by final population. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart, triggering a re-render that highlights the selected position. The implementation uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by region, and d3.line with curveBasis for smooth paths. A custom colorLegend component renders the categorical d3.schemeCategory10 scale, while the mouse interceptor uses d3.mouse to detect cursor position and update the selection.

AAnne Kerr

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes global population trends by region, allowing users to explore temporal changes. A vertical line indicates the currently selected year, and users can move their mouse across the chart to update this selection. The visualization uses D3 v5 to render SVG elements, employing scales, axes, and line generators to plot the data. Population data originates from UN estimates and medium-variant projections covering 1950 to 2100.

NNikola Rožić

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays global population trends by region from 1950 to 2100, using data from United Nations population estimates. A vertical line highlights the currently selected year, and hovering over the chart updates the selection to the nearest year. The visualization builds on d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and d3.line for rendering SVG paths, with a custom d3.colorLegend for the categorical color scale. The selected year is stored in a state variable and triggers a re-render on change.

家家兴

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move their mouse across the chart to update the selection, which re-renders the visualization and adjusts the year indicator. The visualization uses d3.csv to load UN population estimates, d3.nest to group data by region, and d3.line with curveBasis to draw the smoothed paths. A d3.axisBottom and d3.axisLeft provide the axes, while an SVG rect with a mousemove handler captures pointer position and applies d3.mouse to invert the x-scale and determine the hovered year.

Ggcappadaniel

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes projected global population by region from 1950 to 2100, using UN population estimates and medium-variant projections. A vertical black line marks a selected year, and moving the mouse across the chart updates the selection, re-rendering the visualization. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, with SVG rendering and a color legend. Data is loaded via d3.csv from two datasets and processed through a custom melt function.

Ggabcoderboi

95% match