Interactive NYC Borough map with scroll and zoom

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.

95% match

Interactive NYC Borough map with scroll and zoom

95% 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.

95% match

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

An interactive map of New York City's five boroughs, colored distinctly, serves as a base for exploring traffic crash data. Users toggle checkboxes in a legend to display layers of colored points representing injured or killed cyclists, pedestrians, and motorists. The map shows these incident locations as colored circles at varying opacities. Hovering over a borough reveals a tooltip with summary crash statistics. Built with React, it uses D3's `geoMercator` for projection, `geoPath` for drawing, and `topojson-client` for handling geographic data, visualizing point data loaded from CSV files.

Optimized Interactive NYC Borough map with scroll and zoom

This interactive map of New York City boroughs displays the locations of cyclist, pedestrian, and motorist injuries and fatalities. Users can zoom and pan the map, and toggle the visibility of six incident categories via a legend. The visualization is built with React, using D3’s `geoMercator` and `geoPath` to render the TopoJSON boundary data and project incident points from CSV files. Point rendering and map transforms are optimized for smooth animation.

Test Fork of Optimized Interactive NYC Borough map with scroll and zoom

This interactive map shows NYC traffic crash incidents, distinguishing between injured and killed cyclists, pedestrians, and motorists by colored, clickable points. A legend toggles visibility of the six incident categories, while scrolling zooms into boroughs and dragging pans across the map. The React app uses D3’s `geoMercator` and `geoPath` for borough rendering, with coordinates from topojson data and incident CSV files for each category.