Skip to main content
SimilarExport ZIP
100%

Bar chart of Fresh Vegetables in USA

✓ Published3🌍 Public
NNagasharan Sai Nandyala
Last edited Mar 25, 2025
Created on Mar 25, 2025
Forked from Fork of barchart

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.

AI-generated description
MIT Licensed

Similar vizzes

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
82% match
Loading thumbnail…

Fresh Vegetables Data

This example summarizes a CSV dataset of fresh vegetables in the USA, displaying key metrics such as file size, row and column counts, average price per pound, most common region, and most common season. It loads the data using `d3.csv` from a GitHub gist, then computes aggregations with `d3.nest().key().rollup()` for region and season counts, and calculates the average price by parsing the `Price per Pound (USD)` column. The summary is rendered as formatted HTML inside a styled `div`, with the page styled using inline CSS on a red background.

NNagasharan Sai Nandyala
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
77% 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
77% match
Loading thumbnail…

Bar Graph shows Sales of Fruits in USD

This example shows a horizontal bar chart of fruit sales in USD, with bars extending from left to right to compare each fruit’s revenue. The code loads data from an external CSV file and multiplies the sales values by ten during preprocessing, then renders SVG rectangles using D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The visualization is drawn as SVG elements within a fixed 960×500 viewport, with axis labels for “Fruits” and “Sales in USD” added via text elements.

RRadhakrishna246
74% match
Loading thumbnail…

Fruit and Veggies Price dataset

This visualization displays the Fruit and Veggies Price dataset, showing a bar chart of prices for a selected date (2019-05-19) and a scatter plot alongside a summary table and data table. The code fetches CSV data from a GitHub gist, then uses D3.js v6 to render the bar chart and scatter plot as SVG elements. The summary section displays file size, column count, and row count, while the HTML table lists all records.

Ffreyatran124@gmail.com
74% match
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
73% 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
73% match