Skip to main content
SimilarExport ZIP
100%

Pie Chart: Distribution of Items Sold by Country

✓ Published0🌍 Public
JJames Cruz
Last edited Apr 23, 2024
Created on Apr 23, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task-9-10

This visualization presents a pie chart that displays the distribution of items sold by country, with quantities aggregated per nation. The data is initially a flat list of entries, which is then grouped and summed using `d3.rollup` and `d3.sum`. The chart is rendered as an SVG using D3 v7, with slices created via `d3.pie` and drawn using `d3.arc`. Each slice is labeled with the country name and total quantity, and hover effects scale the slice via CSS transitions. The chart uses a categorical color scheme (`d3.scaleOrdinal`) to differentiate countries.

JJames Cruz
86% 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
85% match
Loading thumbnail…

pie chart

This pie chart displays the proportional sales distribution across countries for the year 2020, using a dataset of students loaded via `d3.csv`. The visualization renders each country as a colored slice with labels positioned at the centroid of each arc. It uses D3 v7’s `d3.pie()` and `d3.arc()` generators to compute and draw the arcs, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing categorical colors. A legend on the right maps colors to country names, and the SVG output is created within a fixed 600×400 pixel canvas.

Vvishnupriya eupuri
83% match
Loading thumbnail…

Pie Chart

A pie chart displays the proportion of profits for each country in a dataset loaded from a CSV file. The visualization uses D3.js v5, employing the `pie` and `arc` functions to generate the circular segments, which are rendered as SVG paths. A legend, built with SVG `rect` and `text` elements, identifies each country and its corresponding profit value. Color encoding is applied via `scaleOrdinal` with a custom color range, and profit values are formatted as thousands (K) using the `format` function. The chart is titled "Profits in Each Country."

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

Pie Chart

This interactive pie chart visualizes the top 10 best-selling books, displaying the relative share of sales (in thousands) for each country. Built with D3 v5 and rendered as SVG, it uses the `pie` layout and `arc` generator to create the chart's segments. The visualization includes a custom legend and data labels, with colors mapped via `scaleOrdinal`. The data is fetched from a remote CSV file using D3's `csv` function, and the project imports specific modules like `select`, `arc`, and `format` to handle rendering.

SSrilekha24
83% match
Loading thumbnail…

Pie chart Test

A pie chart displays the relative populations of ten countries, with each slice labeled by country name. The chart is rendered as an SVG using D3 v6, with slices generated by `d3.pie()` and drawn via `d3.arc()` paths. Colors are assigned from an ordinal scale, and labels are positioned using the `label.centroid()` method. The data comes from a static array embedded in the script rather than the linked `data.csv` file.

SSergio Eijben
82% match
Loading thumbnail…

Pie Chart

A pie chart displays the population distribution of the top ten most populous countries, with each slice sized proportionally and color-coded via a categorical scale. The chart renders as an SVG, generated from CSV data loaded from a GitHub gist. Using d3.pie and d3.arc, the visualization constructs the circular segments, while d3.scaleOrdinal with schemeCategory10 assigns slice colors. A legend on the right lists each country with its corresponding color swatch and population value, and hovering over a slice logs the population to the console.

Bbrindapotluri
82% match