Skip to main content
SimilarExport ZIP
100%

A2 Dot Chart

✓ Published1🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Feb 3, 2025
Created on Feb 3, 2025
Forked from A2 Bar Chart

This visualization plots the ages of individuals involved in U.S. police shootings against the frequency of shootings per age, using a dataset loaded from a GitHub-hosted CSV file. The chart displays axes with linear scales, tick marks, and labeled counts, with blue dots representing each age-to-count pair. The code uses p5.js’s `loadTable` function to parse the CSV, and `createCanvas` with `map` to position elements. It draws the scatter plot and axes using p5.js drawing functions like `ellipse`, `line`, and `text`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A3 Strip Chart

This strip chart visualizes the ages of individuals from a police shootings dataset, using a one-dimensional scatter plot with random horizontal jitter to reveal the distribution of ages along the vertical axis. The visualization is implemented in React with D3.js, using `scaleLinear` to map age values to screen coordinates and `extent` to calculate the domain. Data is loaded from a CSV file via the `csv` function in `useData.js`, and the chart is rendered as an SVG with custom React components for the axes and marks.

Nnathanjmuljadi@gmail.com
86% 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
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
84% 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
82% 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
81% 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…

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
81% 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
80% match