ICE6 Bar Chart Coffee Sales

100%

ICE6 Bar Chart Coffee Sales

✓ Published1🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This bar chart displays monthly sales figures for 100 coffee shop branches, using a sequential blue color scale to encode the magnitude of sales. The visualization, built with React and D3 v7, renders SVG rectangles for each branch, with axis labels and a title. Using d3.csv to load data, the code employs scaleBand and scaleLinear for positioning, d3.axisBottom and d3.axisLeft for ticks, and d3.interpolateBlues for color mapping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6_Combined_Bar_Line

This combined chart displays 150 months of coffee sales as blue bars on a left y-axis, overlaid with customer counts as a red line on a right y-axis, using two independent linear scales. The visualization also includes grid lines, axis labels, a legend, and circular data points along the customer line for precise value reading. Built with React and D3 v7, the chart renders as SVG, reads data from a CSV file via d3.csv, and constructs the bar and line elements using d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.line.

AAddiga Himesh Chander

90% match

Loading thumbnail…

ICE-5

This example visualizes January coffee sales as a bar chart, displaying total records, total units sold, and average price in a text summary above the chart. The bar chart uses d3.scaleBand and d3.scaleLinear to map product names to unit counts, with axes created via d3.axisBottom and d3.axisLeft. Data is loaded asynchronously from a CSV file using d3.csv, and hover interactions change bar color. The visualization is rendered as SVG with D3 v7.

Rrevanthdasari10@gmail.com

87% match

Loading thumbnail…

Ice-6

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.

GGorantla Vishnusai

86% match

Loading thumbnail…

ICE6

This interactive bar chart shows monthly sales figures, with each bar representing a month’s sales value from the `Sales.csv` dataset. The chart supports clicking on a bar to highlight it, visually distinguishing the selected month by changing its fill to white with a black stroke. The visualization is built with React and D3 v7, using `d3.csv` to parse the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes, all rendered as SVG within a responsive container.

GGuntupalli Mohan kalyan

86% match

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

86% 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

84% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

84% match

Loading thumbnail…

ICE 6 Marks and Channels

A horizontal bar chart displays the sales figures for the top 15 supermarket customers. Each bar’s color alternates between red and light blue based on its array position. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while axis ticks are generated manually from the scales. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles.

SSai Kaushik

84% match