Selecting a Year on a line chart

100%

Selecting a Year on a line chart

✓ Published1🌍 Public

Last edited Feb 16, 2021

Created on Feb 14, 2021

Forked from Q4

This example shows a multi-line chart tracking earthquake counts across four U.S. regions (Midwest, Northeast, South, and West) from 2010 to 2015. The code uses D3 v5 with SVG rendering and animation, loading data from a CSV file via `d3.csv`. It employs `d3.nest()` to aggregate counts by year and region, then draws separate colored lines using `d3.line()` and `d3.scaleTime()`/`d3.scaleLinear()`. A legend and axis labels are added, with the visualization built using the margin convention and React as the framework.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart compares the frequency of earthquakes across four U.S. regions from 2011 to 2015, using data from a CSV file that includes state, region, year, and count. The visualization uses D3 v5 with `nest()` and `rollup()` to aggregate counts by region and year, then draws smoothed lines with `line()` and `curveBasis` to show trends. Color-coded circles mark yearly data points, and a custom `colorLegend` function displays the regional color key. The chart is rendered as SVG with axes from `axisLeft` and `axisBottom`, and includes interactive hover effects on the points.

HHalian Vilela

85% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the number of earthquakes recorded in four U.S. regions—West, South, Midwest, and Northeast—from 2011 to 2015. Each line represents a region, with points plotted per year using `d3.scaleTime` and `d3.scaleLinear` for axes. Hovering over a point triggers a second SVG bar chart showing earthquake counts by state for that region and year. The visualization uses D3 v5, SVG rendering, and data from the state-year-earthquakes.csv file.

Aandrewtran1991

85% match

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a multi-line chart of population over time for world regions, with an interactive vertical line that lets users select a specific year. Moving the mouse across the chart updates the selected year, demonstrating how user input can drive state changes in a visualization. The code uses d3.nest to group data, d3.scaleTime and d3.scaleLinear for axes, and a custom colorLegend function with d3.scaleOrdinal. It loads UN population estimates from CSVs and renders the chart as SVG with d3.line and curveBasis.

Ppplomith

83% match

Loading thumbnail…

Selecting a Year on a Line Chart

A line chart displays population over time for multiple regions, with a vertical line marking a selected year. Users can hover anywhere on the chart to update the selection, which triggers a re-render of the visualization. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw the chart, while a `mouse` event on a transparent `rect` calls `setSelectedYear` to change the year. The data comes from UN population estimates and medium-variant projections, loaded via `csv` and processed with `nest`, `descending`, and a custom `melt` function. The rendering is SVG-based, with a color legend created by `colorLegend` and axes styled via CSS.

PPhilRG

83% match

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows population trends over time by region, with a vertical line marking the currently selected year. Moving the mouse along the chart updates the selection and redraws the visualization. The multi-line chart uses d3.line with curveBasis, while d3.nest groups data by region and d3.scaleOrdinal assigns colors. A legend, built with custom SVG code, displays color mappings. The data comes from UN population estimates processed in loadAndProcessData.js, combining medium variant projections for 2015-2100 with historical estimates.

Eedxiao97

83% match

Loading thumbnail…

Selecting a Year on a Line Chart with D3.js!

This example presents a line chart of global population estimates from 1950 to 2100, with lines colored by region. A vertical black line marks the selected year, and moving the mouse over the chart updates this line to the nearest year. The visualization is built with D3.js (v5) using the `select` API, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generators, with data loaded from CSV files. The line chart and color legend are implemented as reusable components (using `selection.enter` and `merge`) within a React framework, rendering to SVG.

Fforcox43

83% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move the mouse across the chart to select a different year, updating the line’s position. The line chart uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveBasis for rendering, while d3.nest groups data by region. A d3.Ordinal scale with schemeCategory10 colors each line, and a custom colorLegend component displays the categories. Data comes from UN population estimates and medium variant projections, processed with d3.csv and d3.timeParse.

Jjeelong

83% match

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time for world regions, using a vertical grey line to highlight a selected year (2021). The chart is rendered with SVG, and the code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest to group data by region. A transparent rectangle covers the plot area, and its mousemove event uses d3.mouse and xScale.invert to log the year under the cursor. Data comes from the UN population estimates and medium variant CSV datasets, processed with d3.csv and d3.timeParse.

BBKirst3

82% match