Fork of D3: NYC Crime Visualization

100%

Fork of D3: NYC Crime Visualization

✓ Published1🌍 Public

Last edited Feb 5, 2022

Created on Feb 5, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of D3: NYC Crime Visualization

This interactive dashboard presents NYC crime data across multiple coordinated views: a geographic map with a heatmap overlay, a pie chart, and two bar charts for age and race breakdowns. Users can filter by precinct and crime type, with all charts updating in response. The visualization uses D3 v6 with a Mercator projection via `d3.geoMercator()` and `d3.geoPath()` for the map, alongside SVG-based pie and bar charts. Crime color mapping and tooltips provide additional detail.

CChristianABeier

95% match

Loading thumbnail…

Fork of D3: NYC Crime Visualization

This interactive visualization explores NYC crime data through a coordinated multi-view dashboard. It combines a geographic heatmap using `d3.geoMercator` and `d3.geoPath` to display precinct-level crime intensity, with a donut chart (via `d3.arc`) breaking down crime types by color. Three bar charts for age, race, and additional demographics update alongside. The SVG-based scene includes a legend, tooltip, and reset button, with all sub-graphs animated over a 24-millisecond duration. The interface supports dynamic filtering by precinct and crime type, using `d3.scaleOrdinal` and linear/band scales for color and axes.

DDing

95% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard visualizes NYC crime data as a linked map, pie chart, and bar charts. The map uses a `d3.geoMercator` projection with a `d3.geoPath` generator to render precinct boundaries, filled with a gradient legend. A pie chart using `d3.arc` breaks down crime types, while bar charts for age and race are built with `d3.scaleBand` and `d3.scaleLinear`. Users can click map regions or reset via a button, with linked views updating based on global indicators for precinct and crime type, all rendered as SVG with animation.

KKetaki789

94% match

Loading thumbnail…

Fork of NYC Crime

This interactive visualization presents NYC crime data through multiple linked views: a geographic map, a pie chart, and bar plots for age and race distributions. The map uses d3.geoMercator and d3.geoPath to render police precincts with a color gradient legend, while the pie chart breaks down crime types using d3.arc. Users can click precincts or crime categories to filter the entire dashboard, with a reset button to restore the default view. All charts update simultaneously through shared global state variables, and a tooltip provides additional details on hover. The visualization is built with D3 v6 and SVG, featuring animated transitions between states.

Nnikki81140

93% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard presents New York City crime data through a synchronized map, pie chart, and bar plots. A choropleth map visualizes precinct-level data, while a donut chart breaks down crime types and bar charts show age and race demographics. Users can filter the visualization by clicking on map precincts or the reset button. The code uses D3.js v6 with `d3.geoMercator` projection, `d3.geoPath` for map rendering, and SVG for all graphics.

TTracyWangYQ

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

93% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard presents NYC crime data through a coordinated set of SVG views: a map, a pie chart, and bar charts. Users can click the reset button to restore the initial state. The visualization is built with React and D3 v6, using d3.geoMercator and d3.geoPath for the map, d3.arc for the pie, and d3.scaleBand and d3.scaleLinear for the bar charts, with animations and a tooltip for details.

SSelena Ding

92% match

Loading thumbnail…

Fork of NYC Crime

This interactive visualization presents NYC crime data through a coordinated set of views: a geographically accurate map with a heatmap legend, a pie chart of crime types, and bar charts for age and race breakdowns. Users can click map precincts and toggle the reset button to filter all views dynamically. The map uses a Mercator projection with `d3.geoPath`, while pie and bar charts rely on D3 scales and arcs. Data is rendered as SVG with animated transitions, initialized from the `d3.v6` library.

FFouzia A.

92% match