PIE CHART for chocolate sales

100%

PIE CHART for chocolate sales

✓ Published0🌍 Public

Last edited Mar 27, 2025

Created on Mar 27, 2025

This pie chart displays total chocolate sales per country, aggregated from a CSV file. Using Chart.js, the canvas renders the data as a pie with distinct colors for each nation, while a custom HTML legend lists the country names alongside their corresponding color swatches. The chart emphasizes the proportional sales distribution, with the country labels and values derived from the fetched dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Piechart

A pie chart displays chocolate sales proportions by product category. The visualization uses D3.js version 7, loading data from a CSV file and mapping category values to colors with `d3.scaleOrdinal` and `d3.schemeSet2`. The `d3.pie()` and `d3.arc()` functions generate the chart geometry, rendering each segment as a filled SVG path with white strokes. A custom HTML legend, built with D3 selections, labels each category using the same color scale, while the page layout is styled through external CSS.

Kkirankumari26guj@gmail.com

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

80% match

Loading thumbnail…

Pie Chart: Distribution of Items Sold by Country

This visualization displays the distribution of items sold across five countries, with each country's total quantity represented as a proportional slice of a pie chart. The chart uses d3.pie() and d3.arc() to generate the pie geometry, while d3.rollup() aggregates individual data records by country, summing their quantities. The SVG rendering includes interactive hover effects that scale slices slightly, and each slice is labeled with its country name and total quantity. The color scale uses d3.scaleOrdinal with the d3.schemeCategory10 palette.

JJames Cruz

80% match

Loading thumbnail…

AreaChart for sales

This area chart visualizes total sales in US dollars and the number of boxes shipped by country from a chocolate sales dataset. Two filled line datasets, rendered with Chart.js on a canvas, compare these metrics across countries. The chart uses tab-separated CSV data fetched from a GitHub gist, parsing and aggregating amounts per country. A custom HTML legend, built with DOM manipulation, lists each country with a corresponding color swatch, while the chart’s built-in legend and animation are disabled.

Rrohithareddy1404@gmail.com

79% match

Loading thumbnail…

pie chart

This example shows a pie chart of unemployment rates by country, with each slice labeled by country name and percentage in the legend on the right. It fetches CSV data from a GitHub gist and renders the chart on a canvas element using the Chart.js library. The code parses the CSV rows manually, assigns each country a random color, and customizes legend and tooltip callbacks to display the percentage alongside names.

Ssaisathyapriya097@gmail.com

78% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the total revenue of different countries in sales. The D3 v5 code uses `select`, `pie`, `arc`, and `scaleOrdinal` to generate SVG segments from a JSON dataset, with each slice colored distinctly. A legend, created via `append` with rectangles and text, identifies each region and its corresponding revenue value, formatted with `format('.4~g')` and suffixed with "K". The chart is centered on a 960x500 canvas, with the pie translated to the left and the legend positioned to the right.

Ppreethamkesa

78% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the basic cost of each country, with slices colored by country and a legend displaying names and dollar amounts. The D3.js v5 code loads CSV data from a GitHub gist and uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` and `schemeCategory10` for colors. A hover event logs the country and cost to the console, while the legend is built from the same pie data.

CChaitanya Ratan Sree

78% match

Loading thumbnail…

Activity7_Question1_PieChart

This pie chart visualizes chocolate sales by product for March, sourced from a CSV file hosted on GitHub. It uses D3.js to load and filter the data, calculating total sales per product with `d3.rollup` and `d3.sum`. The chart is drawn with `d3.pie()` and `d3.arc()`, while an ordinal color scale maps product names to a blue interpolated palette. A custom legend displays each product alongside its percentage of total sales, rendered as an SVG with a flexible HTML layout.

DDee

77% match