Skip to main content
SimilarExport ZIP
100%

A7 Multi-Line Chart D3

✓ Published2🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Mar 15, 2025
Created on Mar 15, 2025
Forked from A5 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.

AI-generated description

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

MIT Licensed

Similar vizzes

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
89% 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
84% 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
83% 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…

A6 Sequential Color Scale

This visualization shows police shooting counts by race and gender as grouped bar charts, with a sequential red color scale encoding the magnitude of each count. It uses D3 v7 with SVG rendering, loading data from a CSV file. The code aggregates records by race and gender, then employs `d3.scaleBand` for categorical axes, `d3.scaleLinear`, and `d3.scaleSequential` with `d3.interpolateReds` for the color fill. It also includes gender labels and axes styled with CSS.

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

hw9_1

This visualization shows how police shootings of unarmed subjects changed from 2010 to 2016 across the 50 largest US police departments, using a line chart with interactive hover. The line tracks the total number of shootings per year, while the tooltip displays the racial breakdown for each year (Latino, Black, White, Asian, Other, Unknown percentages). The chart uses D3 v4 with SVG rendering and includes axis labels, a hover interaction that reveals exact values, and a legend describing the race abbreviations. Data was collected by VICE News over a nine-month period.

HHussamHallak
80% match
Loading thumbnail…

hw9final

This line chart tracks the total number of shootings per year from 2010 to 2016, using a single purple trend line with hover interactions that reveal the percentage breakdown by race (Latino, Black, White, Asian, Other, Unknown) for each year. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to construct the chart, while a `d3.bisector` enables precise date-based lookup during mouse movement. An overlay rectangle captures mouse events, updating a focus circle and dashed hover-lines to display the demographic percentages in a text label. The data comes from a local JSON file (data.json), and the chart is built with Blockbuilder.org, using a clean light background and minimal axis styling.

HHussamHallak
79% match