Skip to main content
SimilarExport ZIP
100%

A7 Time Series Heat Map D3

✓ Published0🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Mar 15, 2025
Created on Mar 15, 2025
Forked from A4 Heat Map in 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A4 Heat Map in D3

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.

Nnathanjmuljadi@gmail.com
86% 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
83% match
Loading thumbnail…

A7 Multi-Line Chart D3

This example visualizes police shooting incidents over time by race, plotting yearly counts as multi-line charts for White, African American, Hispanic, and Other groups. It uses D3 v7 with time and linear scales, a line generator, and d3-legend to map data from a CSV file into an SVG. Missing years are filled with zero values, and axes display formatted year labels.

Nnathanjmuljadi@gmail.com
83% 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
81% 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
81% match
Loading thumbnail…

A7 Small Multiples Chart D3

This example presents a 2x2 grid of small multiple line charts, visualizing police shooting counts per year across four racial categories. It uses a D3 v7 ordinal color scale and time scale, with data loaded from a CSV file. Labels and legends are added with d3-legend. The code uses `d3.csv`, `d3.group`, `d3.rollup`, `d3.scaleTime`, and `d3.line` to construct shared axes, create the line generator, and arrange chart groups via manual translation transforms.

Nnathanjmuljadi@gmail.com
81% match
Loading thumbnail…

A5 Scatter Plot Matrix D3

This scatter plot matrix uses the D3.js library to visualize the US Police Shootings dataset, with age, year, and month as the three variables. The splom displays all pairwise combinations of these variables in a grid of small multiples, with each cell showing a bivariate scatterplot. The code uses `d3.csv` to load the data, `d3.timeParse` to parse dates, and `d3.scaleLinear` with `d3.axisLeft` and `d3.axisBottom` for the axes. Column and row labels identify each variable, and the SVG rendering uses semi-transparent points to reveal overlapping data density.

Nnathanjmuljadi@gmail.com
80% match
Loading thumbnail…

A5 Line Chart D3

This line chart visualizes the count of police shootings per year from a CSV dataset. Using D3 v7, the chart aggregates records by the `Incident.Date.Year` field, sorts them chronologically, and renders a single steelblue path via `d3.line`. Linear scales (`scaleLinear`) map years and counts to the SVG canvas, with axes drawn by `axisBottom` and `axisLeft`. Axis labels and a bold title clarify the chart’s purpose.

Nnathanjmuljadi@gmail.com
79% match