Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public
Llikhithakarunakarreddym@gmail.com
Last edited Oct 20, 2024
Created on Oct 20, 2024

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
84% 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
83% match
Loading thumbnail…

scatter plot-5320

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.

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

Fork of Hello VizHub

This visualization displays merged time-series data for COVID-19 cases and accident counts from two Google Drive-hosted CSV files, showing both trends as smooth lines in a single SVG chart. Using D3 v7’s `d3.csv` for data loading, `d3.timeParse` for date conversion, and `d3.scaleTime` with `d3.axisBottom` and `d3.axisLeft` for axes, the code merges records by date and draws lines with `d3.line` and `d3.curveMonotoneX`. The steelblue line represents COVID cases while the green line shows accidents, with data processed through a `Promise.all` merge and local ES6 modules.

CChandra Prakash Reddy Kalwakolu
80% match
Loading thumbnail…

Fork of vizhub scatterplot

This scatter plot displays car safety ratings against vehicle makes, with each circle representing a car model. The visualization uses a linear scale for safety ratings on the x-axis and a band scale for car makes on the y-axis, showing the distribution of safety scores across manufacturers. Built with D3.js v7, the chart loads CSV data from a GitHub-hosted dataset and renders as an SVG. The code applies a blue fill to circles, with a green hover effect highlighting individual data points, while axis labels and tick marks are styled using the Poppins font.

Mmadipadiga.raviteja@gmail.com
80% 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
80% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

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.

Ppragnyalipsa96@gmail.com
80% match