Pie chart of Vegetables based on price US Dollars

100%

Pie chart of Vegetables based on price US Dollars

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Mar 30, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

This pie chart visualizes the basic cost of each country, with slices colored by country and a legend displaying names and dollar amounts. The D3.js v5 code loads CSV data from a GitHub gist and uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` and `schemeCategory10` for colors. A hover event logs the country and cost to the console, while the legend is built from the same pie data.

CChaitanya Ratan Sree

80% match

Loading thumbnail…

pie chart

This pie chart visualizes the prices of the top 11 products from a CSV dataset, sorted in descending order and drawn as SVG arcs. Built with D3.js v5, it uses the `pie` and `arc` functions to generate segments, `scaleOrdinal` with `schemeCategory10` for color coding, and includes an interactive legend showing each product name and its price in dollars. Data is loaded asynchronously via `csv` from a GitHub gist, and the chart is rendered on mouseover logging.

Aadapavaishnavi12

79% match

Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

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.

NNita

78% match

Loading thumbnail…

Pie Chart

This example presents a pie chart depicting the total sales distribution across item categories, sourced from a CSV file. The visualization includes a legend, a title, and a subtitle, with each slice labeled by its category and dollar amount. Built with D3.js v6, the code uses `d3.pie()` and `d3.arc()` to generate the chart, `d3.rollups` to aggregate the data, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The chart is rendered as SVG elements, with annotations and labels positioned using arc centroids.

AAbrarb702@gmail.com

77% match

Loading thumbnail…

pie

This pie chart compares the number of high-price days (above $100) versus low-price days in Apple’s stock history. The code loads CSV data from a Plotly-hosted dataset, counts occurrences in each category, and renders an SVG pie chart using d3.pie and d3.arc. A d3.scaleOrdinal with d3.schemeCategory10 assigns colors to the two slices, and labels are positioned at each arc’s centroid via arc.centroid. A legend is built with plain HTML divs, replicating the slice colors. The chart is minimal, showing only the split between two price thresholds without additional axes or time detail.

Hharshithamiriyam@gmail.com

77% 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…

Pie Chart

This pie chart visualizes monthly expense categories from a CSV file, displaying each category's proportion with a colored slice and an outer label. Each slice is rendered with the `d3.arc` path generator, while labels are placed using `d3.arc` centroid calculations. A legend lists categories and values, using `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The chart is built with D3 v7, rendering to SVG, with the `d3.pie` layout function computing slice angles from the data.

Ppvvaishnavi93@gmail.com

77% match

Loading thumbnail…

Pie Chart for top brands and their prices

A pie chart displays the relative prices of top brands, with each slice labeled by its price in thousands and a corresponding legend listing brand names and values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and assign colors, while `d3.csv` loads the dataset from a GitHub Gist. Text labels are positioned via `arc.centroid`, and the SVG renders the chart and legend interactively.

SSwapna1915

77% match