NYC Crashes Interactive Sparkline

Fork of Interactive Sparkline

This interactive area chart visualizes monthly car crash counts in New York City from July 2012 through September 2025, using data from a local CSV file. A purple line and filled area show the trend, while hovering over the chart displays a vertical guide line, a highlighted point, and the exact crash count and month in a large text label. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line, d3.area, and d3.bisector to map data, render shapes, and locate hovered points, with d3.pointer tracking mouse position.

93% match

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.

87% match

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

86% match

Smoothed Interactive NYC Crash Plot with React & D3

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.

85% match

NYC Crash Plot with React & D3

This line chart tracks the daily number of motor vehicle collisions in New York City from July 2016 through January 2017, revealing fluctuations that dip on holidays and spike on certain weekdays. The visualization is built as a React component that loads CSV data and passes it to a D3 rendering function, which uses `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to draw the plot with labeled axes.

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.

NYC Interactive Crash Bar Chart with React & D3

This interactive bar chart visualizes the distribution of vehicle collisions across a 24-hour day in New York City, stacking counts of injuries, deaths, and other crashes for each hour. Built with React 19 and D3 v7, it uses `d3.stack` to create layered bars and `d3.scaleLinear` for axes. Hovering a bar triggers D3 mouse events that dim non-hovered bars and display a tooltip with hourly breakdowns. The chart resizes responsively by recalculating SVG dimensions, and loads data from an external CSV file.

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