Skip to main content
SimilarExport ZIP
100%

DC Crime Stack Chart

✓ Published0🌍 Public
Eeherchen
Last edited Jul 13, 2019
Created on Jul 11, 2019

This interactive stacked bar chart visualizes 2017 crime counts by offense type across Washington, D.C. police service areas (PSAs). Built with D3.js (v3), the visualization uses a stacked layout to aggregate five offense categories—such as burglary and motor vehicle theft—along a horizontal axis, with PSA segments stacked vertically. Users can hover over bars to see tooltips with exact counts via d3-tip, or hover over the color legend to highlight specific crime types while dimming others. The chart also includes a dropdown to switch between yearly datasets.

AI-generated description

Stacked bar chart showing estimated religion breakdown.

Interactions:

  • Hover over the bars for tool tips.
  • Hover over the legend to highlight religions.

Based on an example from the tutorial Splitting Charts. Derived from the following examples published on bl.ocks.org:

Estimated 2010 religion breakdown of the most populous 20 countries.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

TODO: Upgrade dependencies to latest D3 & friends.

MIT Licensed

Similar vizzes

Loading thumbnail…

NYC Crime - D3 Visualization

This interactive visualization displays the density of crime across New York City’s five boroughs, broken down by offense level (felony, misdemeanor, violation). Users can toggle between total crime counts, 2010 per-capita rates, and 2016 per-capita estimates. The chart uses a mosaic or treemap-style layout built with D3 v4, nesting data by offense level and positioning rectangular blocks by borough. Hovering over each block reveals detailed values, with per-capita data formatted as percentages. The visualization renders as crisp SVG shapes and is driven by user-selected JSON data files.

CCrimeDataNyc
73% match
Loading thumbnail…

D3: NYC Crime Visualization

This interactive NYC crime visualization presents multiple coordinated views: a choropleth map of precincts, a pie chart of crime types, and bar charts showing age and race distributions. Users can click precincts or crime categories to filter across all views, with a reset button to restore the full dataset. The visualization uses D3 v6 with d3.geoMercator and d3.geoPath for the map projection, d3.arc for the pie chart, and d3.scaleBand for bar charts. Crime data is color-coded via a linear gradient legend and tooltip interactions.

Ooliverliuoo
73% match
Loading thumbnail…

Crime by Race Dataset (Normalized)

This visualization displays FBI crime data from 2014 as a normalized stacked bar chart, showing the count of offenses by race for each crime category. The code uses D3.js with d3.nest to group by race and d3.layout.stack for the stacked bars. Hovering over the color legend fades other bars and highlights only the selected race, with tooltips via d3-tip providing exact values. Animated transitions occur when switching between the legend-driven highlight states.

CCurran Kelleher
72% match
Loading thumbnail…

Chicago Crime Dataset Analysis

This visualization presents a bar chart of Chicago crime data, ranking offense types by their recorded counts, with THEFT and BATTERY as the most frequent. The bars are color-coded and rendered as SVG using D3.js v5, with axes created via d3.axisLeft and d3.axisBottom. The code includes reusable modules for a dropdown menu and color legend, though the current renderer focuses on the bar chart. The data is loaded from a CSV file and processed with d3.csv, with scales built using d3.scaleLinear and d3.scaleBand.

Ssrrajendran
72% match
Loading thumbnail…

Crime Data - Crime Type Occurence Analysis

This bar chart displays the number of occurrences for each crime type in a dataset, with rotated labels along the x-axis to accommodate longer category names. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate counts with JavaScript objects, and render the chart as SVG. It employs `d3.scaleBand` and `d3.scaleLinear` for positioning, along with `d3.axisBottom` and `d3.axisLeft` to generate axes. The chart includes a title and axis labels, showing that theft or similar categories likely dominate the distribution.

VVinay Vemuri
71% match
Loading thumbnail…

Treemap Bar Chart

This example visualizes six years of crime statistics across U.S. states, using a treemap bar chart to compare counts for different offense types. The chart shows hierarchical data where each state’s total crime count is divided into rectangular sections representing specific crimes. Built with dex.js and D3.js, the visualization reads from a CSV file and renders as an interactive treemap-based bar composition. The code uses d3.csv to load data and the dex.charts.d3.TreemapBarChart component, with manual sizing and hover effects controlling opacity for emphasis.

PPatMartin
71% match
Loading thumbnail…

d3.js experiment - Donuts, Bars and Crime.

The visualization presents crime data across San Francisco neighborhoods for a selected year, combining donut charts for offense type distribution and bar charts for hourly incident patterns. Each donut chart displays the share of crimes by neighborhood, with the total count centered and interactive hover labels revealing specific neighborhood names and values. The bar charts beneath show the frequency of incidents across 24 hours per offense type. Built with CoffeeScript, it uses D3.js primitives including `d3.svg.arc`, `d3.layout.pie`, and `d3.scale.ordinal` for coloring, while the JSON data source is loaded via `d3.json` from the `top-neighborhoods-{year}.json` endpoint.

CCaged
70% match
Loading thumbnail…

Fork of D3: NYC Crime Visualization

This dashboard visualizes NYC crime statistics across multiple coordinated views: a geographic map shading precincts by crime volume, a pie chart of crime type proportions, and bar charts breaking down arrests by age and race. Users can filter the entire interface by clicking map regions or crime categories in the pie. Built with React and D3 v6, it uses `d3.geoMercator` and `d3.geoPath` to project the map, `d3.arc` for donut slices, and `d3.scaleBand`/`d3.scaleLinear` for the bars. A color legend uses CSS linear gradients, and an SVG animation resets the view when the button is clicked.

RRaianeTI
70% match