Skip to main content
SimilarExport ZIP
100%

Fork of Temperature: from ObservableHQ

✓ Published0🌍 Public
Ssagar.s.savant4@gmail.com
Last edited Feb 4, 2024
Created on Feb 4, 2024

This visualization shows monthly global temperature anomalies from 1880 onward, with individual data points colored by anomaly value using the BuRd color scheme. A horizontal rule marks the zero line, and a moving average line, computed via Plot.windowY(12), smooths the yearly pattern. The example uses Observable Plot for rendering and d3.csv to load the gistemp dataset, with d3.utcFormat handling year tick labels on the x-axis.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature: from ObservableHQ

The visualization displays monthly global temperature anomalies from 1880 onward as a dot plot, with a horizontal reference line at zero and a moving average line. The dots are colored using a blue-red scheme to encode anomaly values. Built with Observable Plot and D3, the code loads data from `gistemp.csv`, converts dates and values, and uses `Plot.plot`, `Plot.dot`, `Plot.lineY`, and `Plot.ruleY` to render the chart with labeled axes and grid lines.

SStefan Apostol
88% match
Loading thumbnail…

Observable Plot: Diverging Color Scatterplot

This example visualizes global surface temperature anomalies over time, with each dot representing a monthly observation. The diverging color scale (BuRd) maps positive and negative anomaly values to red and blue, respectively, while a ruleY marks the zero baseline. Built with Observable Plot, the chart dynamically sizes to its container and uses the `@curran/gistemp` dataset. The color legend is positioned in a dedicated margin area, and the y-axis labels the anomaly in degrees Fahrenheit with explicit positive/negative formatting.

CCurran Kelleher
82% match
Loading thumbnail…

Fork of Earth Surface Temperature HeatMap

This fork of the Earth Surface Temperature HeatMap visualizes monthly global temperature anomalies from 1753 to 2015, using a base temperature offset to display absolute values in Celsius. The SVG rendering employs D3 v5's `scaleTime`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to position cells by year and month, while a custom color legend maps temperature ranges to a blue-to-red palette. Interactive tooltips, powered by the d3-tip library, reveal exact temperature and variance data on hover, with data fetched from a GitHub-hosted JSON file.

DDonald Bagwell
79% match
Loading thumbnail…

Fork of Heat Map: Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, with each cell representing a month-year combination colored by temperature variance from a base of 8.66°C. The tooltip reveals exact temperature and variance values on hover. Built with D3 v5, it uses `scaleTime` for axes, `scaleOrdinal` for the color legend, and `d3-tip` for interactive tooltips. Data comes from the FreeCodeCamp global-temperature JSON, rendered as SVG rectangles with a custom color scale ranging from deep blue to dark red.

Sstanemurhula
77% match
Loading thumbnail…

Fork of Heat Map: Monthly Global Land-Surface Temperature

This fork of a FreeCodeCamp project renders a heat map of monthly global land-surface temperature anomalies from 1753 to 2015, with color encoding temperature values relative to a base of 8.66°C. Each cell represents a month-year combination, and hovering reveals a tooltip with the exact temperature and variance using the d3-tip library. The visualization uses d3.v5 with SVG rendering, fetching data from a remote JSON file, and implements custom color scales, time-based axes, and a color legend within a `d3.select`-driven SVG container.

JJesus Angel
75% match
Loading thumbnail…

Gist ddc6d50c313ebe6edb45519f43358c6c

The visualization displays monthly and seasonal global temperature anomalies from 1880 onward, using data from the `temperatures.csv` file. It builds a compact heatmap-style or sparkline-based grid, with each row representing a year and each cell showing the temperature deviation. The implementation uses D3.js to parse the CSV data and render the graphic, leveraging SVG or canvas primitives to represent the numeric values across the various time columns. The code processes the tabular data directly, mapping the values to visual elements through D3’s data-binding and layout functions.

Mmbostock
74% match
Loading thumbnail…

Fork of Radar Chart

This fork of a radar chart displays monthly average temperature anomalies for Massachusetts from 1895 to 1908. The visualization combines a focus chart with a context chart, allowing users to explore yearly patterns through a dropdown menu that selects specific years. The code uses React for the UI components, D3.js for data parsing and visualization, and d3.csv to load the Temperature.csv dataset. The chart renders temperature anomaly values across months, with an interactive menu providing year selection.

Kkratikashetty1102@gmail.com
73% match
Loading thumbnail…

fcc-d3-03

This example visualizes monthly global land-surface temperature anomalies from 1753 to 2015, using a heatmap of red rectangles over an SVG. It relies on React and D3 v7 (via `json`, `scaleLinear`, and `scaleBand`) to render axes, tooltips, and color opacity based on temperature variance. The data comes from the freeCodeCamp global-temperature JSON file. Hovering over a bar displays the year, month, actual temperature, and variance using a positioned tooltip.

SSiddharthMittal07
73% match