Polished Scatter Plot with Menus_Life Expectancy Data

100%

Polished Scatter Plot with Menus_Life Expectancy Data

✓ Published0🌍 Public

Last edited Oct 9, 2019

Created on Sep 29, 2019

Forked from Polished Scatter Plot with Menus

This interactive scatter plot explores relationships among four attributes—life expectancy, GDP, year, and schooling—from a CSV dataset loaded via d3.csv. Two dropdown menus, built with ReactDropdown, independently control the X and Y axes, allowing users to compare any pair of variables. The visualization uses React state to manage selections and renders SVG circles with d3.scaleLinear axes. Data points are colored teal and include SVG tooltips displaying formatted X values. The layout features labeled axes and a fixed width, with styling from the Poppins font.

AI-generated description

A polished scatter plot with menu's of Life Epectancy Data.

This scatterplot takes 4 inputs from the data which are "Life Expectancy", "GDP", "Year" and "Schooling" and uses these as inputs to both X and Y axes with the help of a dropdown. The relationship between each of these factors can be seen with the help of this.

Note: This polished scatterplot is originally forked from Prof Curran's work Polished Scatter Plot with Menus

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Scatter Plot with Color Menu for Life Expectancy Data

This interactive scatter plot explores correlations in life expectancy data from a CSV file hosted on GitHub. Users select different attributes for the X and Y axes, as well as a color category, through three dropdown menus. The visualization uses D3 v5 with SVG rendering and animation, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, `axisBottom` and `axisLeft` for ticks, and `.transition()` to animate point movement. A custom color legend displays category labels alongside the plot.

Aaishwarya8615

85% match

Loading thumbnail…

Interactive Color Legends with informative Tooltips and dropdown menu

This interactive scatterplot visualizes life expectancy data, allowing users to explore correlations between variables such as HIV/AIDS, GDP, BMI, and adult mortality. A dropdown menu selects the X and Y axes, while a color legend differentiates data points by continent. Clicking a legend entry highlights that continent, and hovering over a data point reveals a tooltip with the country, year, and axis values. Built with d3.v5, it uses SVG and animated transitions, loading data from a CSV file.

Aaishwarya8615

82% match

Loading thumbnail…

Interactive Color Legend Scatter Plot for Health Expenditure Vs Life Expectancy

This interactive scatter plot visualizes the relationship between health expenditure and life expectancy across countries, with continents encoded by color. A dropdown menu allows users to switch which attribute maps to the X and Y axes, while hovering over the color legend highlights points from that continent and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered via the `Marks` component. Data comes from a CSV file loaded with `d3.csv`.

Aaishwarya8615

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

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

81% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the relationship between three numeric attributes (age, bmi, and charges) from the insure.csv dataset. Two dropdown menus let users select which attribute appears on the X and Y axes, and the axes labels update accordingly. The visualization uses D3 v5 scaleLinear and extent functions to compute domains, maps data to SVG circles, and renders axes with custom tick formatting. The React app leverages the useData hook to asynchronously load and parse the CSV data via D3's csv function.

SSamir Nandardhane

81% match