Skip to main content
SimilarExport ZIP
100%

Fork of Food Production Stacked Bar Chart

✓ Published1🌍 Public
Bblanchestora@gmail.com
Last edited May 4, 2024
Created on May 4, 2024

This stacked bar chart breaks down estimated food production by tonnage across the seven continents for 2021, based on data from the World Food Production dataset. Hovering over a food category in the color legend highlights that segment across all bars while dimming others. The visualization uses d3.stack, scaleBand, scaleLinear, and scaleOrdinal to structure the bars, with the colorLegend module managing interactive highlighting and fade effects.

AI-generated description

Stacked bars showing estimated food production breakdown of the continents. Based on an example from the tutorial

https://www.kaggle.com/datasets/rafsunahmad/world-food-production

https://raw.githubusercontent.com/lukesavoie/dataviz/main/world%20food%20production.csv loaded and parsed as CSV.

MIT Licensed

Similar vizzes

Loading thumbnail…

Food Production Stacked Bar Chart

A stacked bar chart visualizes estimated food production across seven continents for 2021, with each bar segmented by food type in millions of tonnes. Hovering over a legend item highlights the corresponding segment and fades others, while the matching bar segment is raised with a black stroke. Built with D3.js v7, the example uses `d3.stack`, `scaleOrdinal` with `schemeCategory10`, and `flatRollup` to transform data from the world food production dataset.

Llrsavoie@wpi.edu
92% match
Loading thumbnail…

Fork of Food Production Stacked Bar Chart

This stacked bar chart displays the estimated 2021 food production across continents, with bars showing tonnage of various food categories. The visualization uses D3's `scaleOrdinal` with `schemeCategory10` for colors and `flatRollup` to reshape the CSV data from the Kaggle world food production dataset. The `stackedBarChart` function builds stacked rects using `stack()` and `scaleLinear` for x-values, while the adjacent `colorLegend` provides interactive highlighting, dimming non-hovered segments and drawing a stroke on the selected category.

SSowjanya Devupalli
91% match
Loading thumbnail…

Fork of Food Production Stacked Bar Chart

This visualization displays the estimated food production for major continents in 2021, broken down by food type using stacked horizontal bars. It uses D3.js scales such as `scaleBand` and `scaleLinear`, with `axisBottom` and `axisLeft` for axes. The data comes from a Kaggle dataset on world food production, loaded as CSV and filtered to the year 2021. A color legend with mouse interactions highlights specific food categories on hover, applying a fade effect to non-selected bars.

HHaili0109
91% match
Loading thumbnail…

Fork of Fork of Food Production Stacked Bar Chart

This stacked bar chart visualizes estimated food production by continent for 2021, using data from a Kaggle world food production dataset. Each horizontal bar is segmented by food type, and a color legend allows interactive highlighting that fades non-matching segments and adds a stroke to the selected category. The visualization uses D3’s `scaleBand`, `scaleLinear`, `stack`, and `flatRollup` to transform and render the data, with responsive axes from the `@curran/responsive-axes` library and custom color legend interactivity.

BBrayo
90% match
Loading thumbnail…

Food Production per country

This interactive line chart displays food production tonnage over time for a selected country, with each line representing a different food type. A country dropdown filters the data, while a categorical color legend highlights specific food categories on hover, dimming non-selected lines. The visualization uses D3.js scales, axes, and line generators, with data from the `@lukesavoie/worldfoodproduction` package. The color legend component manages hover interactions and opacity fading to emphasize the selected food type across all countries.

Llrsavoie@wpi.edu
76% match
Loading thumbnail…

Country Food Production Multiple Lines

This visualization displays food production trends for a selected country, plotting multiple food categories as colored lines over time. The y-axis represents tonnes, and the x-axis represents years, with an interactive dropdown to switch between countries. Built using D3.js, it employs `scaleLinear` and `scalePoint` for axes, `scaleOrdinal` with `schemeSet2` for color encoding, and `line` for path generation. Data comes from the `worldfoodproduction` package, and a custom color legend explains the food categories.

Llrsavoie@wpi.edu
73% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart shows the estimated breakdown of the 20 most populous countries by continent and population in 2010, using Pew Research data. The visualization highlights the distribution of population across continents with each bar segment representing a continent’s contribution. Hovering over the legend highlights the corresponding religion in the bars, dimming others. The chart uses D3’s `flatRollup`, `stack`, and `scaleBand` for layout, with the `colorLegend` module managing interactive legend hover effects and opacity fading.

DDivyaKota2@my.unt.edu
72% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
72% match