Line Chart in D3

100%

Line Chart in D3

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

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.

AI-generated description

A line chart displaying the number of police shootings from 2015 to mid-2020.

The x axis represents the years, and the y axis represents the number of incidents (shootings) that occurred.

MIT Licensed

Similar vizzes

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

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

75% match

Loading thumbnail…

HW9

This example visualizes the total number of fatal and nonfatal shootings involving unarmed individuals from 2010 to 2016, using a line chart with overlaid scatterplot points. The line connects yearly totals, while circles mark each data point, with the y-axis representing the total count and the x-axis showing time. The visualization uses D3 v4, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded from a CSV file (`fatal_unarmed.csv`) via `d3.csv`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled axes for year and total shootings, with a steelblue styled line and points.

HHussamHallak

74% match

Loading thumbnail…

Line Chart

This line chart displays violent crime rates per 100,000 people for each U.S. state from 2000 to 2019, using data from the CORGIS dataset. Each state is represented by a colored line, with a color legend on the right for identification. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color assignment, rendering paths and hover-able circles in SVG. The `d3.legendColor` API adds the threshold legend, and tooltips reveal exact values on hover.

AArun

74% match

Loading thumbnail…

Line Chart

This line chart displays the daily number of crimes over a 31-day period, with the x-axis mapping days and the y-axis mapping crime counts. The SVG rendering uses D3 v4, specifically `d3.scaleTime` and `d3.scaleLinear` for position encodings, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to both fields. The line is drawn in steelblue with rounded joins and caps, and the y-axis is labeled "Price ($)".

GGoomble

73% match

Loading thumbnail…

Fatal Police Shootings Chart Working Copy

This interactive bar chart visualizes fatal police shootings in the United States, allowing users to explore how incidents distribute across categories such as race, gender, and armed status. The chart dynamically aggregates counts from the Washington Post dataset using d3.nest() and presents results through React components with SVG rendering. Users select a variable from a dropdown menu, triggering the x-axis to update via React's state management. The implementation uses d3.scaleBand and d3.scaleLinear for axes, with native SVG `<title>` tooltips embedded in each bar.

MMartin Blatz

73% match

Loading thumbnail…

US Police Shootings Visialization

A bar chart visualizes the frequency of US police shootings, grouped by the type of arms involved and colored by the victim's race, with tooltips showing exact counts. The visualization is built using the vega-lite-api to define the bar marks and encodings, while d3.csv loads the shootings dataset from a gist repository. Vega and Vega-Lite render the chart, with vega-tooltip providing interactive details, and a custom config adjusts font sizes and axis styles for readability. The chart fills the entire browser window, using the dataset's categorical and quantitative fields directly.

Llintonylin

73% match

Loading thumbnail…

Shooting Data Working Copy

This interactive scatterplot visualizes fatal police shootings in the United States, plotting individual incidents by rank along both axes while allowing users to filter by flee status through a dropdown menu. The visualization loads CSV data from the Washington Post’s Fatal Police Shootings Database, using React hooks for state management and dropdown interactions. D3’s scaleBand and scaleLinear map the racial categories and data points, while custom React components render SVG axes and circles with tooltips, all styled with the Poppins font.

MMartin Blatz

73% match