Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Selecting a Year on a Line Chart

✓ Published1🌍 Public
Cchandanagandla
Last edited Apr 8, 2023
Created on Apr 8, 2023

This interactive line chart shows United Nations population estimates and projections for world regions from 1950 to 2100. Users can move the mouse across the chart to select a year, triggering a vertical line to update and re-render the visualization. Built with D3 v5, the code uses `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothed paths, and scales like `scaleTime` and `scaleLinear`. The data is loaded from two CSV files via `d3.csv` and processed with custom melting logic.

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

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…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays global population trends over time for different regions, with lines colored by region and a vertical black line marking the currently selected year. Users can move the mouse across the chart to change the selected year, which updates the line position and triggers a re-render. The visualization uses d3 v5, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to draw the axes and paths, with `nest` and `schemeCategory10` for grouping and coloring regions. Data is loaded from UN population estimates CSV files, processed by melting year columns into rows, and rendered using SVG with a custom line chart component that handles the mouse interaction via `on('mousemove')`.

Cchandanagandla
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, sourced from UN dataset CSVs. Users hover over the chart to move a vertical line selecting a specific year, which updates the visualization's focus. The d3.v5 code uses scales (`scaleTime`, `scaleLinear`), a line generator with `curveBasis`, and axes, while a custom color legend maps region names via `scaleOrdinal`. The SVG rendering includes blended stroke paths, an interactive mouse-interceptor rectangle, and a responsive update loop triggered by year selection.

AAharon E. V. Zúñiga
92% 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
91% match
Loading thumbnail…

Fork of 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.

Hhoanganh97bkhn
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 displays population trends over time for multiple world regions, using a line chart where each colored line represents a different region. Users can hover over the chart to select a specific year, which is marked by a vertical line and updates the visualization accordingly. The implementation uses D3 v5 with SVG rendering, employing scales like `scaleTime` and `scaleLinear`, the `line` generator with `curveBasis`, and a `nest` operation to group data by region. Data comes from UN population estimates and medium variant projections, processed with the `csv` loader.

Vvivianaaai@qq.com
90% match