Skip to main content
SimilarExport ZIP
100%

Food Production per country

✓ Published0🌍 Public
Llrsavoie@wpi.edu
Last edited Apr 29, 2024
Created on Apr 29, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Food Production with multiple dropdowns

This interactive visualization explores global food production trends using dropdown menus to select a crop type and a country. It employs D3.js, importing functions like `select`, `scalePoint`, and `scaleTime` to render multi-line charts, with colors assigned via an ordinal scale using `schemeSet2`. The chart displays annual production in tonnes for the chosen food item across all countries, or all food items for one country, based on data from the `@lukesavoie/worldfoodproduction` package. The interface responds to user selections by filtering and redrawing paths.

Llrsavoie@wpi.edu
82% match
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
76% match
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
75% match
Loading thumbnail…

Production Map and Line Chart

This visualization combines a choropleth map of global wine production with a line chart tracking production over time. The map colors countries by quantity produced, using a threshold color scale, and includes interactive tooltips showing the most recent production value when hovering. The line chart displays production trends for countries that exceed 5,000 units, with each line colored by country using a custom ordinal scale. Both views use D3.js SVG rendering, with the map employing the `geoEqualEarth` projection and `geoPath`, while the line chart uses `d3.line` and `d3.scaleLinear` for axes.

LLouisa Penrice
73% match
Loading thumbnail…

(Hover) Line Chart Food Data

This interactive line chart visualizes coffee production in Bhutan over time, using World Food Production Data filtered to the country. It renders a single time-series line with a light gray plot area, while a mousemove event tracks the cursor position to draw crosshair lines within the chart’s bounds. The visualization uses D3’s scaleTime and scaleLinear for axes, d3-line for the path, and a ResizeObserver to adapt the SVG dimensions to its container.

Llrsavoie@wpi.edu
73% 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
73% match
Loading thumbnail…

World Food Production

This example visualizes world food production data from Kaggle, showing how agricultural output varies by country, food type, and year. It presents a table of parsed CSV values, with each row displaying a country-year combination and its corresponding production figures for crops like maize, rice, and wheat. The code loads the dataset using an import statement, converts string values to numbers for all food categories, and renders the first record as JSON using `JSON.stringify`. The example uses plain JavaScript to handle data parsing and displays the result in an HTML `<pre>` element with a set font size.

Llrsavoie@wpi.edu
72% match