Fork of Selecting a Year on a Line Chart

100%

Fork of Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited Feb 23, 2021

Created on Feb 22, 2021

Forked from Selecting a Year on a Line Chart

A multi-line chart displays United Nations population estimates and projections by region from 1950 to 2100, with a vertical line marking the currently selected year. Mousing over the chart updates the line’s position, using the d3.mouse event and xScale.invert to set the selected year. The visualization renders in SVG with d3.line, curveBasis, and ordinal color scales, while a color legend lists each region. Data comes from two CSV files concatenated after melting wide-format rows into tidy year–population pairs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays United Nations population projections from 1950 to 2100, with each line representing a world region. Users can hover over the chart to select a year, triggering a vertical marker that updates the display. The visualization uses d3.line with curveBasis, d3.nest for data grouping, and d3.scaleOrdinal with schemeCategory10 for color encoding. A custom d3.scaleTime handles the year axis, while event listeners on a transparent rectangle detect mouse movement to update the selected year and re-render the SVG.

Aannadehtiarova

94% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart Rogery

A multi-line chart visualizes United Nations population estimates and projections from 1950 to 2100, grouped by world region with a color legend. A draggable vertical line marks a selected year, and moving the mouse over the chart updates that selection and re-renders the visualization. The code uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.axisBottom/axisLeft, rendering SVG paths and circles.

RRogery Vargas

93% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population estimates by region from 1950 to 2100, sourced from UN population data. Users can hover over the chart to select a specific year, which updates a vertical line marker and re-orders the color-coded legend. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, d3.nest, and d3.mouse to handle interactions. A color legend built with custom D3 code lists regions using d3.scaleOrdinal and d3.schemeCategory10, while axes and labels are rendered as SVG elements.

IIsigned

92% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population estimates and projections for world regions from 1950 to 2100. Users can hover over the chart to select a specific year, which draws a vertical black line and updates the selected year used for sorting the color-coded legend. The visualization uses d3.line with curveBasis for smoothed paths, d3.scaleTime and d3.scaleLinear for axes, and a d3.mouse event handler to trigger year selection. Data comes from UN population estimates loaded via d3.csv.

Aabhimanyu-dhar

92% match

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes UN population estimates and projections by region from 1950 to 2100, with a vertical line marking a selected year. A clickable mouse-interceptor rectangle lets users hover to update the selected year via `setSelectedYear`, which re-renders the chart. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, rendering as SVG with an ordinal color scale legend. Data comes from two CSV files loaded with d3.csv, combining estimates and medium-variant projections.

Kkbriggs1

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

91% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time for various world regions, with a vertical line marking a selected year, which users can adjust by moving the mouse across the chart. Using D3 v5, the visualization employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `axisBottom` and `axisLeft` for axes, and `line` with `curveBasis` for smooth paths. Data is loaded from UN population estimate CSV files. The SVG rendering updates dynamically through a selection state, and a separate color legend uses `scaleOrdinal` with a category 10 scheme to identify regions.

Jjudeluka

91% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This visualization shows population trends over time for world regions, with a vertical line marking a selected year that updates on mouse movement. Users can compare regional curves colored via an ordinal scale, with the selected year’s position recalculated using d3.scaleTime inversion. The chart is rendered in SVG using d3.line with basis curves, and incorporates a nested data structure from UN population estimates and medium variant projections. A color legend and axis labels supplement the interactive line chart.

Ssandeshplanner

91% match