Stylized Donut Chart Deaths

100%

Stylized Donut Chart Deaths

✓ Published1🌍 Public

Last edited Nov 4, 2020

Created on Nov 4, 2020

Forked from Stylized Donut Chart Population

This donut chart visualizes mortality data, breaking down firearm deaths, suicide deaths, and alcohol-related deaths for males and females. Three colored arcs represent each cause of death, with labels positioned around the circumference. The visualization uses React with D3’s `arc` generator to create the donut segments, calculating angles from proportional death counts. Data comes from a CSV file loaded via D3’s `csv` function, with values parsed and totaled by sex in the `Marks` component.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

All Donut Chart Deaths

This visualization presents five donut charts comparing death statistics across different demographic and cause-based groupings. The data categorizes deaths by firearm, suicide, and alcohol-related causes, with breakdowns by sex and cause type. Each donut chart displays proportional segments using color-coded arcs, constructed with D3’s `arc` function and `d3.v5`, while the React framework manages component rendering as SVG elements. Labels appear outside each arc, and the data originates from a CSV file covering mortality records.

PPeter Maida

94% match

Loading thumbnail…

Fork of Filtered Stacked Line Graph and Donut Graph of Deaths with Legend

This interactive React visualization displays mortality data for suicide, firearm, and alcohol-related deaths across demographic categories using stacked area charts and a donut graph. The main chart shows temporal trends filtered by sex, ethnicity, and age group, while a pie chart breaks down proportional death types. Built with D3 v5, it employs d3.area() with curveNatural for smooth transitions, d3.pie() and d3.arc() for the donut, and scales like scaleLinear and scaleOrdinal. Hover interactions on the color legend fade non-selected categories, with data sourced from a Gist CSV file.

DDINESH SAI BOPPANA

84% match

Loading thumbnail…

Filtered Stacked Line Graph and Donut Graph of Deaths with Legend

This interactive visualization shows death counts across multiple categories, comparing firearm, suicide, and alcohol-related deaths over time using a stacked area chart. The visualization includes dropdown menus for filtering by sex, ethnicity, age group, and death type, though the current version only fully implements the death type filter. A donut chart displays proportional breakdowns of the selected data. The visualization uses React with D3 v5, implementing custom SVG rendering with axes, color legends, and natural curve interpolation for the stacked areas.

PPeter Maida

84% match

Loading thumbnail…

Donut Example Re-imagined 2 Final Week

This example shows an interactive pie chart built with React and D3 v5 that visualizes firearm, suicide, and alcohol-related death data from a CSV file. The chart displays a semi-circular arc for the mouth, while the pie slices represent data grouped by sex, with distinct colors from the `d3.schemeCategory10` palette. The code uses `d3.pie()` for the arc generation and `d3.arc()` for rendering, with a button to trigger data transformations. The visualization runs entirely in SVG, with data loaded asynchronously via `d3.csv` and rendered through React hooks and the D3 selection API.

PPeter Maida

82% match

Loading thumbnail…

Stacked Line Graph of Deaths

This stacked line graph shows the number of suicide, alcohol-related, and firearm deaths in the United States by year, rendered as layered area paths. The visualization uses React with D3 scales and the `area()` and `curveNatural` generators from d3-shape to create smooth, cumulative curves. SVG paths are colored red, green, and blue to represent each death type, with a color legend providing interactivity through hover states. The data comes from a CSV loaded using `d3.csv`, and the chart includes axes generated by custom React components.

PPeter Maida

81% match

Loading thumbnail…

Line Graph of Deaths

This visualization uses three natural curves to show annual counts of suicide, alcohol-related, and firearm deaths in the United States. The data is loaded via `d3.csv` from a GitHub Gist, and the React app uses `d3.scaleLinear`, `d3.line`, and `d3.curveNatural` to render SVG paths for each death type. Interactive dropdown menus for sex, ethnicity, age group, and y-axis death metric are present, though the README notes the filter logic is incomplete, so the displayed lines currently aggregate all demographics. A color legend for sex is also included but does not affect the rendered marks.

PPeter Maida

80% match

Loading thumbnail…

Filtered Stacked Line Graph of Deaths with Legend

This interactive visualization displays the breakdown of firearm, suicide, and alcohol-related deaths over time for specific demographic groups. Users can filter by sex, ethnicity, and age group using dropdown menus, and hover over the legend to highlight individual death categories. The stacked area chart renders with React and D3 v5, using d3's `area()`, `curveNatural()`, and scale functions to generate smooth SVG paths. Data comes from a CSV hosted on GitHub Gist.

PPeter Maida

79% match

Loading thumbnail…

Stacked Line Graph of Deaths with Legend

A stacked area chart tracks Firearm, Suicide, and Alcohol-Related deaths over time for total U.S. demographics. Three layered paths render with `d3.area()` and `curveNatural`, each filled with distinct colors and paired with a hover-able `ColorLegend`. This interactive legend dims non-selected layers via opacity. Built with React and D3 v5 in SVG, the visualization uses `scaleLinear` for axes and reads data from a GitHub gist CSV, though filtering menus remain non-functional.

PPeter Maida

79% match