Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

✓ Published2🌍 Public
Aaishwarya8615
Last edited Oct 22, 2019
Created on Oct 16, 2019

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.

AI-generated description

An Interactive Color Legend Scatter plot for Life Expectancy Data.

This scatterplot takes required inputs from the data(like Alcohol Consumption, Life Expectancy and Continent) and uses these as inputs to both X and Y axes with the help of an Interactive Color Legend using 'Continent' as input. This scatter plot would help in determining the relationship between Alcohol Consumption and Life Expectancy in various continents.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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 data from a CSV file. Points are colored by continent, with an interactive color legend that highlights one continent at a time while fading others. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering, with mouse events on the `ColorLegend` component triggering the hover filtering.

Aaniosindustries
94% match
Loading thumbnail…

Scatterplot to determine Alcohol consumption Vs Life Expectancy

This scatterplot visualizes the relationship between alcohol consumption and life expectancy across countries, with each point colored by continent. Built with React and D3 v5, the visualization renders as an SVG and includes interactive highlighting in the color legend that filters the data points. The CSV data is loaded from a GitHub gist using D3’s `csv` function. Axis tick marks, labels, and the legend are generated by custom React components using `scaleLinear` and `scaleOrdinal` scales.

SSharankumar02
92% match
Loading thumbnail…

Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

The visualization displays per-year relationships between alcohol consumption and life expectancy as an interactive bar chart, colored by year. A color legend allows viewers to filter and highlight specific years, while a tooltip reports life expectancy and alcohol consumption for the hovered bar. Built with D3.js, the chart uses `d3.scale.linear` for the x-axis, `d3.scale.ordinal` for the y-axis, and `d3.legend.color` for the legend. The data comes from a CSV file containing life expectancy statistics across continents.

Aaishwarya8615
89% match
Loading thumbnail…

Interactive Legend Bar chart for Alcohol Vs Life Expectancy

This interactive bar chart displays the relationship between alcohol consumption and life expectancy across countries, color-coded by year. Built with D3.js and the d3-legend library, a hoverable color legend lets users isolate specific years from the dataset while other bars fade beneath a semi-transparent overlay. The chart uses stacked bar rendering with ordinal and linear scales, and includes tooltips via d3-tip to show detailed values. Data comes from a Life Expectancy CSV file, with SVG-based animated transitions supporting the visual filtering interaction.

Aaishwarya8615
87% match
Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This chart plots alcohol consumption against life expectancy across continents, using an interactive color legend to filter data by year. Bars represent aggregated alcohol consumption on the x-axis and life expectancy on the y-axis, with a tooltip summarizing the correlation for each year. Built with D3.js v3, it uses `d3.layout.stack` for bar layout, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The SVG visualization animates on hover, highlighting layers while dimming the base bars, and includes custom axis formatting and tick filtering.

HHowardHan99
87% 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
86% match
Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This interactive bar chart visualizes the relationship between alcohol consumption and life expectancy across continents, colored by year using an interactive color legend. Hovering a legend entry highlights the corresponding year’s data while dimming others; a tooltip summarizes the correlation for that year. Built with D3 v3, it uses `d3.nest`, `d3.layout.stack`, `d3.scale.ordinal`, `d3.legend.color`, and `d3-tip` for tooltips. Data comes from a CSV file, rendered as SVG with animated transitions.

Aall-over-yet
86% 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
85% match