A5 Line Chart D3

100%

A5 Line Chart D3

✓ Published2🌍 Public

Last edited Feb 23, 2025

Created on Feb 23, 2025

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.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart in D3

This line chart displays the number of police shootings in the United States per year from 2015 to mid-2020. The x-axis shows years as discrete values using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` with a range of 400 to 1200 incidents. The data is loaded from a remote CSV file via `d3.csv`, parsed with `d3.timeParse`, and aggregated by year using `d3.rollups`. The line is drawn with `d3.line`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with SVG output.

RRiya Mathur

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

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

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

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

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

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