Skip to main content
SimilarExport ZIP
100%

BarGraph

✓ Published0🌍 Public
SSathviKankanala@my.unt.edu
Last edited Oct 21, 2025
Created on Oct 21, 2025
Forked from HTML Starter

This bar chart visualizes the average weight of various fruits from a CSV dataset, using color to distinguish between seasonal and non-seasonal categories. The bars are sorted in descending order for readability, with tooltips displaying weight, vitamin C content, and category on hover. The visualization is built with D3 v7, using `scaleBand` and `scaleLinear` for the axes, `scaleOrdinal` with `schemeTableau10` for categorical coloring, and SVG rendering. A legend and rotated x-axis labels support the dense dataset of fruit names.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sathvi Vizhub

This bar chart shows the average weight and vitamin C content for a collection of fruits, with a summary line displaying totals and means. Each bar is colored according to the fruit’s assigned color. The visualization loads CSV data via `d3.csv`, scales the categorical fruit names and linear weight values using `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles with axes generated by `d3.axisBottom` and `d3.axisLeft`. Labels are rotated for readability, and the chart is styled with CSS.

SSathviKankanala@my.unt.edu
87% match
Loading thumbnail…

BarGraph_Final

This horizontal bar chart displays the top 10 fruits by average vitamin C content, using a dataset of repeated fruit observations from a CSV. The visualization aggregates the data with `d3.group` and `d3.mean`, then sorts and slices the results. Bars are drawn as SVG `<rect>` elements, scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes use `d3.axisBottom` and `d3.axisLeft`, while colors come from `d3.schemeSet2` via `d3.scaleOrdinal`. A legend, title, and rotated axis labels are all rendered in the SVG.

SSathviKankanala@my.unt.edu
86% match
Loading thumbnail…

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Kkotlavamsireddy@gmail.com
83% match
Loading thumbnail…

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Kkotlavamsireddy@gmail.com
83% match
Loading thumbnail…

ICE-6 Bar Chart – Fruits Average Weight

This bar chart displays the average weight of different fruits, using a dataset loaded from a CSV file hosted on GitHub. Each fruit is represented by a steel-blue rectangle that turns orange on hover, with rotated labels on the x-axis for readability. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart is rendered as an SVG element with margins and labeled axes showing fruit names and weight in grams.

HHarshithmullapudi@my.unt.edu
82% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart ranks fruit sales in descending order along a vertical band scale, with horizontal bars extending proportionally to each fruit’s sales value. The visualization loads data from a CSV file, multiplies the sales figures by 10, and renders the result as an SVG using D3 v7. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles, with fixed margins and a steely-blue fill for all bars.

RRadhakrishna246
78% match
Loading thumbnail…

Animated Fruitbasket

This animated bar chart displays the counts of eight different fruit types in a basket, with bars growing sequentially from the bottom axis to their final heights. The visualization uses D3 v5’s selection and transition APIs, animating each rectangle’s `y` and `height` attributes with a staggered delay of 200 milliseconds per bar. The SVG rendering applies a linear color scale from pale to dark green based on count values, and includes labeled x- and y-axes using `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script, and bar growth is the only animated effect.

WWill Carter
77% match
Loading thumbnail…

fruits dataset

A dark-themed dashboard visualizes fruit nutrition and price data from a CSV file. It presents a bar chart for price per kilogram and a pie chart for calorie distribution, alongside a dataset summary. The page includes decorative SVG elements drawn with D3.js, such as stylized fruit illustrations and a starry header. The code loads data using `d3.csv` with `d3.autoType` and renders the charts as SVG, with axes and legends styled for readability.

Mmanzick921@gmail.com
77% match