Heatmap in D3

100%

✓ Published1🌍 Public

Kkfhujosefsson@dons.usfca.edu

Last edited Mar 19, 2025

Created on Mar 19, 2025

This heatmap visualizes monthly COVID-19 cases across Scandinavian countries for 2020, using a blue sequential color scale to encode case counts per country-month combination. The SVG chart, built with D3 v7, reads CSV data from a GitHub gist and renders axes, labels, and tooltips. It uses `d3.scaleBand` for positioning, `d3.scaleSequential` with `d3.interpolateBlues` for coloring, and the d3-legend plugin for the color legend.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Black hat multiline chart

This example displays daily COVID-19 cases for five Scandinavian countries throughout October 2020 on a logarithmic scale. The black-background chart uses colored lines for Sweden, Denmark, Norway, Finland, and Iceland. The visualization loads CSV data via `d3.csv`, builds scales with `scaleLinear` and `scaleLog`, and renders paths with the `d3.line` generator. SVG elements handle axes, labels, a title, and a legend, demonstrating D3 v7's data-joining and axis APIs.

Kkfhujosefsson@dons.usfca.edu

83% match

Loading thumbnail…

d3 Heatmap

This heatmap visualizes cardiovascular disease case counts across ten countries from 2018 to 2023. The SVG rendering uses D3.js version 7, specifically `d3.csv` to load external data and `d3.scaleSequential` with `d3.interpolateReds` to map case numbers to color intensity. Each cell represents a country-year combination, and hovering triggers a custom tooltip with detailed values. The legend shows a low-to-high gradient, while the dataset is sourced from a remote CSV file.

Sshreyasribearelly@gmail.com

83% match

Loading thumbnail…

White hat multiline chart

The chart displays daily COVID-19 case counts for five Scandinavian countries across October 2020, plotted as multiple colored lines over a shared day axis. It uses d3.csv to load the data, d3.line and d3.scaleLinear to generate the paths and coordinates, and SVG elements with CSS classes for styling. The y-axis shows case numbers, the x-axis shows days, and a legend identifies each country’s line color.

Kkfhujosefsson@dons.usfca.edu

82% match

Loading thumbnail…

Fork of Multiline chart

This fork of a multiline chart visualizes COVID-19 cases in five Scandinavian countries during October 2020. Each country gets its own small SVG chart displaying daily case counts as a line, with a shared color-coded legend and tooltip. The code uses d3.csv for data loading, d3.group to organize data by country, and d3.line with d3.scaleLinear for axes and paths. A d3-legend library creates the custom legend, and the tooltip appears on hover.

Kkfhujosefsson@dons.usfca.edu

81% match

Loading thumbnail…

Both Charts

This visualization presents two line charts showing COVID-19 case counts in five Scandinavian countries throughout October 2020. One chart uses a linear scale while the other displays the same data on a logarithmic scale, highlighting the different visual patterns each scale produces. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleLog` for the axes, and `d3.line` to generate the SVG paths. Each country’s daily cases are plotted against the day of the month, with axes styled using `d3.axisBottom` and `d3.axisLeft`.

Kkfhujosefsson@dons.usfca.edu

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

80% match

Loading thumbnail…

Covid cases per month for European Countries in 2020

This heatmap visualizes monthly COVID-19 cases across seven European countries in 2020, using color intensity to show case counts from January to November. It loads CSV data via p5.js’s `loadTable`, aggregates cases by country and month, and renders the grid with p5.js `rect` and `map` functions. Hovering reveals exact values through a tooltip, while a color scale bar displays the range. The visualization includes months and country labels, axes, and employs Plotly indirectly via an included script tag, though the heatmap itself is custom-drawn on a p5.js canvas.

Kkfhujosefsson@dons.usfca.edu

80% match

Loading thumbnail…

CovidCases

This visualization shows the cumulative number of COVID-19 cases in Sweden, Denmark, and Norway over time, displayed on a geographic map of Scandinavia. A date slider lets viewers scrub through the timeline, with each country colored according to a sequential orange-red scale that encodes case counts. The implementation uses d3-geo and d3.geoPath with a Mercator projection to render the map, while d3.scaleSequential and d3.interpolateOrRd handle the color mapping. Data comes from a JSON world geometry file and a CSV of daily case totals, grouped by date and country. Hovering over a country reveals a tooltip, though its text is not populated.

Kkfhujosefsson@dons.usfca.edu

79% match