Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu

✓ Published1🌍 Public
Aaishwarya8615
Last edited Oct 22, 2019
Created on Oct 9, 2019

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.

AI-generated description

An interactive color legend scatter plot with Menu for Life Expectancy Data.

This scatterplot takes required inputs from the data(like Health Expenditure, GDP, Income Composition from resources,Adult Mortality, Measles, Life Expectancy and Continent) and uses these as inputs to both X and Y axes with the help of a dropdown. This scatter plot would help in finding the correlation between these various inputs using Continent as the color legend

Note: I got some ideas about the interactive color legend from Prof. Curran's Interactive Color Legend

MIT Licensed

Similar vizzes

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
95% 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
92% 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
90% 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
89% match
Loading thumbnail…

Interactive Color Legends with informative Tooltips and dropdown menu

This interactive D3.js scatter plot explores correlations in global life expectancy data from a CSV file, with dropdown menus to select variables for the x- and y-axes. A color legend, using an ordinal scale with ten categories, encodes continents; clicking a legend item highlights that continent’s data points. Hovering over a circle displays a tooltip with the continent, year, and axis values. The visualization uses SVG rendering with animated transitions for circles as axes change, and includes D3's `scaleLog` for axes and `axisBottom`/`axisLeft` for ticks.

Yyyaaa1
88% match
Loading thumbnail…

Polished Scatter Plot with Menus_Life Expectancy Data

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.

Aaishwarya8615
88% match
Loading thumbnail…

Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

This interactive scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents using WHO life expectancy data. The visualization employs d3.scaleLinear for both axes and d3.scaleOrdinal for the color legend, which maps continents to distinct colors. Users can hover over legend items to highlight data points from specific continents while fading others to 20% opacity. The React-based SVG rendering includes custom axis components and color legend handling, with interactive hover states managed through React state and d3 event handlers.

Aaishwarya8615
86% match
Loading thumbnail…

Fork of Interactive Color Legends with informative Tooltips and dropdown menu

This interactive scatterplot explores correlations in life expectancy data, plotting user-selected variables on the X and Y axes via a dropdown menu. A color legend, encoded using `d3.scaleOrdinal` with `schemeCategory10`, distinguishes the continents. Clicking a legend item emphasizes data points from that region, while hovering reveals a tooltip with detailed information about each data point. The visualization uses D3 v5, SVG, and transitions to animate updates between different variable selections.

XXiaoyu Su
86% match