Asssignement

100%

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

A bar chart displays monthly sales for 100 coffee shop branches, with each bar colored on a sequential blue scale to encode sales magnitude. Using D3 v7 within a React component, the visualization loads data from a CSV file via `d3.csv`, aggregates it, and renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Branch labels are rotated on the x-axis, and axes are drawn with `axisBottom` and `axisLeft`, with hover effects changing bar color to orange.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Bar Chart

This example shows an interactive bar chart of coffee product sales, aggregating monthly units sold per product using d3.rollup and d3.sum. Built with React and D3 v7, the chart renders SVG bars that change fill color and stroke on click, with scales created via d3.scaleBand and d3.scaleLinear. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels added through d3 selection joins. Data loads from a CSV file, and the chart resizes responsively using a ResizeObserver.

Rrevanthdasari10@gmail.com

83% match

Loading thumbnail…

ICE6 Bar Chart Coffee Sales

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.

AAddiga Himesh Chander

82% match

Loading thumbnail…

task1

A bar chart displays monthly sales figures for electronic products. Each bar’s height encodes the numeric Sales value from the CSV dataset, with product names on the horizontal axis and a linear sales scale on the vertical. Repeating product names across rows aggregate into multiple bars per category. Built with React, the visualization uses D3’s `csv` parser to load data, `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for rendering, with bars filled in steelblue.

SSai Vamshi B

81% match

Loading thumbnail…

Untitled

A bar chart displays sales figures for individual salespeople, with each bar’s height proportional to the numeric value in the `sales.csv` dataset. The visualization uses D3 v4’s `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are rendered as SVG rectangles, colored steelblue via a CSS class, within a React-compatible HTML page.

LL1EO

80% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows a bar chart of coffee product sales, plotting each product’s total units sold with steel-blue bars on an SVG canvas. It loads `coffee_sales.csv` via `d3.csv`, parses the `Units_Sold` values, and uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, plus `d3.axisBottom` and `d3.axisLeft` for ticks. The chart is rendered with D3 v7 selections inside a plain HTML page, while the accompanying React code uses `useRef` and `useEffect` only to display a static text message.

Rrevanthdasari10@gmail.com

80% match

Loading thumbnail…

Task 1

This bar chart displays monthly product sales for a catalog of electronics, with each product’s sales value represented by a steelblue bar. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars and axes, while rendering SVG elements directly. The data is loaded from a CSV file via `d3.csv`, and axis labels are rotated for readability. Grid lines and tick values are generated programmatically, showing sales totals ranging from roughly 48 to 150 across over 120 product entries.

SSai Vamshi B

80% match

Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey

80% match

Loading thumbnail…

Bar Graph with sub-cats with D3.js

This example shows a bar graph that groups sales data by Sub-Category, with each bar colored by its parent Category (Furniture, Office Supplies, Technology) using a D3 ordinal color scale. It loads a CSV of sample store orders and aggregates total sales per sub-category with `d3.csv`, `d3.sum`, and nested data arrays, then renders the chart as SVG rectangles with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for axes and labels. The code runs in a React-compatible plain HTML page using D3 v5.

Ssaikrishnabussa

80% match