Line Graph with Menus

100%

Line Graph with Menus

✓ Published1🌍 Public

Last edited Oct 7, 2020

Created on Oct 7, 2020

Forked from Polished Scatter Plot with Menus

A line graph displays mortality counts across multiple demographic categories, allowing users to explore relationships between variables. Interactive dropdown menus let viewers select which attributes appear on the X and Y axes, changing the visualization dynamically. Built with React and D3, the chart uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for menu controls. Circles represent individual data points from a Gist dataset covering firearm, suicide, and alcohol-related deaths.

AI-generated description

A visualization constructed using React that shows the number of various types of deaths by demographics.

The data shown here comes from Gist: Deaths by Suicide, Firearms, Alcohol.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

PPeter Maida

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

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

83% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the Suicide Rates Dataset, sourced from a public GitHub gist, by selecting different numerical attributes for both the x- and y-axes using ReactDropdown menus. The visualization renders points as SVG circles with tooltips, and axes are built with custom React components using d3.scaleLinear and d3.extent for scaling. Users can compare relationships between variables such as suicide counts, GDP, year, and per-capita GDP.

Mmnalk

83% match

Loading thumbnail…

Scatter Plot with Death Menu

This scatter plot visualizes death statistics across demographic categories, with blue and red circles representing male and female subjects respectively across years. The visualization uses React with d3.v5 scales to map Year on the x-axis and death counts on the y-axis, rendered as SVG elements. Interactive dropdown menus allow selection of sex, ethnicity, and age group filters, though only the age group filter currently functions. Data comes from a Gist CSV file containing firearm, suicide, and alcohol-related death counts.

PPeter Maida

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

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

81% match

Loading thumbnail…

Scatter/Line Plot with Menus

A scatter/line plot displays deaths and death percentages of miners over time, with two dropdown menus to switch the y-axis variable. The visualization uses D3 v5 with SVG rendering and animated transitions, as circles grow and reposition over two seconds when the menu selection changes. The chart employs D3 scales, axes, a line generator, and a custom dropdown menu component built with HTML select elements. Data is loaded from a CSV file hosted on GitHub, with years parsed as dates and numerical values converted to numbers.

DDjPendej0

81% match