7q2

100%

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from i7q1

This example visualizes internet user percentages by country as a pie chart, using a dataset loaded from a CSV file. The chart encodes each country’s share of users as an arc slice, with a legend mapping country names to their corresponding percentages. Built with D3.js v7, it uses the `d3.pie` and `d3.arc` functions to compute and draw the arcs, while `d3.scaleOrdinal` assigns categorical colors from `schemeCategory10`. The data is fetched via `d3.csv` and rendered as SVG, with a dynamically generated HTML legend styled with flexbox.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

PIE CHART

This pie chart visualizes global internet usage rates by country, with each slice sized proportionally to the internet user rate and colored via a categorical scale. Hovering highlights a slice and displays a tooltip with the country name and rate, while a legend lists all countries. Built with D3 v5, it loads CSV data from a GitHub gist and renders the chart as SVG using the `pie` and `arc` generators, with `scaleOrdinal` for colors.

DDeegutla123

81% match

Loading thumbnail…

AK's_PieChart

This D3.js pie chart visualizes social media usage percentages across ten countries, with each slice labeled by its corresponding value. The chart uses `d3.pie` to compute arc segments, `d3.arc` for generating the path geometry, and `d3.scaleOrdinal` to map categorical colors to each country. Data is loaded asynchronously from a CSV file using `d3.csv`. A legend on the right pairs each country with its percentage, and all text labels are formatted using `d3.format`. The SVG canvas is 960 by 500 pixels with a black background.

Aamulyakannam

81% match

Loading thumbnail…

ICE - 7 Pie chart Visualizations

This example visualizes the happiness distribution of the top few countries using a pie chart, with each slice labeled with its percentage and a corresponding legend. The code loads CSV data via d3.csv, computes pie angles with d3.pie, and renders the chart as SVG paths using d3.arc. It applies an ordinal color scale with predefined hex and named colors, and formats the percentage labels using d3.format. The accompanying legend lists each country and its value, with bar rects and text elements styled via CSS classes.

Rrajasrilekkala

81% match

Loading thumbnail…

dpka-pie chart ICE-7

A pie chart illustrates the percentage of internet users within the total population for ten countries, with each slice labeled with its value and a legend mapping colors to country names. The chart employs D3 v5 to load CSV data via `d3.csv`, compute arc paths with `d3.arc`, and scale colors using `d3.scaleOrdinal`. SVG rendering positions the pie, slice text via `arcGenerator.centroid`, and a custom legend. Air pollution death counts are not shown; the dataset includes percentages derived from user and population counts.

DDeepikaGoud08

80% match

Loading thumbnail…

Data Visualization ICE-7 Pie Chart

This pie chart displays country birthrates for 2021, with each slice labeled by its percentage and a corresponding legend listing country names and values. It uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` to load and process data from a GitHub gist, then renders the chart as SVG. The `arcGenerator` computes slice centroids for text placement, while `format` applies concise numeric labels. Section colors are assigned via an ordinal scale, and legends are dynamically appended with rectangles and text.

MManasaPatange

80% match

Loading thumbnail…

Piechart ICE 7

This example shows a pie chart visualizing CO2 emissions by country, sourced from a GitHub-hosted CSV file. The chart displays each country’s emission value as a labeled slice, with a legend identifying countries by color. Built with D3.v5, the code uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the slices, and renders the visualization as SVG within an HTML page.

RRebecca Moore

80% match

Loading thumbnail…

Ice 7 Pie Chart-2

This visualization presents a pie chart of countries by income, sourced from a CSV file fetched via D3’s `csv` method. Each slice’s color is mapped using `scaleOrdinal`, while `d3.arc` and `d3.pie` generate the segment paths and text labels positioned via the arc centroid. A legend on the right lists each country with its income value, formatted using D3’s `format` function. The chart renders in SVG with a title, using D3 v5.

AAmar09nath

80% match

Loading thumbnail…

ICE7-Pie Chart

This visualization displays U.S. state populations as a pie chart, showing each state’s population in millions with color-coded slices and a matching legend. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate and style the chart from CSV data loaded via `csv`. The SVG rendering includes slice labels positioned with `arc.centroid` and a legend built from appended `rect` and `text` elements. The data source is a GitHub gist URL.

KKolliTeja

80% match