Edible insect

100%

✓ Published0🌍 Public

Last edited Aug 27, 2024

Created on Sep 29, 2022

The visualization compares the environmental impact of four protein sources—cattle, pork, poultry, and mealworms—using a grid of small colored squares to represent land use, water consumption, and greenhouse gas emissions. Each square encodes a unit of resource use, with colors distinguishing the three metrics: orange for land, blue for water, and red for warming. The chart is built with D3 v4, drawing SVG rectangles in a loop for each metric, positioned in a 5-column grid with spacing. Data comes from a local CSV file, and the visualization uses raw numeric values directly without scaling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist 61199307353f07c3a982a00974bfa187

This visualization compares greenhouse gas emissions across food products by life-cycle stage, using a horizontal bar chart for each food item with color-coded segments for land use change, farm, processing, transport, and other stages. The data, sourced from Our World in Data, is rendered as stacked bars using D3’s `d3.scaleOrdinal` for color mapping and `d3.axisLeft` for food labels. The code uses `d3.csv` to parse the uploaded CSV file and `d3.stack` to compute the stacked series, with each bar’s length representing total emissions in kilograms of CO₂-equivalent per kilogram of food.

CCurran Kelleher

68% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between farm-level and packaging-level greenhouse gas emissions for various food products. Each circle represents a data point from the OurWorldinData dataset, plotted with its Farm value on the x-axis and Packging value on the y-axis. The code uses d3.csv to load and parse the data, converting string values to numbers, then applies d3.selectAll with a data join to create SVG circles with fixed radii of 5 pixels. The visualization renders directly to the DOM using D3 v7 and standard SVG attributes.

Jjony6290

64% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between land-use change and transport emissions for various food products, using color and tooltips to identify items. The visualization is built with the Vega-Lite API, which programmatically defines the chart specification, while the underlying data is loaded as a CSV file from Our World in Data. Rendering is handled by Vega, with d3.csv fetching the data and the Vega Tooltip handler providing interactive hover details. The chart fills the browser window and is configured for readability with custom fonts and axis styling.

Ootis

64% match

Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart ranking the top nine foods by protein content, distinguishing between vegetarian and non-vegetarian options. It uses D3 v5 APIs (`d3.pie`, `d3.arc`, `d3.scaleOrdinal`) to generate SVG paths, with a legend showing food names and protein values in grams. The data is loaded asynchronously from a CSV file via a Gist URL using D3's `csv` import, and formatted with `d3.format`.

Aabdhaseeeb

62% match

Loading thumbnail…

D3 - Qualitative color scale Scatterplot

This example visualizes global agricultural productivity with a qualitative color scale, plotting wheat production against a pest control metric. Each circle represents a data point, with colors encoding the year (2015–2021) using an ordinal scale from d3.scaleOrdinal. The scatterplot uses d3.csv to load data and d3.axisBottom/axisLeft for axes, while a legend from d3.legendColor clarifies the year mapping. The SVG rendering applies linear scales for positioning and radius, though circle size remains fixed at 8 pixels despite the size scale being defined.

CChandana Srinivas

62% match

Loading thumbnail…

Fork of Activity 7 new

This bar chart displays the land use in square meters for ten food types in 2017, from beef and mutton down to pulses. The visualization uses React components with D3 v5 scales and axes, rendering SVG rectangles whose widths are proportional to the land use values. Data is loaded via `csv` from a gist, with values parsed and formatted using `scaleLinear`, `scaleBand`, and `format`. Hovering shows the exact value via a native SVG `<title>` tooltip.

UUmarani Vemula

62% match

Loading thumbnail…

Heatmap using d3.js

This heatmap visualizes the consumption of various fruits and vegetables across five European countries—France, Italy, Germany, the United Kingdom, and Spain—using a color scale that encodes the percentage deviation of each value from the mean. The data is loaded from a CSV file, and each cell’s color corresponds to a six-band scale: negative values render in shades of red (dark to light), while positive values use shades of green, with the legend indicating percentage ranges. The chart uses an SVG layout with band scales for the x-axis (products) and y-axis (countries), and includes animation for a dynamic presentation. Built with d3.v4, the visualization is adapted from a block by nanu146 and is available under the GPL-3.0 license.

GGerardoFurtado

61% match

Loading thumbnail…

[A4] CPI of Meats in 2015 (Bar Chart)

This example displays the Consumer Price Index (CPI) of various meats in 2015, using the base year 1990, as horizontal bars. It loads CSV data via `d3.csv` and maps each meat type to a band scale (`d3.scaleBand`) while the CPI values determine bar widths through a linear scale (`d3.scaleLinear`). Bars are rendered as SVG rectangles, with mouseover events that temporarily change the fill color and append a text tooltip showing the exact CPI value, which is removed on mouseout. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The visualization uses a fixed margin layout and SVG rendering.

Cctan13@dons.usfca.edu

61% match