Fork of HeatMap

100%

Fork of HeatMap

✓ Published0🌍 Public

Last edited Apr 18, 2024

Created on Mar 23, 2024

Forked from HeatMap

This heatmap visualizes monthly average temperatures across multiple cities (including Bangalore, Vancouver, and San Francisco) for the years 2020 through 2022, using a dataset trimmed to the first ten cities and first temperature entry per month. The visualization employs Chart.js to render the data on an HTML canvas, with each city-year combination displayed as a separate dataset of monthly values. Color intensity and border styling encode temperature ranges, allowing quick comparison of seasonal patterns and annual variations. The rendering leverages the canvas API directly, with the code providing static sample data that can be replaced with real measurements.

AI-generated description

A simple heatMap that I built displaying the temperature through various cities throughout the months of 2016.

The csv has been modified to get the first 10 cities in the csv per month It also gets the first entry temperature of the month it's recorded in

MIT Licensed

Similar vizzes

Loading thumbnail…

HeatMap

A heat map of temperature data for ten cities across the months of 2016, rendered as an interactive grid of colored squares using the p5.js `loadTable` API to fetch a CSV from a GitHub Gist. Each cell encodes average temperature through color saturation—cooler temperatures appear darker—while hovering over a cell displays its exact value. The visualization includes manual axis labels, a temperature color scale legend, and city names positioned along the left edge.

AAllen Ho

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

79% match

Loading thumbnail…

Fork of Visualize Data with a Heat Map

This heat map visualizes monthly temperature variance across years, using a red color scale where each rectangle represents a month’s deviation from the base temperature. The data comes from freeCodeCamp’s global-temperature JSON, with months converted to names and values offset by the base temperature. Built with the vega-lite-api, it encodes year and month as ordinal axes, uses `markRect` for the grid, and includes tooltips showing year, month, and temperature. The visualization is rendered via Vega-Lite’s SVG output, configured with custom axis styling.

DDeclan Naughton

76% match

Loading thumbnail…

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.

Pprateekvasi

74% match

Loading thumbnail…

Fork of d3 time series heatmap

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.

YYashwanth0311

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

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

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

73% match