Skip to main content
SimilarExport ZIP
100%

Fork of CV: Bar Chart

✓ Published0🌍 Public
Rrevanthdasari10@gmail.com
Last edited Mar 7, 2026
Created on Mar 7, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of coffee sales data, displaying counts for different categories with clickable bars that highlight selections. Built with React hooks and D3.js, it uses `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes, and loads CSV data via `d3.csvParse` from a remote URL. A `ResizeObserver` tracks container dimensions to make the visualization responsive.

Ssravya7136@gmail.com
86% match
Loading thumbnail…

Fork of CV: Line Chart

This multi-series line chart visualizes 150 months of simulated coffee business trends, comparing coffee sales, pastry sales, and customer counts. The visualization uses a dual y-axis: a left axis scaling sales figures in dollars and a right axis scaling customer volume, while the x-axis represents month increments. Built with React and D3 v7, the chart renders as an SVG, using `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.line` path generators for each series. A legend distinguishes the three metrics through color and a dashed stroke for customer counts.

AAddiga Himesh Chander
84% match
Loading thumbnail…

Fork of React & D3 Starter

A multi-line chart displays coffee shop performance over 150 days, tracking sales, profit, and customer counts as three colored paths (red, blue, green) against shared day and value axes. The example loads data from a CSV file using d3.csv, converts values to numbers, and renders the lines with d3.line, scaling positions with d3.scaleLinear and adding d3.axisBottom and d3.axisLeft. The visualization is built within a React component using refs and the d3-selection library, outputting to SVG.

Rrevanthdasari10@gmail.com
84% match
Loading thumbnail…

Asssignement

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.

Ssairathan.p045@gmail.com
83% match
Loading thumbnail…

Fork of React & D3 Starter

A React component combines D3.js v7 scales and SVG shapes to display 150 days of simulated coffee shop data from a local CSV file. Orange bars encode daily sales values on a band scale while a blue line path shows profit trends on the same linear y-axis. The visualization uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom/axisLeft for tick marks. The React wrapper manages the SVG container through a ref and useEffect hook.

Rrevanthdasari10@gmail.com
83% match
Loading thumbnail…

Fork of Bar Graph

This example visualizes product sales by sale price using a bar graph, with each bar representing a product and its height reflecting the sale price. The chart displays the data from a CSV file, showing product names along the x-axis and sale prices on the y-axis. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders SVG rectangles for the bars. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with hover effects changing bar colors to orange.

Mmukundakrishna.r@gmail.com
82% match
Loading thumbnail…

Fork of bar D3 Starter

This bar chart visualizes product sales values from a CSV dataset, with each bar representing a product and its height corresponding to the sales figure. The chart includes axis labels, a title, and interactive hover effects that display a tooltip and change the bar’s color. Built with D3.v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, all rendered as SVG within a styled HTML page.

119h61a05c9@cvsr.ac.in
82% match