Skip to main content
SimilarExport ZIP
100%

NY Motorcycle Crashes Loading Data

✓ Published0🌍 Public
JJose Morales
Last edited Sep 3, 2025
Created on Sep 3, 2025
Forked from Loading Data

This example demonstrates loading and displaying a subset of NYC motorcycle crash data. The visualization shows the raw dataset as a JSON-formatted list of objects, with each row containing attributes like vehicle make, model, driver sex, and contributing factors. Initially, the view displays “LOADING” before fetching the CSV file and parsing it using `d3.csvParse`. Once loaded, the code converts the `UNIQUE_ID` field to numeric values and re-renders the data via `d3.select` and `join` operations.

AI-generated description

Motorcycle Crash Subset Dataset

This dataset is a subset of the “Motor Vehicle Collisions – Vehicles” dataset available from NYC OpenData.

To create this subset, I filtered the full dataset (approximately 4.42 million rows) to include only motorcycles involved in crashes. I also removed any entries without a listed vehicle model, which reduced the dataset to 223 entries.

While the original dataset contains many more columns, the following are included in this subset:

  • UNIQUE_ID – A unique identifier generated by the NYC record system (sequential ordinal attribute)
  • CRASH_DATE – The date of the crash (temporal attribute)
  • VEHICLE_MAKE – The manufacturer of the motorcycle involved (categorical attribute)
  • VEHICLE_MODEL – The model of the motorcycle involved (categorical attribute)
  • DRIVER_SEX – The gender of the driver (categorical attribute)
  • CONTRIBUTING_FACTOR_1 – A primary factor contributing to the crash (categorical attribute)
  • CONTRIBUTING_FACTOR_2 – A secondary factor contributing to the crash (categorical attribute)
MIT Licensed

Similar vizzes

Loading thumbnail…

NY Car Crashes Loading Data

This example demonstrates asynchronous data loading in D3 v7. It fetches a CSV file containing 500 records from NYC OpenData’s Motor Vehicle Collisions – Vehicles dataset, filtered to sedans. The visualization initially shows a loading state, then parses the CSV with `d3.csvParse` and converts the UNIQUE_ID field to numeric values using a `for` loop. The processed data is stored in a state object and displayed as a JSON-formatted text preview inside a `<pre>` element via `d3.select` and `.text()`.

JJose Morales
87% 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
79% 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
77% match
Loading thumbnail…

NYC Crashes Interactive Sparkline

This interactive sparkline visualizes monthly motor vehicle crashes in New York City from 2012 to 2025, using data from a CSV file. A thick purple line with a light area fill shows the trend, while hovering reveals a tooltip displaying the exact crash count and month via a bisector-based lookup. Built with D3.js, it uses `scaleTime`, `scaleLinear`, `line`, and `area` generators, plus `pointer` events for interactive hover feedback on the SVG canvas.

JJose Morales
77% match
Loading thumbnail…

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.

JJose Morales
76% match
Loading thumbnail…

NYC Borough Crash Data

This stacked bar chart visualizes NYC collision data across the hours of the day. Each bar is segmented by the proportion of crashes resulting in injuries, deaths, and other outcomes, as derived from a CSV loaded with d3.csv. The visualization uses React hooks (useRef, useEffect, useState) to manage responsive dimensions and re-render the viz function on window resize. It employs d3.scaleLinear for axes, d3.stack for the stacked segments, and d3.axisBottom/axisLeft with custom time-based tick formatting for the hour labels.

JJose Morales
76% 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
76% 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
75% match