Skip to main content
SimilarExport ZIP
100%

scatter plot-5320

✓ Published0🌍 Public
Rrajkodavati7@gmail.com
Last edited Apr 27, 2024
Created on Apr 27, 2024
Forked from bar

This scatter plot visualizes road accident data, showing the number of casualties for each road type. The code loads a CSV file from a Gist using `d3.text` and parses it with `d3.csvParse`. It uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering circles with a fill color of `#69b3a2`. The SVG output includes rotated x-axis labels via `d3.axisBottom`, and the plot is generated with D3 v7.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

RoadAccidents

This scatterplot visualizes road accident data from a CSV file, plotting the number of vehicles involved against the number of casualties for each accident. Dots are colored by accident severity using CSS classes. The visualization uses D3.js v3, specifically `d3.csv` for data loading, `d3.scaleLinear` for x and y axes, and `d3.axisBottom` and `d3.axisLeft` for rendering those axes. Circles are appended to an SVG container via `g.selectAll` data joins.

Bbobbymeyermsis@gmail.com
89% 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
83% 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
83% match
Loading thumbnail…

Accident Data

This scatter plot visualizes accident data, encoding accident count on the x-axis and categorical severity (High, Medium, Low) on the y-axis using numeric mapping (3, 2, 1). The SVG rendering uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` to map severity levels to red, orange, and green fills. The chart loads data from a local `accidents.csv` file, with custom axis labels for severity and count.

Llikhithakarunakarreddym@gmail.com
83% match
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
82% match
Loading thumbnail…

scatter plot

This scatter plot displays the relationship between accident dates and the number of casualties, with time on the x-axis and casualty counts on the y-axis. The visualization uses D3.js v7 to render an SVG chart, employing `d3.scaleTime()` and `d3.scaleLinear()` for axis scaling, `d3.line()` to generate the path connecting data points, and `d3.axisBottom()` and `d3.axisLeft()` for labeled axes. Sample accident data is embedded directly in the script, with dates parsed using `d3.timeParse()` for proper time-based positioning.

JJames Cruz
80% match
Loading thumbnail…

ICE7

This visualization displays a scatter plot of traffic accident data, comparing Speed_Limit, Number_of_Casualties, Number_of_Vehicles, and Accident_Severity. The plot animates every two seconds, cycling through different columns on the x-axis while keeping Number_of_Casualties fixed on the y-axis, with axis labels updating dynamically. Using the d3.v6 library, the code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom reusable `scatterPlot` module for SVG rendering. Data is loaded from a GitHub-hosted CSV file via `csv` and parsed with custom row handlers.

Ppragnyalipsa96@gmail.com
78% match
Loading thumbnail…

Traffic Data Scatter Plot

This scatter plot visualizes traffic data, showing the number of vehicles against the hour of day, with each point’s radius and color encoding the percentage of heavy vehicles. It loads CSV data from GitHub and renders circles in an SVG using D3 v6, employing `scaleLinear` for axes, `scaleSqrt` for circle sizing, and `scaleOrdinal` with `schemeCategory10` for color mapping. Axes are added via `axisLeft` and `axisBottom`.

JJayanthKumarkoni
77% match