Skip to main content
SimilarExport ZIP
100%

A3 Box Plot

✓ Published1🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Feb 9, 2025
Created on Feb 9, 2025
Forked from A3 Histogram Chart

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.

AI-generated description

A date histogram showing the sum total dead and missing migrants for each month.

Data from the Missing Migrants Dataset.

Demonstrates use of d3.bin and d3.sum.

MIT Licensed

Similar vizzes

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
84% 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
84% match
Loading thumbnail…

A2 Bar Chart

This A2 Bar Chart visualizes counts of police shooting victims by race, using a logarithmic scale on the y-axis to accommodate wide disparities in the data. The chart loads a CSV from a GitHub gist using p5.js’s `loadTable()` function, aggregates race counts in `preload()`, and renders the bars with `rect()` on a 3000x3000 `createCanvas()`. Axis labels, tick marks, and bar values are drawn with custom mapping logic inside the `draw()` loop.

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

A5 Bubble Chart D3

This bubble chart visualizes police shootings by age and race, with each circle representing the count of incidents for a specific age and racial category. The x-axis maps age, the y-axis maps the count of shootings, and circle size encodes frequency using a square-root scale so area remains proportional. The chart is built with D3 v7, loading CSV data, aggregating with `d3.rollup`, and rendering SVG circles using scales like `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` with `schemeCategory10` colors. Axes and labels are added via `axisBottom` and `axisLeft`.

Nnathanjmuljadi@gmail.com
80% match
Loading thumbnail…

A6 Scatter Plot

This scatter plot visualizes the U.S. police shootings dataset, showing the count of shootings aggregated by victim age and race. The code uses D3 v5’s `d3.nest()` and `rollup` to group data, then plots aggregated circles with `d3.scaleLinear` for axes and `d3.scaleOrdinal` with the category10 scheme for race colors. Axes are labeled with `d3.axisBottom` and `d3.axisLeft`, and a color legend is rendered via the d3-legend library. A linked YouTube tutorial explains the implementation.

Nnathanjmuljadi@gmail.com
79% match
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
79% 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
79% match