Skip to main content
SimilarExport ZIP
100%

Scatterplot Chocolate Data

✓ Published0🌍 Public
LLeah Mitchell
Last edited Sep 27, 2021
Created on Sep 14, 2021

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.

AI-generated description

Scatter plot counts_of_ingredients vs cocoa_percent for chocolate data.

Data from: https://gist.github.com/LeahMitchell/4afa22e37643ac62df2fe24b0267ebab

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

TT-Reiser
81% 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
78% 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
77% 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
76% match
Loading thumbnail…

Pie Chart Analysis Of Chocolate

This pie chart visualizes the proportional distribution of chocolate types or attributes, with each categorical segment sized to its share of the whole. Built with D3.js, the chart uses SVG arcs and a color scale to distinguish slices, while HTML and CSS structure and style the page. The rendering relies on D3’s pie and arc generators to compute angles, and transitions are applied to animate the chart on load, revealing the data-driven layout directly from the embedded dataset.

Bbhavana.bayyapu@gmail.com
75% match
Loading thumbnail…

1 dimensional Scatter Plot

A one-dimensional scatter plot displays discrete quantities for categorical food items, with each circle positioned along a linear scale for quantity and a point scale for item names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering circles as SVG elements. Data loads from a local CSV file containing item and quantity pairs. The chart includes labeled axes, a title, and horizontally aligned tick marks that extend across the plot area to aid comparison.

FFhouston17
73% match
Loading thumbnail…

Reusable ScatterPlot of the dataset

This interactive scatter plot visualizes the relationship between the year and sales figures of various chocolate products, with a focus on Snickers bars, using D3.js. The visualization cycles through four different product categories—Kinder Joy, Twix, Cadbury, and Snickers—updating the y-axis every 3 seconds while maintaining the year on the x-axis. Rendered as an animated SVG, the chart features a clean, dark-themed design with clearly labeled axes and a dynamic title that updates to reflect the currently displayed product. The reusable chart function allows for flexible data binding and transitions, making it easy to adapt to similar datasets.

Ttejasviteegala@my.unt.edu
73% match
Loading thumbnail…

Bar Chart From Memory

This bar chart displays the lengths of various candy bars, with gold and Mr.Good leading the values. Using the D3 v5 API, the visualization employs `scaleLinear` for the x-axis and `scalePoint` for the y-axis, rendering rectangles (incorrectly as circles in the source) on an SVG canvas. Data is loaded from a CSV file via `csv()`, and axes are generated using `axisLeft` and `axisBottom`, with gridlines and custom styling applied through CSS.

AAveryBurke
72% match