Interactive Legend Bar chart for Alcohol Vs Life Expectancy

100%

Interactive Legend Bar chart for Alcohol Vs Life Expectancy

✓ Published0🌍 Public

Last edited Oct 30, 2019

Created on Oct 17, 2019

Forked from Interactive Color Legend Bar chart with tooltip 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.

AI-generated description

An Interactive Color Legend bar chart for Life Expectancy Data.

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

Note: Skeleton of the code forked from Religions of Largest 20 Countries

MIT Licensed

Similar vizzes

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

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

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

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

87% match

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

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

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

75% match

Loading thumbnail…

A6 Diverging Color Scale Bar Chart

This example visualizes life expectancy in 1960 for a selection of countries using a diverging color scale bar chart. The bars are colored on a green-to-red gradient via a sequential scale with an RdYlGn interpolator, where higher life expectancies appear greener and lower ones redder. The chart uses D3 v7 to load data from a CSV file, create SVG bars with band and linear scales, and render axes with tick labels. A custom legend and axis titles are added using D3’s selection and axis methods, while the underlying data is sourced from a shortened TidyTuesday dataset.

AAllen Jake Polintan

75% match