Skip to main content
SimilarExport ZIP
100%

A4 Heat Map in D3

✓ Published1🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Feb 17, 2025
Created on Feb 16, 2025
Forked from A2 Heat Map

This heat map displays the number of police shootings across 20 US cities, using a single row of rectangles colored from white to red to represent low to high incident counts. Built with D3 v7 and React, it reads CSV data from a GitHub gist and uses `d3.rollup` for aggregation, `d3.scaleBand` for horizontal positioning, and `d3.scaleLinear` for the color mapping. The visualization includes a rotated x-axis with city labels and renders entirely as SVG.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A7 Time Series Heat Map D3

This heat map visualizes police shooting incidents over time, using a grid of colored cells where each cell represents a specific year and month, with color intensity (from white to red) indicating the number of incidents. The visualization employs D3.js v7 with SVG rendering and animation, featuring a continuous color legend and interactive tooltip. Data is loaded from a CSV file, parsed using `d3.timeParse`, and aggregated into a yearly-monthly count matrix. The implementation utilizes D3's `scaleBand` for axes, `scaleSequential` with `interpolateReds` for the color scale, and the d3-legend library for the color legend.

Nnathanjmuljadi@gmail.com
86% match
Loading thumbnail…

A2 Heat Map

This heat map visualizes the frequency of police shootings across U.S. states, using a red-to-blue color scale where higher counts appear bluer. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, counts incidents per state, and renders colored squares for each state along a vertical axis with state labels. The color mapping uses `map` and `lerpColor` to interpolate between red and blue based on the normalized count values.

Nnathanjmuljadi@gmail.com
85% match
Loading thumbnail…

A4 Bar Chart in D3

This visualization displays the number of police shootings recorded by racial category, using a bar chart where bar heights correspond to aggregated counts from a CSV dataset. The chart is rendered in SVG via D3.js v7, using `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for positioning. CSS hover effects change bars from steelblue to orange, while axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Nnathanjmuljadi@gmail.com
85% match
Loading thumbnail…

A3 Histogram Chart

This visualization displays a histogram of monthly counts of police shootings, revealing temporal patterns in the data. The chart uses React with SVG rendering and D3 v5 APIs, including `d3.bin` for binning dates into monthly intervals, `d3.sum` for aggregating counts, `scaleTime` for the x-axis, and `scaleLinear` for the y-axis. The data comes from a CSV file of police shooting incidents, processed through `d3.csv` and parsed dates via `timeParse`.

Nnathanjmuljadi@gmail.com
81% match
Loading thumbnail…

A4 Scatter Plot in D3

This interactive D3.js scatter plot visualizes police shootings by age, aggregating individual records from a CSV dataset into counts per age and mapping them on linear scales. Built with D3 v7, the SVG rendering uses `d3.csv` to load data, `d3.rollup` for aggregation, and `d3.scaleLinear`, `axisBottom`, and `axisLeft` from D3’s scale and axis APIs to produce axes. Circles are positioned via `selectAll` and `join`, with margins and window dimensions defining the full-viewport layout. The chart is a fork of a VizHub example, displaying counts of shootings on the y-axis against age.

Nnathanjmuljadi@gmail.com
81% match
Loading thumbnail…

A3 Box Plot

This visualization shows the distribution of police shootings per year across racial categories, using box plots to display the minimum, first quartile, median, third quartile, and maximum for each group. The code groups the data by race, then calculates yearly counts and quantiles for each category. It uses React to render the SVG, with d3-scale functions such as `scaleBand` and `scaleLinear` for positioning, and `d3.quantile` for statistical summaries. Data comes from a CSV of police shooting incidents.

Nnathanjmuljadi@gmail.com
81% match
Loading thumbnail…

US police shootings by categories

This interactive map visualizes US police shooting incidents, with individual shootings represented as colored dots positioned by latitude and longitude using a d3.geoAlbersUsa projection and d3.geoPath. A dropdown menu allows users to group and color the shootings by categories such as race, gender, or threat level, with a color legend displaying the current category values. The visualization uses React for state management, D3 v5 for geospatial and data processing, and renders as SVG elements. Data is loaded from a CSV file containing police shooting records.

ZZG
80% match
Loading thumbnail…

US police shootings by categories

A map of the United States displays police shooting incidents as colored dots, with each dot's color representing a category selected from a dropdown menu such as race, gender, or threat level. The visualization uses React to manage the interactive state, D3's `geoAlbersUsa` projection and `geoPath` to render the geographic boundaries, and `scaleOrdinal` for the categorical color scale. A custom color legend allows users to hover over categories to highlight corresponding data points. The data is loaded from a CSV file, while the map outlines come from a TopoJSON US atlas.

Ssayanighosal34
80% match