Selecting a Year on a Line Chart

100%

Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Mar 5, 2020

Forked from Selecting a Year on a Line Chart

A line chart displays population estimates and projections for world regions from 1950 to 2100, sourced from UN population data. Moving the mouse across the chart updates a vertical black line marking the selected year, with each region’s line colored via a categorical scale. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data, while mouse interaction relies on `mouse` and `xScale.invert`. A custom `colorLegend` component renders the color key.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a year on a line chart

This line chart visualizes population estimates and projections for world regions from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical line marks the currently selected year, and moving the mouse across the chart updates this selection, with the year recomputed from the mouse position via the x-scale’s inverse mapping. The chart is built with D3 v5, using SVG rendering, scales, axes, and a basis-curve line generator, while a custom legend assigns colors to regions through a categorical ordinal scale.

MMatthiasVanCampen

95% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows UN population estimates and projections from 1950 to 2100 for world regions as multi-line charts, with a movable vertical line that selects a year. Moving the mouse across the chart updates the selected year, which is rendered as a black vertical line. The chart uses D3 v5 with SVG rendering, employing `d3.line` with `curveBasis` for smooth paths, `d3.nest` to group data by region, and `d3.scaleTime` and `d3.scaleLinear` for axes. A custom color legend maps regions using `d3.scaleOrdinal` with `schemeCategory10`.

Kkbriggs1

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

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 Line Chart

A line chart shows population change from 1950 to 2100 across world regions, with a vertical black line marking a user-selected year. Clicking or dragging on the chart updates the line position, and hovering triggers the same interaction. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, and `nest`, plus a custom `colorLegend`. Data comes from UN population estimates and medium variant projections, loaded via D3's `csv` function and processed with `melt` to reshape the data into tidy format.

KKazushige Okuma

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

94% match

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart shows UN population estimates and projections from 1950 to 2100 for world regions, with a vertical black line marking the currently selected year. Users can hover anywhere on the chart to update the selected year, which is highlighted by the line. The visualization uses D3 v5 with d3.nest() to group data by region, d3.scaleTime() and d3.scaleLinear() for axes, and SVG line paths with a curveBasis interpolation. A color legend and axis labels are also rendered, with data loaded from two CSV files.

Ffbudwill

94% match