Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published0🌍 Public
Ddivyageethanjali
Last edited Mar 29, 2022
Created on Feb 25, 2022
Forked from HTML Starter

This pie chart displays the 15 largest countries by land area, with each slice colored using D3’s `scaleOrdinal` and `schemeCategory10`. The chart loads CSV data from a GitHub gist via `d3.csv`, sorts it by area, and renders slices with `d3.pie` and `d3.arc`. A legend on the right, built with SVG `rect` and `text` elements, lists each country’s name and area in square kilometers. The visualization uses React with D3 v5 and renders entirely through SVG.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork2 of Pie chart

This visualization displays the top 10 most populous countries in 2022 as a pie chart, with each slice labeled in thousands and a legend listing country names and population values. Using D3 v5, the code fetches CSV data via `d3.csv`, computes the pie layout with `d3.pie`, and draws SVG paths with `d3.arc`. Slice colors come from `d3.scaleOrdinal`, and text labels are placed using `arc.centroid`. The chart renders in an SVG canvas with a light yellow background and includes a manual legend built from the same data.

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

Pie chart

This pie chart displays the top 10 most populous countries in 2022, with each slice labeled by population count and a color-coded legend listing country names and values. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG paths, while `scaleOrdinal` assigns colors from a hardcoded array. Population data is loaded from a CSV via `d3.csv`, formatted with `d3.format`, and rendered on a yellow background with text labels positioned using `arc.centroid`.

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

pie chart

This pie chart visualizes country populations using D3.js v6, rendering each slice as an SVG path with a categorical color scale. The code loads CSV data from a GitHub gist, processes population values, and uses d3.pie() and d3.arc() to generate the chart geometry. Each slice is labeled with its country name positioned at the arc centroid, while a custom legend built from SVG rectangles and text elements displays the color assignments alongside the chart.

Rreddyharshi08@gmail.com
82% 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
82% match
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the top 10 countries by population in 2021, using a legend to display each country's name and population in millions. The chart is built with React and D3 v5, employing `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to generate the SVG sectors. The code loads population data from a CSV file hosted on GitHub, sorts it in descending order, and renders the pie chart and interactive legend with mouseover logging.

Mmanishcheruku
81% match
Loading thumbnail…

Fork of Pie chart

A pie chart displays the top 10 countries by population in 2022, with each slice labeled in thousands and accompanied by a legend showing country names and values. The chart uses D3 v5 to load CSV data via `d3.csv`, compute slice angles with `d3.pie`, and generate SVG paths with `d3.arc`. A `d3.scaleOrdinal` maps population values to a preset color array. Text labels are positioned using the arc centroid, while the legend is built with appended rectangles and text elements.

MMalempatiSaranya
81% match