Skip to main content
SimilarExport ZIP
100%

Country Food Production Multiple Lines

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Multing Data for Multiple Lines

This visualization shows population trends over time for multiple world regions, with each line color-coded and sorted by its final population value. The chart includes axes with gridlines, a legend generated by a custom `colorLegend` function, and smoothed lines using `curveBasis`. Data is processed by melting wide-format CSV rows from UN population estimates into tidy long-form data, then nested by region with `d3.nest`. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.line`, rendering to SVG with D3 v5.

Mmisferswift
72% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows annual CO2 emissions (in million tonnes) for multiple countries over time, with each country represented as a separate colored line. The data comes from the Data Canvas - Sense Your City dataset, displayed as an SVG using D3 v5. The visualization uses d3.nest to group data by country, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. A color legend lists all countries alongside the chart.

Nnadia-el
72% match