"The Human Timeline: Key Events in Climate History"

100%

"The Human Timeline: Key Events in Climate History"

✓ Published1🌍 Public

Last edited Apr 4, 2025

Created on Apr 4, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

78% match

Loading thumbnail…

co2_temp_sealevel_scatter

This animated scatter plot visualizes the chain reaction between cumulative CO₂ emissions, temperature anomaly, and sea-level rise. Each circle represents a year, positioned by CO₂ emissions on the x-axis and temperature anomaly on the y-axis, with bubble size and color encoding sea-level rise. A tooltip reveals exact year, CO₂, temperature, and sea-level values on hover. The animation progressively reveals data year by year, with circles transitioning from the origin to their final positions using D3's `transition()` API. The visualization uses `d3.csv` to load the Gist-hosted dataset, and SVG circles with `d3.scaleLinear` and `d3.scaleSequential` for scaling and coloring.

Ssirigayatri16@gmail.com

74% match

Loading thumbnail…

CO₂ vs Temp Trail Chart (Static Line Paths)

A static line chart traces each of ten countries’ CO₂ emissions against temperature anomaly over time, while animated dots and a year label play through the timeline. The visualization uses d3.csv, d3.scaleLinear, d3.line, and d3.schemeTableau10 to render SVG paths and circles, with d3.axisBottom and d3.axisLeft for axes. Animated dots update their positions each year via d3’s selection and transition methods, showing how each nation’s climate trail evolves. The data comes from a GitHub Gist, and the rendering uses SVG with CSS styling for opacity and stroke width.

Ssirigayatri16@gmail.com

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

72% match

Loading thumbnail…

Climate Change

This visualization presents an interactive climate change dashboard blending a world map with a scatterplot of global average temperatures since 2000. The map uses data from a GeoJSON file, while temperature records come from an Our World in Data dataset. The plot encodes each year as a circle, with its horizontal position scaled by year and vertical position by temperature, colored by value. An input panel offers a mock linear prediction of future temperatures. The implementation relies on D3 v7 projections like `d3.geoNaturalEarth1` and `d3.geoPath`, alongside `d3.select`, `d3.json`, and `d3.csv`.

SSai Sandhya Nannapaneni

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

71% match

Loading thumbnail…

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion

71% match