A2 Heat Map

100%

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

Forked from Blank Slate with Hot Reloading

This heat map visualizes residential wood consumption across seven U.S. states over ten years (2010–2019), using orange squares whose opacity scales with the data value. Built with p5.js, it loads CSV data from a GitHub URL, draws axes and labels, and relies on the canvas API (`createCanvas`, `square`, `fill`) for rendering. Hovering over a square displays the specific value and a wood emoji via p5’s `mouseX`/`mouseY` checks and `text` function.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

There is no index.html - that's what triggers the V3 Runtime
The entry point is the main function exported from index.js
The main function takes an argument container, a DIV

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

A2 - Temps (Heatmap)

This heatmap visualizes average monthly temperatures for seven U.S. states in 2016, using a yellow-to-orange color scale where warmer temperatures appear brighter. The p5.js sketch loads CSV data via `loadTable`, processes it in `preload()` and `setup()`, and renders colored squares for each state–month combination on a Canvas. A legend explains the color range, and axis labels identify states and months. The code uses p5.js drawing functions like `fill()` and `square()` to construct the grid.

Cctan13@dons.usfca.edu

76% match

Loading thumbnail…

P5 Heatmap

This interactive visualization displays natural gas consumption across selected U.S. states from 2005 to 2011 using a heatmap grid. The color intensity of each rectangle reflects the consumption value, with blue indicating lower consumption and pink indicating higher consumption. The P5.js sketch loads data from a CSV file containing state, year, and consumption columns, then renders the grid on a 600x500 canvas. The code normalizes consumption values by dividing by 950,000 and maps them to the fill color's red channel. State labels appear along the left axis, with years displayed across the top.

Mmariahdiaz

74% match

Loading thumbnail…

A2 - Bar Chart

This bar chart visualizes petroleum consumption in residential areas across U.S. states in 2019, highlighting the top five and bottom five states by usage. The chart uses a logarithmic scale for bar widths, with color intensity (green to red) indicating whether consumption levels are considered good or bad. Interactive hover annotations display exact values. Built with p5.js, the visualization loads data from a remote CSV file and sorts it programmatically, drawing axes, bars, and labels through canvas rendering functions.

RRavneet Singh Bhatia

73% match

Loading thumbnail…

A2 Heatmap

This heatmap visualizes the distribution of various mushroom species across eight habitat types—grasses, leaves, meadows, paths, heaths, urban, waste, and woods—and four seasons (spring, summer, autumn, winter). Each cell’s color intensity reflects the number of species recorded in that habitat-season combination, with data loaded from a CSV file. The visualization uses the p5.js library to create a canvas, process the tabular data with a `TypedDict`, and render colored rectangles via `lerpColor` to map species counts to a purple gradient.

Ddonaldminer

70% match

Loading thumbnail…

HeatMap

This heatmap visualizes the expenditure of several U.S. states from 1992 to 2001, with each cell colored on a linear scale from light beige to dark red to indicate spending levels. The chart includes labeled axes for state and year, along with a legend showing approximate dollar amounts. Built with React and rendered as SVG, it uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft to generate the axes.

PPranay Matalia

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

68% match

Loading thumbnail…

A7 Heatmap

A heatmap of burglary rates per 100,000 people across U.S. states from 2000 to 2019, sourced from the CORGIS dataset and rendered as an SVG. The visualization uses D3.js v7 with `d3.scaleBand` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color encoding, and a threshold legend via the d3-legend library. Hovering over each cell reveals precise values and state names.

NNoah C.

68% match

Loading thumbnail…

Heat Map

A 5x5 heat map visualizes numeric values from a CSV file as colored squares, using a quantile scale with a sequential orange colormap to encode values from 1 to 20. The SVG rendering employs d3.csv for data loading, d3.scaleQuantile for color mapping, and d3.axisRight and d3.axisBottom to display axes. A tooltip appears on mouseover, showing the exact value of each cell.

CChai94

68% match