Skip to main content
SimilarExport ZIP
100%

Fork of Project with D3.js!

✓ Published0🌍 Public
Sshaikfayazfz64@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025

This example visualizes the number of coffee types by origin using a bar chart rendered with SVG via D3.js v5. It loads data from a CSV file and uses `d3.rollup` to count entries per origin. The chart employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to display tick labels. Bars are styled with a green fill, and the x-axis labels are rotated for readability.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This bar chart displays the average aroma score for coffees grouped by their country of origin, based on data from a CSV file. The visualization uses D3 v7 to load the dataset, compute the means with `d3.rollups` and `d3.mean`, and render an SVG with `scaleBand` and `scaleLinear`. Bars are drawn with the `join` method and axes are labeled. The chart helps compare which origins produce higher-rated aromas visually.

Sshaikfayazfz64@gmail.com
81% match
Loading thumbnail…

Fork of D3 Starter

This visualization compares three coffee quality metrics—acidity, sweetness, and aroma—across countries of origin using a multi-series line chart. The code loads a CSV dataset, converts numeric columns, and renders three colored lines with data point markers using D3 scales and axis generators. It employs `d3.scalePoint` for the categorical x-axis of origins, `d3.scaleLinear` for the 0–10 score range, and `d3.line` to draw each metric series. Gridlines, rotated axis labels, and a legend clarify the chart, which renders as SVG.

Sshaikfayazfz64@gmail.com
81% 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
76% match
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
75% match
Loading thumbnail…

Fork of Question 2

This chart shows daily coffee sales quantities as a vertical bar chart, with dates on the x-axis and sales quantity on the y-axis. The code loads CSV data via `d3.csv`, parses the Quantity field into numbers, and renders bars using `d3.scaleBand` and `d3.scaleLinear`. It appends SVG rectangles, styled with a steelblue fill, and adds axes using `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability. The visualization relies on D3 v7 and renders entirely in SVG.

GGorantla Vishnusai
75% match
Loading thumbnail…

Fork of Bar chart

This fork of a bar chart visualizes the top 15 coffee-exporting countries by metric tons, with Brazil leading. The D3.js v7 code loads CSV data from a GitHub repository, sorts it in descending order, and renders horizontal bars using SVG. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` to draw axes with rotated labels. The chart includes annotations, axis titles, and an underlined heading, styled within a shadowed container.

Ssalim.mir@outlook.com
74% match
Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse CSV data with D3.js, displaying a bar chart of population figures for the top ten countries from a GitHub-hosted ICE-5 dataset. It uses `d3.csv` to fetch and parse the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for rendering bars. The page also includes a text overlay reporting file size, row count, and column count.

Bbindhureddy98
74% 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
74% match