Skip to main content
SimilarExport ZIP
100%

BarGraph_Final

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

BarGraph

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.

SSathviKankanala@my.unt.edu
86% match
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
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
79% match
Loading thumbnail…

Simple Bar chart

This example shows a horizontal bar chart of fruit values sorted in ascending order. The chart uses D3 v3 with SVG rendering, mapping each fruit name to a y-axis position using `d3.scale.ordinal` and each value to a bar width via `d3.scale.linear`. The y-axis is drawn with `d3.svg.axis`, and bars are rendered as SVG `rect` elements with a label text appended to each bar.

JJonathan Liu
77% match
Loading thumbnail…

Food

This example shows a horizontal bar chart of nutritional data for the top ten foods, using a bar’s length to encode each item’s 2019 nutrient value. The chart renders as an SVG using React, with the `d3.csv` loader fetching data from a GitHub Gist. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars and axes, while D3’s `axisBottom` and `axisLeft` are manually replaced by custom tick rendering. The visualization highlights the relative nutrient amounts across food categories.

KKeerthipriyaBankuru
76% match
Loading thumbnail…

Untitled

A bar chart displays the values of three fruits (apple, banana, pineapple) from a CSV file, with each bar colored red, green, or blue. The chart uses D3 v4's `d3.select`, `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` to render an SVG visualization with rotated x-axis labels and a fixed y-axis range from 0 to 100.

Zzoniyac
76% match
Loading thumbnail…

activity-7

A reusable area chart displays the top ten fruits by sales, ranked in descending order from a CSV dataset. The chart uses a smooth Catmull-Rom curve to render the area, with steelblue fill at 70% opacity. D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` are used to handle data loading, scales, and the area generator, while axes and labels are added with `d3.axisBottom` and `d3.axisLeft`.

Ssathvik0311@gmail.com
76% 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
76% match