Skip to main content
SimilarExport ZIP
100%

Food Production Stacked Bar Chart

✓ Published3🌍 Public
Llrsavoie@wpi.edu
Last edited Apr 30, 2024
Created on Apr 24, 2024

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.

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…

Fork of Food Production Stacked Bar Chart

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.

Bblanchestora@gmail.com
92% 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
88% 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
87% 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
87% 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
75% match
Loading thumbnail…

stacked bar

This stacked bar chart displays fruit production quantities across multiple years, with each bar segment representing a different fruit type. The visualization uses d3.layout.stack() to compute the stacked layout, d3.scale.ordinal() for the x-axis, and d3.scale.linear() for the y-axis. The bars are rendered as SVG rectangles, while textured patterns from the textures.js library—including lines, circles, crosses, and waves—replace solid colors to distinguish the four fruit categories. Axes are drawn with d3.svg.axis(), and tooltips show segment values on mouse movement.

Zzoniyac
74% 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
74% match
Loading thumbnail…

Stacked Chart

This stacked bar chart displays 2013 energy production data sourced from Eurostat, with each horizontal bar segmented by energy type. The visualization uses d3fc’s Cartesian chart with a band scale for the y-axis and a linear x-axis. A D3 stack layout prepares the series, which are rendered by d3fc’s horizontally oriented stacked bar series. The d3-legend library adds a categorical color legend, while d3.scaleOrdinal assigns colors and d3fc’s autoBandwidth determines bar width.

CColinEberhardt
73% match