scatterPlot_activity6Q6

100%

scatterPlot_activity6Q6

✓ Published0🌍 Public

Last edited Apr 11, 2024

Created on Apr 11, 2024

This interactive D3.js scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents. The plot uses a color legend to highlight points by continent, allowing users to hover over the legend to isolate and compare specific regions. The visualization is built with React and D3 v5, rendering data from a CSV file of life expectancy statistics as SVG circles, with axes labeled Alcohol and Life Expectancy.

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

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

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

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

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

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

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

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

79% match