Scatter plot

100%

✓ Published1🌍 Public

Last edited Jul 4, 2023

Created on Jul 4, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

73% match

Loading thumbnail…

3D Scatter plot using D3.js

This example presents an interactive 3D scatter plot built with Plotly.js and D3.js, visualizing agricultural crop data. It renders two marker traces from a CSV file: one mapping crop type, production, and district, the other correlating crop year, season, and area. The code uses `d3.csv` to load the dataset and `Plotly.newPlot` to draw the scatter3d traces within a DIV element. The visualization employs 3D markers with custom opacity and line styling to distinguish the two datasets, with the layout margins set to zero.

Ggayathrikavya

70% match

Loading thumbnail…

Scatter plot

A scatter plot displays CO2 emissions for top-ranking countries, mapping each country's total 2018 emissions in gigatons along a horizontal linear scale against a vertical point scale of country names. The visualization encodes data points as steelblue circles, with axes, gridlines, and labels styled via CSS. Built with D3 v6, it uses `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom`/`axisLeft` for rendering axes, while `format` converts emission values to readable units. Data originates from UCSUSA's 2018 country emissions dataset.

Ccarbuncle-3djs

69% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the heat values of different foods, mapping each food type along the y-axis and its heat value along the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to position circular marks, with SVG rendering for the plot. Data is loaded from a local JSON file via `json()`, and axes are generated using `axisLeft` and `axisBottom`. The x-axis labels are formatted with `format`.

Aanniehoshi18

69% 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

69% match

Loading thumbnail…

Green house gas bar chart

This visualization displays greenhouse gas emissions by country using a bar chart, with the data loaded from a CSV file containing country names and population figures. The chart renders as SVG elements within a React component, drawing only the X and Y axes as black lines using basic SVG line elements. The code relies on React hooks (useState, useEffect) and the d3.csv function to fetch and parse the data, while d3.v5 is loaded via CDN. The visualization uses a fixed 450×450 pixel SVG canvas with no bars actually drawn, showing only the coordinate system and data loading foundation.

VVikil Lakkavatri

69% match

Loading thumbnail…

Scatter Plot Arun

This scatter plot visualizes crop production against area for a dataset containing crop information, with each data point colored by crop type. The visualization uses D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to render SVG circles on a Cartesian coordinate system. The code loads CSV data from a Gist URL, parses it, and maps production values to the x-axis and area values to the y-axis, with fixed point radius. The chart includes rotated axis labels and custom styling for tick text.

AArun Pratap

69% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV dataset, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The visualization includes axes with tick marks, axis labels, and a title, all styled via CSS. The code uses d3.csv, d3.extent, d3.axisLeft, d3.axisBottom, and d3.format for data loading, scaling, and formatting, while React serves as the framework hosting the D3 v5 implementation.

BBaraneedharan N M

68% match