Skip to main content
SimilarExport ZIP
100%

NY Car Crashes Loading Data

✓ Published0🌍 Public
JJose Morales
Last edited Sep 3, 2025
Created on Sep 3, 2025
Forked from 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()`.

AI-generated description

Car 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 sedans involved in crashes. I selected only the first 500 entries, as there were many 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 car involved (categorical attribute)
  • VEHICLE_MODEL – The model of the car involved (categorical attribute)
  • VEHICLE_DAMAGE – Location on the vehicle where most of the damage occurred (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 Motorcycle Crashes 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.

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

Fork of Loading Data - Cars Data

This example displays raw car data loaded from a CSV file by parsing it with D3’s `csvParse` and rendering it as a JSON string using `JSON.stringify`. The visualization shows the dataset’s structure, including categorical attributes like company and fuel type, alongside quantitative fields such as horsepower, price, and top speed. The code uses `fetch` to retrieve the CSV, then maps each row without cleaning the text-based numeric values, preserving them as strings. D3 selections manage the `<pre>` element that displays the parsed data.

Rrpkupfer@wpi.edu
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…

Loading Data

This example demonstrates a simple unidirectional data-flow pattern where the state is managed centrally and passed to a visualization function. The visualization renders the loaded data as a formatted JSON string inside a `<pre>` element, initially displaying a "LOADING" placeholder. Using the `csvParse` method from D3 v7, it fetches a CSV file from a GitHub gist containing NY State Assembly data, parses it, and updates the state to trigger a re-render. The code uses `select` and `join` to bind the data to the DOM, showing a clean separation between state management and rendering.

Llupica.matthew@gmail.com
76% match
Loading thumbnail…

loading_data_NH_2

This example demonstrates asynchronous data loading with D3 v7, displaying the contents of a CSV file as formatted JSON text in a pre element. It uses `fetch()` to retrieve `data.csv`, `csvParse` from D3 to convert the raw CSV string into an array of objects, and then iterates through the parsed data to coerce the numeric columns (`sepal_length`, `sepal_width`, `petal_length`, `petal_width`) from strings to numbers. The visualization implements a unidirectional data flow where a `setState` function updates the application state, triggering a re-render that initially shows "LOADING" before the fetched data appears.

NNavak94
75% match
Loading thumbnail…

Vehicles

This example demonstrates how to load and parse a CSV dataset using D3 v7, displaying a summary of the data’s size, row count, and column count alongside a styled preview table of the first five rows. The code uses `d3.csv` to fetch the data from a GitHub gist, then dynamically builds an HTML table with `d3.select` and `join`. The table features sticky headers, zebra striping, and hover effects with an accent bar, all styled via external CSS. A loading message and error handling are included.

Ccharchana0527@gmail.com
75% 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
75% match