Skip to main content
SimilarExport ZIP
100%

Fork of Fz_Ice7_reusable_scatter_plot

✓ Published0🌍 Public
Sshaikfayazfz64@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from Fz_Ice7_Line_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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fz_Ice7_Pie_Chart

This pie chart shows the distribution of coffee roast levels—Light, Medium, and Dark—across a dataset of coffee beans. The chart uses a D3 v7 SVG rendering with a custom legend, displaying counts for each category. The code loads coffee data from a CSV file, normalizes the Roast_Level field, and aggregates counts using `d3.rollups`. It then visualizes the results with `d3.pie`, `d3.arc`, and a color scale from `d3.schemeSet2`.

Sshaikfayazfz64@gmail.com
80% 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
79% match
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
78% 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
78% 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
78% match
Loading thumbnail…

Fork of Reusable Scatter Plot ICE-7

This scatter plot shows the relationship between calorie count and price for a cafe menu of drinks and snacks, using each item’s hex color to encode its identity. Built with D3 v7 (d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft), it renders an SVG with hover tooltips that reveal the item name, category, and both plotted attributes. The legend lists categories, and the chart reads from a CSV file containing product specifications.

118121a1545
77% match
Loading thumbnail…

Fork of Fork of Reusable Scatter Plot

This scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples. The D3.js v6 code loads CSV data and renders circles on an SVG canvas using `d3.scaleLinear` for axes and `d3.extent` to determine the domain. The x-axis uses `d3.axisBottom` and the y-axis `d3.axisLeft`, with points colored steelblue.

Bbhargavinalamothu@gmail.com
76% match