Skip to main content
SimilarExport ZIP
100%

Line Chart Food Data

✓ Published1🌍 Public
Llrsavoie@wpi.edu
Last edited Feb 8, 2024
Created on Feb 8, 2024
Forked from Simple Line Chart

This line chart visualizes Bhutan’s annual coffee production in tonnes from 1961 onward, sourced from the World Food Production dataset. The view filters the data to Bhutan and maps years to a time scale, with plot area filled in light gray. D3 version 7.8.5 is used, along with the `scaleTime`, `scaleLinear`, `line`, and `axisLeft` APIs, plus labels from `@curran/axis-labels`. Circles mark data points, while the default black line traces production trends over time.

AI-generated description

A simple line chart with D3 showing the World Food Production Data for Bhutan's coffee production.

MIT Licensed

Similar vizzes

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
93% 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
72% 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
72% 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
66% match
Loading thumbnail…

Line Chart Group 2 Final

This example displays a line chart of crop production over time, using a dataset of yearly production values. It draws a single red line and labels the axes and title, with a y-axis label for production and an x-axis label for year. The chart is generated with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom`, and renders as an SVG. Production data is loaded from a GitHub gist CSV file, and the visualization is styled with custom CSS for fonts and axis appearance.

AArun Pratap
66% 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
65% match
Loading thumbnail…

Activity6-Q4

This bubble chart visualizes coffee production data from a CSV file, showing yield (kg per hectare) on the x-axis, area harvested (hectares) on the y-axis, and production volume (kg) encoded by bubble size and color. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleSqrt for scaling axes and bubble radii, and d3.scaleSequential with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, displaying each country’s production details. The chart also includes a bubble-size legend (500k, 1M, 2M kg) and is rendered with SVG elements and animation-ready transition support.

Tthoutunikhitha@gmail.com
65% match
Loading thumbnail…

Line Chart Group 2

This example shows a line chart of crop production over time, with year on the x-axis and production values on the y-axis, titled “Production vs Year.” The data is loaded from a CSV file via `d3.csv` and parsed using `new Date()` for years and numeric conversion for production. The visualization uses D3 v5 with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render axes and the red path in an SVG. Grid lines are created via tick size extending across the chart, and axis labels are added as SVG text elements.

AArun Pratap
65% match