Interactive NYC Borough map

Interactive NYC Borough map

This interactive map of New York City’s five boroughs visualizes traffic crash statistics, distinguishing injury and fatality counts for cyclists, pedestrians, and motorists. A legend allows users to toggle six incident categories on and off, revealing colored point markers for each crash location. The map renders boroughs as colored SVG paths using `d3.geoMercator` and `d3.geoPath`, with data loaded from CSV files via `fetch`. Hovering over a borough displays aggregated crash counts from `CrashByBorough.csv` in a tooltip.

Interactive NYC Borough map

Interactive NYC Borough map with scroll and zoom

An interactive map of New York City's five boroughs colored by name, with an optional overlay of incident points. Across each borough, users can toggle visibility for six crash-related categories—cyclists, pedestrians, or motorists, each further split into injured or killed—using checkboxes or clicks in the legend. The React app loads data from CSV files for incident locations and a TopoJSON file for borough boundaries, rendering with D3's Mercator projection and `geoPath`. Hovering over a borough displays a tooltip with aggregate crash statistics from a separate CSV.

Interactive NYC Borough map with scroll and zoom

Interactive NYC Borough map with scroll and zoom

An interactive map of New York City boroughs visualizes traffic crash data, representing the locations of injured and killed cyclists, pedestrians, and motorists as colored points. Users can zoom towards the cursor with the mouse wheel and pan by dragging, while toggling the visibility of six incident categories via a legend. Built with React, the map is rendered as SVG using D3’s `geoMercator` and `geoPath` for the geographical projections. Crash statistics are loaded from a CSV file, and the incident coordinates are read from separate CSV files per borough.

93% match

NYC borough map with interactive legend

An interactive map of New York City's five boroughs displays traffic crash counts from a CSV dataset as circular markers with numeric labels, overlaid on a TopoJSON-derived GeoJSON map. Users hover over legend items or borough polygons to highlight matching regions while dimming others. The visualization uses React for component state and layout, D3 v7's `geoMercator` and `geoPath` for the map projection, and `select` for SVG updates. A semi-transparent legend communicates the fixed borough color scheme.

92% match

More Optimized Interactive NYC Borough map with scroll and zoom

This interactive NYC borough map visualizes traffic crash data, showing both aggregate borough statistics and individual incident points for cyclist, pedestrian, and motorist injuries and fatalities. Users can pan and zoom with mouse wheel and drag gestures via a debounced render pipeline. The visualization combines an SVG layer for borough outlines rendered with `d3.geoPath` and `geoMercator`, alongside a Canvas layer for efficient point rendering. Incident data is loaded from per-category CSV files, while a legend toggles visibility for six incident categories using React state.

91% match

NYC Borough map

This map of New York City boroughs uses distinct colors for each borough, with semi-transparent circles and white text labels displaying the number of motor vehicle crashes per borough. The visualization loads TopoJSON geographical data and CSV crash statistics, then renders them as an SVG using React, D3’s `geoMercator` and `geoPath` projections, and `topojson-client`’s `feature` conversion. Circle radius is determined by the digit count of crash totals, providing a quick comparison of crash frequency across the five boroughs.