Skip to main content
SimilarExport ZIP
100%

Food Production with multiple dropdowns

✓ Published1🌍 Public
Llrsavoie@wpi.edu
Last edited May 1, 2024
Created on Apr 24, 2024

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.

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
84% 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
82% 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
75% 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
74% 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
72% match
Loading thumbnail…

Fork of CV: Pseudo Scatter Plot

This dashboard presents a collection of agricultural production charts for the world's top countries, using a multi-page website format. It includes an area chart showing production contributions over time, a bar chart comparing output across countries and products, and a line chart depicting yearly production trends. The site is built with Vue and features a Tailwind CSS-based interface, with navigation managed through JavaScript to load different chart views. Each chart is presented as a static PNG image with accompanying descriptive text within the dark-themed interface.

Kkoppulasudhakar03@gmail.com
71% 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
71% match
Loading thumbnail…

small_multples_interactive

The visualization presents annual U.S. food consumption trends via an animated grid of small multiples, organized by food category (meat, vegetables, fruit, grains, dairy, fat) and showing per-capita amounts in ounces, cups, or grams. A playhead advances through years from 1970 to 1989, with user controls for playback speed and scaling (by group or item). Built with D3.js, the example loads TSV data, draws area and line charts per food item, and updates yearly values using a bisector to index the dataset.

BBenHeubl
71% match