Fork of d3 time series heatmap

100%

Fork of d3 time series heatmap

✓ Published0🌍 Public

Last edited Mar 23, 2024

Created on Mar 23, 2024

This heatmap visualizes temperature variations across multiple locations over time, with each cell colored along a blue-to-red gradient using a sequential color scale. The visualization employs D3.js v7’s `scaleBand` and `scaleSequential` APIs, rendering SVG rectangles for each data point. Hovering reveals a tooltip with the location and exact temperature in Fahrenheit. The underlying dataset, sourced from the CORGIS health dataset, is displayed with colorbrewer’s interpolated palette and includes axis labels generated via D3’s `axisBottom` and `axisLeft` helpers.

AI-generated description

A time series heatmap in D3 using colorscale from colorbrewer and legend from Susie Lu

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/health/

MIT Licensed

Similar vizzes

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

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

78% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of temperature data over time, cycling through multiple cities from the Iris Dataset. It visualizes yearly temperature readings (in Kelvin) for each city, with circles colored by city and positioned along the x-axis for year and y-axis for temperature. The visualization uses D3.js v7, loading data via `d3.csv`, parsing dates with `d3.timeParse`, and rendering SVG circles with scales like `d3.scaleLinear` and `d3.scaleOrdinal`. A `setInterval` triggers periodic updates, redrawing the plot for each city every two seconds.

YYashwanth0311

78% match

Loading thumbnail…

fcc-d3-01

A heatmap visualizes monthly global land-surface temperature variations from 1753 to 2015, with the base temperature displayed as a subtitle. Each cell represents a month-year pair, colored by year and opacity scaled by temperature deviation. The visualization uses d3.json to load data from a freeCodeCamp repository, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for scales. SVG rendering includes custom axes, ticks, and a hover tooltip that displays the exact year, month, and temperature values.

SSiddharthMittal07

78% match

Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas

78% 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 Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Vvidhyanamini

77% match

Loading thumbnail…

HeatMap D3

This heatmap displays average monthly temperatures for ten cities across 2016, using a vertical color gradient from the Inferno interpolator to encode temperature values. The visualization employs D3.js v6 with SVG rendering, scaling months along the x-axis and cities along the y-axis. Interactive tooltips reveal exact temperature values on hover, while a d3-legend color scale provides a visual reference for the temperature range. The data comes from a CSV file loaded via d3.csv, with rounded cell corners and opacity styling for clarity.

AAllen Ho

76% match