Selecting a Year on a Line Chart

100%

Selecting a Year on a Line Chart

✓ Published1🌍 Public

Last edited Jul 17, 2019

Created on Jul 15, 2019

Forked from Selecting a Year on a Line Chart

This interactive line chart displays global population trends across regions from 1950 to 2100, with a vertical marker indicating the currently selected year. Users hover over the chart to update the marker and select a new year. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `nest`, and `line` with `curveBasis`, rendering in SVG. Data comes from UN population estimates and medium-variant projections, processed via CSV loading and a custom melt function.

AI-generated description

MIT Licensed

Similar vizzes

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

96% 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

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 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 visualization shows global population trends by region from 1950 to 2100 as a multi-line chart. Users can hover over the chart to select a specific year, which triggers a vertical guide line and updates the highlighted data point. The implementation uses D3 v5 with SVG rendering, leveraging `d3.nest` for data aggregation and `d3.scaleTime` for the time axis. Population data comes from UN estimates and medium-variant projections, processed through a custom melt function, while the interactive year selection relies on mouse events and `d3.mouse` positioning.

TThomas Seberechts

94% 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.

家家兴

94% match

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

94% match

Loading thumbnail…

Selecting a Year on a Line

This line chart visualizes global population trends by region from 1950 to 2100 using UN population data. A black vertical line marks the currently selected year, and hovering over the chart updates the selection to the nearest year, shifting the line accordingly. The visualization uses d3’s `scaleTime` and `scaleLinear` axes, a `line` generator with `curveBasis` for smoothing, and a color legend built with `scaleOrdinal` and `schemeCategory10`.

MMunTatt Yap

94% match