Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published1🌍 Public
PPeter Maida
Last edited Oct 13, 2020
Created on Oct 13, 2020

This scatter plot visualizes death statistics by year and cause, with each point colored by sex using a red and blue ordinal scale. The React-based component uses D3 v5 scales for positioning axes and circles, rendering as SVG. A color legend on the right explains the sex encoding, while dropdown menus allow selecting different death metrics. The current implementation filters data by age group, though the README notes the sex, ethnicity, and age menus are not fully functional. Data is loaded from a CSV file via D3’s CSV parser.

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.

Currently the Sex, Ethnicity, and Age Group menus don't filter. The current graph shows male points as blue and female points as red. The various points in each year are the different ethnicities. The age group currently isn't being used and all age groups are being showed.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

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

Legend

This interactive visualization explores death statistics by cause and demographic categories, displaying stacked area charts of suicide, firearm, and alcohol-related deaths over time. The interface includes dropdown menus for filtering by sex, ethnicity, age group, and specific death types, with a color legend that supports hovering to highlight or fade individual categories. Built with React and D3 v5, it uses d3.area, d3.curveNatural, and d3.scaleOrdinal to render SVG paths and pie charts. Data comes from a Gist CSV file, though several filtering options remain non-functional in the current version.

SSoorena
82% match
Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu for Mortality

This interactive scatter plot visualizes correlations between life expectancy, infant deaths, and adult mortality across continents. Using React and D3 v5, the visualization includes dropdown menus to switch the x- and y-axis attributes, while continent data drives the ordinal color scale for the legend. Circle sizes encode GDP, and tooltips display life expectancy values. The color legend supports hover interaction with fade effects for highlighting specific continents, and the data originates from a CSV file loaded via d3.csv.

Aaishwarya8615
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
80% match
Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu

This interactive scatter plot visualizes life expectancy data, allowing users to explore correlations between different health and economic attributes across continents. A pair of dropdown menus controls which variables appear on the X and Y axes, while a color legend enables filtering by continent with hover highlighting. The visualization uses D3 scales and SVG rendering with React components, including custom axes, marks, and a color legend that responds to mouse events.

Aaishwarya8615
79% 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
79% match