Skip to main content
SimilarExport ZIP
100%

Ice-6

✓ Published0🌍 Public
GGorantla Vishnusai
Last edited Mar 26, 2025
Created on Mar 26, 2025

A bar chart displays the sales of various coffee products from a CSV dataset. It uses D3.js v3, loading data with `d3.csv` and rendering the chart with SVG. The x-axis uses `d3.scaleBand` for product categories, while the y-axis uses `d3.scaleLinear` for sales values. Bars are drawn as `rect` elements filled with steelblue and labeled with rotated text on the bottom axis. The visualization directly shows comparative sales figures across the coffee product lineup.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
85% match
Loading thumbnail…

Fork of ICE-6-Prathima -coffee

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

Kkotlavamsireddy@gmail.com
85% match
Loading thumbnail…

ICE-6-Prathima -coffee-Bar chart

This bar chart visualizes the sales volume of different coffee shop menu items, with each bar representing a specific coffee type. The data is loaded from a remote CSV file via `d3.csv` and parsed to convert sales figures into numbers. Using D3.js v7, the chart applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels. The x-axis labels are rotated for readability, and bars change color on hover.

Ppilliprathimarani@my.unt.edu
84% match
Loading thumbnail…

ICE-6 BARCHART

This bar chart visualizes sales figures for 100 products, with each bar’s height mapped to the product’s sales units. The visualization uses D3 v7 to load a CSV file from a GitHub gist, then renders an SVG with steel-blue bars that turn orange on hover. A band scale positions categorical products along the x-axis, while a linear scale maps sales values to the y-axis. The chart includes axis labels, a rotated x-axis to accommodate product names, and a title, with horizontal grid lines for readability.

Uuguggila@gitam.in
82% match
Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900
82% match
Loading thumbnail…

ice 6 - q1

This bar chart shows the average sales for each product line from a GitHub-hosted CSV file, with each bar’s height representing the mean sales in USD. The chart uses D3 v7 to fetch the data via `d3.csv`, compute averages with `d3.rollup` and `d3.mean`, and render SVG bars with scales from `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear on mouseover, displaying the product line and its average sales. Axes and labels are generated using `d3.axisBottom` and `d3.axisLeft`.

AAravindReddyJanke@my.unt.edu
81% match
Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch
81% match
Loading thumbnail…

ICE-6

A bar chart displays total sales amounts by region, with bars sorted in descending order. The visualization is built with D3.js v7 and rendered as an SVG within a React framework. It uses `d3.csv` to load data, `d3.rollups` to aggregate sales by region, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars are drawn using SVG `rect` elements, with a tooltip-free design and axis labels. The code is structured modularly with functions like `renderBars` and `renderTitle`, and includes interactive element selection through click handlers.

Ssrinathkarumuru@my.unt.edu
81% match