Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot for Vegetables in USA

✓ Published0🌍 Public
NNita
Last edited Mar 25, 2025
Created on Mar 25, 2025

This D3.js (v5) visualization displays the relationship between vegetable price and weight as a scatter plot, with each point colored by the first letter of the vegetable’s name. It includes axis labels, grid lines, and a tooltip on hover. The chart loads CSV data via `d3.csv` and renders with SVG, featuring interactive legend filtering by group and animated transitions through `d3.transition`. The layout is created using `d3.scaleLinear` for both axes and `d3.schemeCategory10` for color mapping.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot for Vegetables Price vs Weight Scatter Plot

A scatter plot displays the relationship between vegetable price in USD and weight in kilograms, with each red dot representing an item from a CSV dataset loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and an SVG container with circles positioned via `cx` and `cy` attributes. Axis labels clarify the variables, while the chart scales from zero to the maximum observed values.

NNagasharan Sai Nandyala
87% match
Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This example displays stock price data for a vegetable-related dataset, plotting the Open, High, Low, and Close values over time from 2019. It uses a line chart with a brush-and-zoom interaction, allowing the user to select a time range and inspect price fluctuations across all four metrics. The visualization relies on D3.js APIs such as `d3.line`, `d3.brushX`, and `d3.zoom` to render the paths and manage the interactive focus and context panels. The data is loaded from a CSV file and rendered with SVG elements.

Vvaishnavgck@gmail.com
85% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Mmadipadiga.raviteja@gmail.com
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot BT

This interactive scatter plot visualizes fruit data loaded from a CSV file, showing relationships between variables like retail price and yield. Points appear as different shapes—circles, triangles, and squares—based on the yield value. The x-axis automatically cycles through numeric columns every two seconds, animating the chart to compare different data dimensions. Built with reusable D3 code, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG paths for point shapes.

TTarun Kumar Bosupally
79% match
Loading thumbnail…

scatter plot

A horizontal bar chart displays the average price per pound for various vegetables, sourced from a CSV file containing price data. The chart renders in React, using d3.scaleBand for the categorical vegetable axis and d3.scaleLinear for the continuous price axis, with bars filled in pink. The d3.axisLeft and d3.axisBottom functions generate the chart's axes, while the data is loaded and parsed asynchronously via the d3.csv function.

Sshivasai2925@gmail.com
78% match
Loading thumbnail…

Pie chart of Vegetables based on price US Dollars

This pie chart visualizes the distribution of vegetable prices in US dollars, with each slice representing a vegetable's total price proportion. The SVG chart is generated using D3.js v6, with a legend on the right side and percentage labels displayed on each slice. The code uses `d3.csv()` to load data from a GitHub gist, then `d3.rollups()` to aggregate prices by item name and `d3.pie()` to compute the pie geometry. Colors come from `d3.scaleOrdinal(d3.schemeCategory10)`, and slices are drawn as SVG paths using `d3.arc()` with a custom centroid-based label placement.

NNagasharan Sai Nandyala
78% match
Loading thumbnail…

Bar chart of Fresh Vegetables in USA

A horizontal bar chart displays the price per pound of fresh vegetables in USD, using pink bars sorted by vegetable name. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `axisLeft`/`axisBottom` for tick marks. Data is loaded asynchronously from a CSV file via `d3.csv` and rendered as an SVG using `React.createElement`. Axis labels and a title provide context without interactive features.

NNagasharan Sai Nandyala
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between farm prices of potatoes and oranges in May 2019, with each point representing a date where both prices are available. The visualization uses D3.js v7 to render an SVG with linear scales for both axes, mapping potato prices on the x-axis and orange prices on the y-axis. The code leverages D3's `csv` loader to fetch the fruit dataset from a Gist, filters for the relevant month and products, then uses the custom `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` APIs to draw the chart and its axes.

Ffreyatran124@gmail.com
77% match