Skip to main content
SimilarExport ZIP
100%

Stacked Line: Deaths by Suicide, Firearm, Alcohol

✓ Published0🌍 Public
PPeter Maida
Last edited Sep 23, 2020
Created on Sep 22, 2020

This stacked bar visualization displays total deaths from suicide, firearms, and alcohol from 2003 to 2017, revealing an upward trend and consistently higher alcohol-related deaths than suicide, which exceed firearm deaths. It uses vega-lite-api with d3.csv to load data from a Gist-hosted GitHub raw file, rendering bars with encoded time, quantitative total, and nominal type fields. The visualization applies a custom color scheme and styled axes from a config object, with a React-based bundle and tooltip support via vega-tooltip.

AI-generated description

A visualization constructed using vega-lite-api that shows the number of male and female firearm deaths from 2003-2017.

The data shown here comes from Gist: Deaths by Suicide, Firearms, Alcohol. This visualization uses a simplified csv that is much larger in size. It should be refactored or removed.

Observations: We can see that the total number of deaths goes up over time. We can also see that there are consistently more deaths from alcohol than suicide, and suicide than firearms. More questions can be asked on the breakdown of these deaths.

MIT Licensed

Similar vizzes

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
88% 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
86% 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
86% match
Loading thumbnail…

Deaths by Suicide, Firearm, Alcohol

This visualization displays annual firearm suicide deaths from 2003 to 2017, grouped by sex, with each bar’s height representing death counts. The view uses the Vega-Lite API to encode the Year as a temporal field on the x-axis and Firearm Deaths as a quantitative field on the y-axis, while color distinguishes male and female data. The underlying data is loaded via d3.csv from a public Gist, and the chart is rendered as an SVG using vega-lite-api with vega-tooltip for interactive hover details. Bar opacity and size are fixed at 0.5 and 30 pixels, respectively.

PPeter Maida
85% 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
85% 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
82% 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
81% match
Loading thumbnail…

Line Graph with Interactive Color Legend

This interactive line graph tracks three categories of death rates—suicide, alcohol-related, and firearm deaths—across years using a single dataset from a gist. Three colored lines represent each cause, while an interactive color legend lets users hover to highlight one category and fade the others. The visualization is built with React and D3 v5, using SVG paths generated by `d3.line()` with `curveNatural` interpolation, and relies on React hooks like `useState` and `useCallback` to manage hover state and legend interactions.

PPeter Maida
79% match