6. Interactive Components

100%

6. Interactive Components

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 11, 2021

This interactive map of New York City visualizes 2021 car collision statistics by borough, with color encoding for total accidents and hover effects revealing detailed metrics like severe case rates and leading causes. The visualization uses D3 v6 (with legacy v3 and v4 scripts) to render SVG paths from a GeoJSON file, employing a Mercator projection via `d3.geo` and `d3.geoPath`. A sequential color scale (`d3.scaleSequential`) maps collision counts, while mouseover events trigger text updates and dynamic styling changes. The design includes hover-triggered highlighting, animated text transitions, and a color legend axis.

AI-generated description

5702

MIT Licensed

Similar vizzes

Loading thumbnail…

NYC Motor Crashes Exploratory Analysis

This interactive visualization explores NYC motor vehicle crash counts by hour, with buttons to filter results by day of the week or view the overall total. It renders animated SVG bar charts using D3 v7, transitioning axes and bar heights over two seconds when a new day is selected. The data comes from a remote CSV of 2020 collision statistics, parsed with d3.csv. The code dynamically updates scales, axes, and bar positions via d3.scaleBand, d3.scaleLinear, and selection joins with transition.

Mmtz2110

80% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example visualizes New York City traffic crash data as a clustered point map, distinguishing crash types—no injury, injury, fatality, and combined injury and fatality—through a categorical color scale. It uses Mapbox GL for the interactive basemap and layer rendering, while D3 v4 fetches and loads the GeoJSON data. The map clusters points at higher zoom levels using Mapbox GL’s built-in clustering, with circle radius scaling dynamically based on zoom. The underlying data comes from a public GitHub repository containing NYC crash records, rendered over a dark map style for contrast.

FFred-Fan

79% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This visualization maps motor-vehicle crash locations in New York City, colored by crash type (injury, fatality, etc.), using a dark Mapbox basemap. It shows clustered point data to reveal geographic patterns of crash severity. The code uses Mapbox GL JS with D3.js v3 to load GeoJSON data from a GitHub repository, create a clustered circle layer, and apply categorical color mapping with radius scaling. The map includes navigation controls and a zoom-dependent radius transition.

55un

78% match

Loading thumbnail…

NYC Crime

This interactive dashboard visualizes NYC crime data across multiple coordinated views. A map of NYC uses a D3 geoMercator projection and d3.geoPath to display precinct boundaries, with color intensity reflecting crime prevalence. Clicking a precinct updates a donut chart showing crime-type distribution and three bar charts breaking down offenses by victim age and race. Users can filter by crime type through the pie chart and reset all views with a button. The visualization uses D3 v6 with SVG rendering, animated transitions between states, and tooltips for additional detail.

YYuta555

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

76% match

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

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

76% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays hourly collision counts across New York City boroughs, with each borough represented by a distinct colored line. The visualization uses D3 v5 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. A custom color legend function places ordinal color scales alongside the chart, while data from Counts.csv is nested by borough using `d3.nest`.

MMch9006

75% match