Fork of Fork of Fork of Selecting a Year on a Line Chart

100%

Fork of Fork of Fork of Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

Forked from Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This fork of a line chart example uses d3.v5 to visualize vaccination data over time, with a vertical line marking a selected year. Users can hover over the chart to update the selected year via a mouse interceptor that inverts the x-scale, and a d3.ordinal color scale distinguishes regions. The visualization is rendered with SVG, axes, and line paths using d3.line and curveBasis, with data processed from CSV files.

GGerasimos Katsagannis

87% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays heart disease data across age categories as a smooth, stylized line chart. The curve is drawn using d3.line with curveNatural, connecting data points from the Data Canvas Sense Your City dataset. The React-based implementation uses d3.scaleTime and d3.scaleLinear for axes, with a Poppins font and blue stroke styling. Tooltip circles are commented out, leaving only the line visible in the SVG rendering.

Cchandanagandla

85% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

A fork of the "Selecting a Year on a Line Chart" example visualizes regional population changes over time from UN estimates and medium-variant projections. It displays multiple smoothed line paths, colored by region via `d3.scaleOrdinal` and `d3.schemeCategory10`, with a vertical black line marking a selected year. Users can drag the mouse over the chart to update the year, triggering a re-render that snaps the line to that date using `d3.mouse` and `d3.scaleTime.invert`. The SVG rendering uses d3.v5 and modular functions like `lineChart` and `colorLegend` for axes and legends.

DDonald Bagwell

82% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This visualization shows regional population trends over time as multi-line chart, with a vertical line marking the currently selected year. Moving the mouse across the chart updates the selected year, and a legend identifies each region's color. The code uses D3 v5 APIs including `d3.nest`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.line` with `curveBasis`, while the interactive year selection relies on `d3.mouse` and `scaleTime.invert`. Data comes from UN population estimates and medium variant projections, rendered as SVG elements.

Nnayd

82% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time by region, using data from UN population estimates. A vertical black line marks the currently selected year, and users can hover over the chart to update this selection, which the visualization updates in real time. The D3 code organizes regions by color using `d3.scaleOrdinal` and `d3.schemeCategory10`, draws the lines with `d3.line` and `d3.curveBasis`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. A custom legend component maps colors to region names, and the data is loaded from CSV files.

Rrajeshathakur

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

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

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

80% match