Fork of "The Human Timeline: Key Events in Climate History"

100%

Fork of "The Human Timeline: Key Events in Climate History"

✓ Published0🌍 Public

Last edited Apr 6, 2025

Created on Apr 6, 2025

Forked from "The Human Timeline: Key Events in Climate History"

This visualization presents a timeline of key climate indicators—CO₂ levels, temperature anomaly, and sea-level rise—from 1880 to the present. Three smoothed normalized line series show each metric’s trend, marked with color-coded endpoint labels and vertical annotations for major climate agreements. Built with D3 v7, the SVG chart uses `d3.scaleTime`, `d3.line` with `curveMonotoneX`, and CSV data from a public GitHub dataset. Interactive tooltips powered by `d3.bisector` display exact yearly values as users hover across the chart.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

"The Human Timeline: Key Events in Climate History"

This visualization overlays three climate indicators—CO₂ levels, temperature anomaly, and sea level rise—on a shared timeline from 1993 to 2021, using d3.line to draw normalized paths. Red dashed annotations mark the Kyoto Protocol, Paris Agreement, and COP26. An animated stroke-dashoffset transition draws each line sequentially upon load, while a tooltip with d3.bisector and d3.pointer reveals exact values on hover. Data comes from merged_climate_data.csv, rendered as SVG with D3 v7 scales and axes.

Ssrisailapu.rc@gmail.com

89% match

Loading thumbnail…

CO2 Emissions Over Time

This interactive SVG chart visualizes three climate indicators—CO2 levels, temperature anomaly, and sea-level rise—over time from a remote CSV dataset. The chart uses a linear time axis on the x-axis and a single shared y-axis for all three metrics. Built with D3.js, the code loads the data via `d3.csv`, processes the parsed values, and renders axes using `scaleLinear`, `axisBottom`, and `axisLeft`. The visualization employs a common vertical scale to accommodate the differing ranges of the three variables, with axes and ticks formatted appropriately.

Ssrisailapu.rc@gmail.com

80% match

Loading thumbnail…

Fork of D3 Starter

This D3.js visualization displays three climate change metrics—CO₂ levels, temperature anomaly, and global mean sea level—as multi-line trends over time, using red, blue, and green strokes to distinguish each series. It employs dual y-axes, with temperature and sea level sharing a left scale while CO₂ uses a right scale, rendered via `d3.line` path generators. The SVG output loads data from a remote CSV using `d3.csv`, converts numeric fields with unary plus operators, and applies `d3.scaleLinear` domains and `d3.axisBottom`/`d3.axisLeft`/`d3.axisRight` for tick marks. Axes are formatted with integer tick labels, and lines are drawn with a 2-pixel stroke width.

Ssrisailapu.rc@gmail.com

79% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes climate trends from 2010 to 2022 with a synthetic dataset of 156 monthly records. It combines sky-blue bars for rainfall on a left axis with tomato-colored temperature and green CO₂ lines on a right axis. The chart uses D3.js version 7, employing `d3.scaleTime` for the time axis, `d3.scaleLinear` for the dual quantitative scales, and `d3.line` for the path generation. `d3.select` appends SVG elements, while `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` render the axes.

Vveginetiumeshchandra@lbrce.ac.in

77% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive React and D3.js visualization displays global temperature anomalies from 1880 to 2023, comparing each year's deviation against the 1951-1980 baseline. The chart combines a dual-color area chart (red for warming, blue for cooling) with a trend line calculated via linear regression on data since 1980. Users can hover over data points for detailed tooltips and toggle climate event milestones, while summary statistics highlight the hottest and coldest years. Built with React 19, D3 v7, and NASA GISS data, the visualization uses `scaleLinear`, `area`, and `line` generators to render the animated data.

NNita

77% match

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter visualizes 156 months of synthetic climate data from 2010 to 2022, combining three variables in a single SVG chart. It shows rainfall as skyblue bars against the left axis, while temperature and CO₂ appear as tomato and green lines against the right axis. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.line to render the axes and paths. Data are generated in-browser with Math.sin, Math.cos, and Math.random.

Ssaiabhishekmunnangi@gmail.com

75% match

Loading thumbnail…

Global Climate Temperature Trends

This interactive visualization displays global temperature anomalies from 1880 to 2020, with data relative to the 20th-century average. Users can toggle between line and area chart views, adjust line smoothing with d3.curveLinear, curveMonotoneX, or curveBasis, and filter by decade through a button panel. Hover tooltips reveal year-specific values, while a statistics sidebar calculates trends, volatility, and range using linear regression. The visualization uses D3.js v7 scales and axes within a React framework, with data loaded from a CSV file.

NNita

74% match

Loading thumbnail…

Fork of Time line chart

This line chart visualizes temperature readings over time, with each data point marked by a circle and connected by a smooth natural curve. The visualization uses React components for rendering SVG elements, with D3 v5 functions like `scaleTime` and `scaleLinear` to map data to coordinates, and `curveNatural` to smooth the line. The chart includes labeled axes for time and temperature, with tick marks styled via CSS. The data is loaded from a CSV file of weekly San Francisco temperatures using D3's `csv` parser.

NNart Williamson

74% match