Fork of pie chart

100%

Fork of pie chart

✓ Published1🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This D3.js example visualizes traffic accident distribution by weather condition as an interactive pie chart. It loads CSV data from a GitHub gist, aggregates accident counts per weather category using `d3.rollups`, and renders SVG pie slices with labels and a legend. The chart uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and a reusable `pieChart` function pattern with configurable width, height, and data properties. The visualization displays weather types directly on slices and provides a side legend with count values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart

A pie chart displays the distribution of traffic accidents by weather condition, using categorized data from a CSV file. The visualization groups records by weather type—such as Clear, Rainy, or Foggy—and sizes each slice by the count of accidents in that category. It renders in an SVG canvas with `d3.pie` and `d3.arc` generators, colors slices with `d3.scaleOrdinal`, and labels each segment with its weather name. The chart also includes a bold title positioned above the plot, generated through a reusable `pieChart` function.

Ppragnyalipsa96@gmail.com

94% 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…

Pie Chart Visualization

This pie chart visualizes the distribution of accident severity categories—Fatal (20), Serious (50), and Slight (30)—using a simple three-slice SVG. The code uses d3.pie() to compute arc angles from the data, d3.arc() to generate path geometries, and d3.schemeCategory10 for slice colors. Labels are placed using arc.centroid, with each slice having a clickable cursor style. The chart renders in a React-friendly static HTML page with D3 v7 loaded directly from the CDN.

JJames Cruz

81% match

Loading thumbnail…

Fork of ICE-7 line chart

This line chart visualizes the number of traffic accidents by weather condition, using data from a CSV file loaded via d3.csv. The chart displays a monotone curve with circular markers for each weather category, along with an ordinal x-axis and linear y-axis. It is built with D3 v7, using scaleBand, scaleLinear, and d3.line with curveMonotoneX, rendered as SVG. The visualization includes rotated tick labels and a legend listing each weather type with its accident count.

Ppragnyal.mishra@gmail.com

80% match

Loading thumbnail…

Fork of Accident Data ICE-7 Q2

This example shows a pie chart of accident costs from major U.S. states, with each slice colored and paired with a legend listing the state name and its corresponding cost value. The visualization loads CSV data from a GitHub gist using the `d3.csv` method, then computes the pie layout with `d3.pie` and renders the segments as SVG paths using `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and legend labels are formatted with `d3.format`. The SVG is selected and manipulated through D3 v5, with styling defined in an external stylesheet.

Aarcothanmukha

80% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart displays the number of traffic accidents for each weather condition, with a smooth blue area and black outline. The visualization is built with D3 v5, using `scalePoint` for the categorical weather axis, `scaleLinear` for the count axis, and `curveBasis` to smooth both the `line` and `area` generators. Data is loaded from a CSV file hosted on GitHub and aggregated client-side by counting occurrences per weather type. The SVG output includes labeled axes with grid lines, though the x-axis labels for the longest weather condition names may be truncated.

Ppragnyal.mishra@gmail.com

80% match

Loading thumbnail…

myViz

This pie chart displays the distribution of accidents by type, with each slice labeled directly on the visualization. The code loads CSV data from a GitHub gist, uses `d3.rollup` to count accidents per category, and `d3.pie()` to generate the arc layout. Slices are rendered as SVG paths via `d3.arc()`, colored with `d3.scaleOrdinal` and `d3.schemeCategory10`, while labels are positioned using `arc.centroid()`. The chart is built with D3 v6 and rendered entirely in SVG.

Vveeramallivaishnavi3@gmail.com

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

80% match