Activity 7.1

100%

✓ Published0🌍 Public

Last edited Nov 2, 2024

Created on Nov 2, 2024

This donut chart visualizes the top 10 most populous countries in 2020, with each slice scaled by population and a hover tooltip showing exact figures and percentages. It uses D3 v7 to load CSV data from a GitHub gist, generate the pie layout with `d3.pie()` and `d3.arc()`, and color slices via `d3.scaleOrdinal`. The chart renders with SVG, includes a loading indicator, error handling, and a detailed legend showing country names and population counts.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 7

A pie chart displays the top 10 most populous countries in 2022, loading CSV data from a GitHub gist. The code uses D3 v5 modules including `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate SVG paths and text labels showing population values in thousands. A legend with colored rectangles and text identifies each country alongside its population count.

SSathishvepuri143@gmail.com

90% match

Loading thumbnail…

Fork of SDV Activity 7

This visualization displays the top 10 countries by population in 2020 using a pie chart. Each slice represents a country’s population, with values labeled in thousands and a corresponding legend listing country names and population figures. The code uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal for slice colors, and d3.csv to load the dataset from a GitHub Gist. Text labels are positioned using arc.centroid, and the legend is built manually with appended SVG rectangles and text elements.

Aabjalshaik02@gmail.com

87% match

Loading thumbnail…

SDV Activity 7

This example shows the top 10 countries by population in 2020 using a pie chart rendered as SVG. It loads data from a GitHub gist CSV file and calculates the total population to proportionally size each slice. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute arcs, assign section colors, and format labels. A legend with colored rectangles and country names accompanies the chart.

BBamanGayathri

87% match

Loading thumbnail…

act 7 q1

This example displays a pie chart of the top 10 countries by 2022 population, with a legend alongside the slices. It uses D3.js v7 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load and process the dataset, generate the pie geometry, and assign categorical colors. The chart is rendered as SVG with text labels positioned via arc centroids, while a legend is built manually with `rect` and `text` elements. Data comes from a CSV hosted on GitHub.

Vvinaykollapudi@my.unt.edu

85% match

Loading thumbnail…

Act7_Pie

This example displays a pie chart of the top 10 countries by 2022 population, with all remaining countries aggregated into an “Others” slice. Using d3.pie and d3.arc, it generates the chart from CSV data fetched via d3.csv, processes and sorts the dataset, and renders SVG paths with colors from d3.scaleOrdinal and schemeCategory10. A legend is drawn beside the chart using d3.selectAll and attribute transforms.

IIkram Mohammed

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

84% match

Loading thumbnail…

Q1_Activity7.1

This pie chart displays world population distribution by country, loading data from a GitHub Gist CSV file and rendering it as an SVG visualization. The code uses d3.csv to fetch the dataset, d3.pie() to compute arc angles from population values, and d3.arc() to generate the path geometry for each slice. Each slice is colored using d3.scaleOrdinal with d3.schemeCategory10, with population values displayed as white labels at arc centroids. A custom legend on the right lists countries alongside colored rectangles, and the chart includes a bold title above the visualization.

Rrahman.mehmood2002@gmail.com

83% match

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