HeatMap

100%

✓ Published0🌍 Public

Last edited Feb 25, 2022

Created on Feb 22, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Heat Map

This heat map visualizes the total expenditure of several U.S. states over time, using pink intensity to indicate higher spending amounts. It plots a grid where each cell's color corresponds to a specific state-year combination, with darker pink representing greater expenditure. The visualization is built using the p5.js library, which handles the canvas, drawing, and color fills. Data is loaded from a CSV file via the `loadTable` function, with state names and years rendered as text labels alongside the grid. The map reveals that most states show increasing expenses over recent years, while West Virginia's spending initially declined before rising again.

PPranay Matalia

89% match

Loading thumbnail…

Dot Plot

This dot plot visualizes state expenditure data from 1992–2019, with each point representing a state’s total spending in hundreds of millions of dollars. The chart uses p5.js’s `loadTable` to fetch a CSV, `createCanvas` for rendering, and `point` with heavy `strokeWeight` to draw dots. Annotations highlight comparisons, such as New York’s spending being 1.5 times Texas’s, while the axes are manually constructed via `line` and `text`.

PPranay Matalia

78% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

76% match

Loading thumbnail…

Bar Chart

This bar chart visualizes total state expenditures in the U.S. from 1992–2019, drawn using the p5.js library. The visualization sums spending per state from a CSV file loaded via `loadTable`, scaling bar heights to values in hundreds of millions of dollars. It highlights California as the highest spender and Wyoming as the lowest, with labeled axes, gridlines, and annotations. The rendering uses p5.js canvas functions such as `rect`, `line`, and `text` to construct the chart.

PPranay Matalia

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

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

d3 heatmap

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

AAndrew

74% match

Loading thumbnail…

Heatmap with D3

This heatmap visualizes abortion rates per 1,000 women aged 15–17 across U.S. states over multiple years, using a linear color scale from light gray to red to indicate rate intensity. The D3 v7 code loads data from a CSV and renders an SVG with `d3.scaleBand` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleLinear` for color encoding. It appends rectangles for each state-year pair, plus a legend and axis labels.

OOlha

74% match