Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot of Flavors Of Cocoa showing CocaoPercent (X) vs. Rating (Y)

✓ Published0🌍 Public
TT-Reiser
Last edited Sep 15, 2021
Created on Sep 15, 2021

A D3 scatter plot visualizes the relationship between cocoa percentage and flavor rating for chocolate bars, with each circle representing a sample. The x-axis maps the cocoa percentage while the y-axis shows the ratings, revealing potential correlations. Built with d3.v6, the code uses d3.csv for data loading, d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.axisLeft/axisBottom for rendering. Data comes from the FlavorsOfCacao.csv dataset, rendered as SVG circles sized with a fixed radius of five pixels.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Top Video Games Sales.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot Chocolate Data

This scatterplot visualizes chocolate data, plotting the count of ingredients against cocoa percentage. Each brown, semi-transparent circle represents a chocolate bar, with its position determined by these two variables. The visualization is built using D3 version 6, leveraging functions like `csv` for data loading, `scaleLinear` for scaling axes, and `axisLeft` and `axisBottom` for generating the axes. The plot renders as an SVG, sized to fill the browser window, and uses data from a raw CSV file hosted on GitHub.

LLeah Mitchell
81% 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
76% match
Loading thumbnail…

ICE-6 Q1

This stacked bar chart shows the distribution of cocoa percentages across chocolate companies, with each bar representing a company and colored segments showing the proportion of ratings within different percentage bands. The visualization uses d3.csv to load data and d3.stack to compute stacked segments, with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Hover interactions trigger tooltips revealing exact percentage values via d3.format, while a legend maps colors to rating categories. The SVG rendering uses explicit margin-based layout and custom styling from the linked stylesheet.

117761A04F1
74% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between the ratings and sugar content of various cereals. Each circle represents a cereal, positioned along the y-axis by its sugar level and the x-axis by its rating score. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for the axes, and d3.axisLeft and d3.axisBottom to render them in an SVG. A title and axis label are included, though the data source URL points to a cereal dataset from GitHub.

Vvpruden1
72% match
Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Ssrrajendran
71% match
Loading thumbnail…

ICE-6

This bar chart displays the cocoa percentage for various chocolate companies, ordered along the y-axis with horizontal bars extending to represent each value. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map the data from the CSV file. Interactive tooltips appear on mouseover, and the bars are colored brown with a darkening effect on hover. The chart includes axis labels and a title, all rendered within a 960×500 SVG canvas.

117761A04F1
70% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
70% match
Loading thumbnail…

Dot Plot

This dot plot visualizes average chocolate ratings by company location, filtering to show only locations with ratings above 3.0. It uses p5.js to load a CSV dataset via `loadTable()`, compute averages, and render the plot on a canvas. Each row displays a location name and its corresponding average rating, with points positioned horizontally based on a transformed rating value using exponentiation. The chart includes axis lines and tick marks, with text labels drawn for each data point.

BBhumika Srinivas
70% match