Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Nov 25, 2021

Created on Oct 6, 2021

Forked from Polished 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.

AI-generated description

A scatter plot of Suicide Rates Dataser. Inspierd from Datavis 2020 Episode 32 - Polished Scatter Plot with Menus

MIT Licensed

Similar vizzes

Loading thumbnail…

World Suicides Scatter Plot with Menus

This interactive scatter plot explores global suicide rates, allowing users to select which categorical or quantitative attributes to map to the x- and y-axes via dropdown menus. The visualization uses the D3.js v6 library, employing `selection.join` for smooth enter, update, and exit transitions when attributes change. Data is loaded as CSV from a GitHub gist and rendered into an SVG, with circles animated between positions over a one-second transition. The chart also dynamically switches between `scalePoint` for categorical data and `scaleLinear` for quantitative data, updating the corresponding axes.

AAndre J Denais

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

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30

85% match

Loading thumbnail…

Scatter Plot for Covid data with Menus

A React-based scatter plot visualizes COVID-19 metrics from a May 2020 dataset, with dropdown menus controlling which two attributes (e.g., new cases, total deaths) map to the x- and y-axes. Points are colored by continent using a d3.scaleOrdinal color scale and a custom color legend. Built with d3.v5 for scales, axes, and SVG rendering, the chart uses React hooks (useState, useEffect) to manage state and load data via d3.csv, with interactive axes formatted using d3.format.

Mmanasishrotri

83% match

Loading thumbnail…

Line Graph 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.

PPeter Maida

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…

Cars Scatter Plot with Menu

This interactive scatter plot displays the relationship between suicides and population across multiple countries, with each origin represented by a distinct color. Users can change both the x- and y-axis variables via dropdown menus built with the custom dropdownMenu function. The visualization uses D3 v5’s scaleLinear, scaleOrdinal, axisBottom, and axisLeft to render SVG elements, with a colorLegend module for interactive country filtering by clicking legend items. The data comes from a CSV file loaded via d3.csv, and circle opacity adjusts to highlight or dim points based on the selected country.

Wwishcsdev

82% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino

82% match