Line Chart with Multiple Lines

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.

77% match

6. Interactive Components

This interactive map of New York City visualizes 2021 car collision statistics by borough, with color encoding for total accidents and hover effects revealing detailed metrics like severe case rates and leading causes. The visualization uses D3 v6 (with legacy v3 and v4 scripts) to render SVG paths from a GeoJSON file, employing a Mercator projection via `d3.geo` and `d3.geoPath`. A sequential color scale (`d3.scaleSequential`) maps collision counts, while mouseover events trigger text updates and dynamic styling changes. The design includes hover-triggered highlighting, animated text transitions, and a color legend axis.

YYuren Dong

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan

Line Chart with Multiple Lines

Ssafdarawan

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.

Interactive NYC Borough map

This interactive map of New York City’s five boroughs visualizes traffic crash statistics, distinguishing injury and fatality counts for cyclists, pedestrians, and motorists. A legend allows users to toggle six incident categories on and off, revealing colored point markers for each crash location. The map renders boroughs as colored SVG paths using `d3.geoMercator` and `d3.geoPath`, with data loaded from CSV files via `fetch`. Hovering over a borough displays aggregated crash counts from `CrashByBorough.csv` in a tooltip.

Interactive NYC Borough map