Skip to main content
SimilarExport ZIP
100%

Smoothed Interactive NYC Crash Plot with React & D3

✓ Published1🌍 Public
JJose Morales
Last edited Nov 6, 2025
Created on Nov 6, 2025

This example shows a smoothed time-series line chart of daily motor vehicle collisions in New York City, with hover interactions revealing exact dates and crash counts. The React app loads CSV data, applies a 50-day moving average to the raw counts, and passes the result to a D3 visualization built on `scaleTime`, `scaleLinear`, and `line`. Interactive tooltips and a highlight circle appear when users hover over transparent overlay points, using `timeFormat` for date labels. The SVG is rendered via React’s `createElement` and updated imperatively with D3’s `select` and `enter` selections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Aligned Smoothed Interactive NYC Crash Plot with React & D3

This example shows the smoothed daily count of motor vehicle collisions in New York City over time as a line chart. The data, loaded from a CSV file, includes crash counts, injuries, and fatalities. The visualization applies a moving average with a window size of 50 to smooth the raw daily counts, revealing broader trends. Built with React and D3 v7, the chart includes interactive tooltips that appear when hovering over data points, displaying the exact date and crash value. The visualization handles window resizing and uses D3 scales, axes, and line generators to render the plot.

JJose Morales
95% match
Loading thumbnail…

Interactive NYC Crash Plot with React & D3

This example shows the daily number of motor vehicle collisions in New York City from July 2016 through January 2017 as a time-series line chart. The visualization, built with React and D3 v7, uses `d3.scaleTime` and `d3.scaleLinear` to map dates and crash counts, with `d3.line` generating the path. Hovering over transparent circles reveals a tooltip displaying the exact date and crash count, using `d3.timeFormat` for date labeling. The data comes from a CSV file containing daily crash totals.

JJose Morales
93% match
Loading thumbnail…

Aligned Interactive NYC Crash Plot with React & D3

This visualization displays daily motor vehicle collision counts in New York City from July 2016 to January 2017 as a line chart. React manages the component lifecycle and state, loading data from a CSV file into the application, while D3 v7 handles the rendering through svg, scaleTime, scaleLinear, line, axisBottom, axisLeft, and timeFormat. The chart includes a tooltip that appears on hover, showing the exact date and crash count for each data point.

JJose Morales
90% match
Loading thumbnail…

NYC Crash Bar Chart Interactive Legend with React & D3

This stacked bar chart displays NYC collision data by hour, breaking down each bar into injuries, deaths, and other crashes. Hovering over legend items highlights the corresponding stack with a black stroke and fades others to 20% opacity. The visualization uses React for state management and D3 v7 for rendering, including `d3.stack`, `d3.scaleLinear`, and `d3.axisBottom`. It loads hourly crash statistics from a CSV file via `d3.csv` and handles window resizing with dynamic SVG dimensions.

JJose Morales
85% match
Loading thumbnail…

NYC Crash Bar Chart with React & D3

This bar chart visualizes the number of vehicle collisions in New York City across the 24 hours of a day, breaking down each hour's total into stacked segments for injuries, deaths, and other crashes. The chart uses React to manage the SVG and window resizing, while D3's `scaleLinear`, `axisBottom`, and `stack` APIs handle the data scaling, axes, and stacked bar construction. Data is loaded from a local CSV file.

JJose Morales
84% match
Loading thumbnail…

NYC Crash Normalized Bar Chart with React & D3

This stacked bar chart displays NYC motor vehicle crash data by hour, showing the proportion of injuries, fatalities, and all other crashes normalized per collision. The visualization uses d3.stack to create stacked bars, with React managing the responsive SVG container and d3.scaleLinear, d3.axisBottom, and d3.axisLeft constructing the axes. Data loads from a CSV file, and percentages are computed by dividing injury and fatality counts by total crashes. A color-coded legend identifies the three stacked categories, while a custom tick format converts numeric hours into AM/PM labels.

JJose Morales
83% match
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
82% match
Loading thumbnail…

CrashData

This interactive map visualizes the distribution of motor-vehicle collisions across New York City, with each crash represented as a point on a geographic grid. The code uses D3.js's `d3.geoPath` to render city boundaries and `d3.select` with a custom color scale to encode crash density by neighborhood. Data is loaded from a local CSV via `d3.csv`, and the rendering relies on the Canvas API for efficient point plotting. A brush interaction, implemented through `d3.brush`, allows users to filter collisions by time of day or day of week, dynamically updating the displayed points.

DDouglas mochama
81% match