Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Ppragnyalipsa96@gmail.com
Last edited Oct 27, 2025
Created on Oct 26, 2025

This reusable scatter plot, built with D3 v7, visualizes traffic accident data by mapping vehicle counts against speed limits and driver experience. The chart uses color-coded symbols to distinguish weather conditions and road types, with legends and axis labels providing context. Implemented using Mike Bostock’s reusable chart pattern, the scatterPlot function exposes chainable setters for x, y, color, and symbol accessors. Two SVG instances render the same dataset with different configurations, while an optional index.js variant cycles the x-axis variable every three seconds to demonstrate the chart's reusability through D3’s selection.call method.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes traffic accident data, plotting speed limits against the number of vehicles involved, with points color-coded by weather condition and shaped by accident severity. The visualization cycles through different x-axis variables every three seconds, alternating between speed limit and driver experience. Built with D3.js v6, the example uses `scaleLinear` for axes, `scaleOrdinal` for categorical color and shape encoding, and `symbol()` for point markers. Data comes from a CSV file fetched via `csv()`, rendered as an SVG with axis labels, legend, and custom styling.

Ppragnyalipsa96@gmail.com
92% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

An animated scatter plot visualizes traffic accident data from a CSV file, cycling through four quantitative columns—Speed Limit, Number of Casualties, Number of Vehicles, and Accident Severity—as its axes every two seconds. The visualization uses a reusable D3 scatter plot module that dynamically updates the axis domains and circle positions based on the currently selected variables. Rendered as an SVG via D3 6.7.0, the chart employs `scaleLinear`, `axisLeft`, and `axisBottom` utilities to construct axes and scales, with a fixed y-axis origin and a radius of five pixels for each data point.

Ppragnyalipsa96@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a scatter plot of global road accidents from 2015 to 2020, with each circle representing a year’s accident count and colored by accident severity (green, orange, red for Low, Medium, High). The plot uses D3 v6 to load a CSV file via `d3.csv`, then builds an SVG with linear scales for the x- and y-axes (`d3.scaleLinear`), ordinal color mapping (`d3.scaleOrdinal`), and axis generators (`d3.axisBottom`, `d3.axisLeft`). Circles are appended and positioned using the scales, with a legend added manually alongside the axes. The data source is a global road accident CSV, and rendering is entirely SVG-based.

Llikhithakarunakarreddym@gmail.com
80% match
Loading thumbnail…

ICE

This animated scatter plot visualizes simulated traffic accident data, showing the relationship between the number of vehicles and two alternating x-axes: speed limit and driver experience. The reusable chart, built with D3 v7, uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.symbol` to render colored shapes representing weather and road type. Every three seconds, a `setInterval` callback switches the x-axis accessor, updating the title and re-rendering the SVG with smooth transitions. The data loads from a GitHub-hosted CSV file with numeric fields parsed for quantitative scaling.

Ppragnyalipsa96@gmail.com
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

Ssowjanya
79% match
Loading thumbnail…

Fork of reusable scatter plot

A reusable scatter plot cycles every two seconds between horsepower and miles-per-gallon axes for a 20-row car dataset. Built with D3 v6, it uses a reusable chart function with getter-setters for width, margin, and accessor functions. The SVG renders axes, labels, and steelblue circles with hover tooltips via appended title elements, while a setInterval reassigns xValue and yValue to flip the variables. The chart removes and recreates the SVG on each update, producing an animated axis-switching visualization.

119h61a05c9@cvsr.ac.in
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru
79% match