Fork of Interactive Sparkline

100%

Fork of Interactive Sparkline

✓ Published0🌍 Public

Last edited Nov 6, 2025

Created on Nov 6, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% 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

85% match

Loading thumbnail…

Sparkline Crash data

This interactive sparkline chart displays monthly crash counts from 2012 to 2025, rendered as a filled area line graph. The visualization presents the full time series and highlights the monthly value on hover, updating a large text label with the exact date and crash count. Built with React and D3.js, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.bisector` to map data, draw the chart, and handle pointer interactions. The data originates from a local CSV file.

JJose Morales

84% match

Loading thumbnail…

Aligned Interactive NYC Crash Plot with React & D3

This visualization displays daily motor vehicle collision counts in New York City from July 2016 to January 2017 as a line chart. React manages the component lifecycle and state, loading data from a CSV file into the application, while D3 v7 handles the rendering through svg, scaleTime, scaleLinear, line, axisBottom, axisLeft, and timeFormat. The chart includes a tooltip that appears on hover, showing the exact date and crash count for each data point.

JJose Morales

83% match

Loading thumbnail…

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.

JJose Morales

83% match

Loading thumbnail…

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.

JJose Morales

82% match

Loading thumbnail…

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.

JJose Morales

82% 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

82% match