Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Fz_Ice7_Line_plot

This line chart shows the average aroma score for each coffee origin, with origins sorted alphabetically along the x-axis. The chart uses a point scale for origins and a linear scale for scores, with the line connecting points to reveal trends across regions. d3.csv loads the coffee dataset, and d3.rollups computes mean aroma values per origin. The SVG rendering includes rotated tick labels for readability and interactive tooltips on each data point via SVG title elements.

Sshaikfayazfz64@gmail.com

82% match

Loading thumbnail…

Fork of Project with D3.js!

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.

Sshaikfayazfz64@gmail.com

81% match

Loading thumbnail…

Fz_Ice7_Area_Chart

This area chart displays the average Aroma Score for coffee beans grouped by origin, with origins sorted alphabetically along the x-axis and mean scores plotted on the y-axis. The visualization uses D3 v7 to load a CSV file, aggregate the data with `d3.rollups` and `d3.mean`, and render smooth paths via `d3.area` and `d3.line` with a monotone curve. SVG axes are generated using `d3.axisBottom` and `d3.axisLeft`, with rotated tick labels for readability.

Sshaikfayazfz64@gmail.com

79% match

Loading thumbnail…

Fork of Fz_Ice7_reusable_scatter_plot

This scatter plot visualizes the relationship between acidity and sweetness levels across various coffee varieties, with point size encoding aroma score and color distinguishing roast level. The visualization uses a reusable scatter plot factory built with D3 v7, employing scaleLinear, scaleSqrt, and scaleOrdinal to map data dimensions. The chart renders as SVG with hover tooltips displaying detailed coffee information, while an HTML legend indicates roast categories. Data comes from a CSV file containing coffee attributes measured on quality scales.

Sshaikfayazfz64@gmail.com

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

75% match

Loading thumbnail…

Fork of Bar chart

This example visualizes the top 15 coffee-exporting countries using a horizontal bar chart, with Brazil leading in export volume. The data is loaded from a CSV file and sorted in descending order, with each bar’s length proportional to metric tons exported. D3 v7 renders the chart as an SVG, using a linear scale for the x-axis and a band scale for the y-axis, and includes rotated tick labels for readability. The visualization is titled "Top 15 Coffee Exporters" and includes axis labels for clarity.

Cchamarthisreenivasvarma@gmail.com

74% match

Loading thumbnail…

Coffee Scatter Plot

This scatter plot compares aroma and flavor ratings for the first 500 coffee samples from the Coffee Quality Institute dataset, showing a positive correlation between the two taste attributes. The visualization uses D3 v5 scales, axes, and SVG circles, with data loaded via `d3.csv` and parsed with unary plus operators. Axes are rendered using `axisBottom` and `axisLeft`, while circles are appended to a group element with a brown fill and low opacity. The chart’s domain is fixed from 7 to 9 for both scales, and axis labels and a title are added as SVG text elements.

OOxfordComma

74% match