Skip to main content
SimilarExport ZIP
100%

v1 - Crash Graph

✓ Published1🌍 Public
Ssjpeno@wpi.edu
Last edited Oct 1, 2024
Created on Oct 1, 2024
Forked from Scatter Plot

This bar chart visualizes the monthly frequency of traffic incidents in a small crash dataset, distinguishing incident types (mv, ped, bike) through the use of a categorical mode field. The chart displays the total number of crashes per month, with bars rendered using d3.bin and d3.timeMonth to aggregate dates from a CSV file. The visualization employs d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.timeParse to handle timestamps with UTC offsets. The gray background and steelblue bars highlight the temporal distribution of incidents.

AI-generated description

A simple scatter plot with D3 showing the [Covid Data Set ].

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

Loading thumbnail…

v2 - Crash Graph

This line chart displays the monthly count of traffic crashes from a CSV dataset, revealing seasonality patterns in the data. The visualization bins crash records by month using d3.bin with timeMonth thresholds, then renders the aggregated counts as a steelblue line with circular point markers. The x-axis uses d3.scaleTime with a monthly time format label, while the y-axis uses d3.scaleLinear to show the number of crashes. The chart includes gray background rectangle, axis labels, and explicitly positioned tick marks created through d3.axisBottom and d3.axisLeft.

Ssjpeno@wpi.edu
90% match
Loading thumbnail…

v4 - Crash Graph

This line graph visualizes the seasonality of crash data from a CSV file, displaying monthly crash counts for three transportation modes: motor vehicles, pedestrians, and bicycles. The visualization uses D3.js functions including `timeMonth.bin()` for grouping data, `scaleTime` and `scaleLinear` for scaling, and `line()` for generating the line paths. Each mode is color-coded using `scaleOrdinal` with `schemeCategory10`, and the chart includes interactive toggling for showing or hiding each line.

Ssjpeno@wpi.edu
89% match
Loading thumbnail…

v5 - Crash Graph

This line chart displays the seasonality of crash counts over time, with data from the smallcrashcopy.csv file. It uses d3.bin and timeMonth.range to aggregate crashes by month, then plots them with d3.line and scales from d3.scaleTime and d3.scaleLinear. The visualization supports toggling visibility for three mode types (mv, ped, bike) via checkboxes, which recomputes the total counts and dynamically updates the y-axis with axisLeft. A gray background rectangle and labeled axes for month and crash counts frame the chart.

Ssjpeno@wpi.edu
88% match
Loading thumbnail…

v6 - Crash Graph

This visualization is a line graph showing the number of crashes over time, binned by month to reveal seasonality. It plots the total crash count against monthly timestamps, with interactive checkboxes that let the user toggle the visibility of three crash types: motor vehicle, pedestrian, and bicycle. The chart dynamically updates the line and y-axis scale based on the selection, and data points are highlighted on hover. The code uses d3’s `scaleTime`, `scaleLinear`, `bin`, and `line` APIs to process and render the data from a CSV file.

Ssjpeno@wpi.edu
88% match
Loading thumbnail…

v3 - Crash Graph

This line graph shows the seasonality of traffic crash counts over time from a CSV dataset. The chart bins incidents by month, plots them as a continuous line, and color-codes line segments by season (winter, spring, summer, fall) with an accompanying legend. Built using D3’s `line`, `scaleTime`, `bin`, and `timeMonth` APIs, the visualization aggregates crash timestamps to reveal monthly trends in the data.

Ssjpeno@wpi.edu
87% match
Loading thumbnail…

Boston Crashes Project

This interactive visualization explores nine years of Boston crash data from the city’s Vision Zero program, using a geographic map and a time-series line chart. The map plots individual crash locations as colored points by crash type, filtered via checkboxes, and is rendered with D3’s `d3.geoPath` and parsed GeoJSON. The line chart aggregates monthly crash counts, with colored seasonal bands and toggleable lines for each crash type, implemented using D3 scales, axes, and `d3.line`. Both views load data directly from CSV and GeoJSON files, ensuring scalable performance.

Ssjpeno@wpi.edu
75% 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
75% match
Loading thumbnail…

Boston Crashes

This interactive visualization combines a geographic map of Boston with crash data from the city’s Vision Zero program, plotting each incident as a colored circle based on mode type—red for motor vehicles, blue for pedestrians, and green for bicycles. A toggleable time series chart below aggregates monthly crash counts using `d3.bin` and `timeMonth`, while checkboxes allow filtering by mode to update both views. The map uses `d3.geoMercator` and `d3.geoPath` to render Boston neighborhood boundaries from a GeoJSON file, with crash locations projected via longitude and latitude coordinates.

Ssjpeno@wpi.edu
74% match