Skip to main content
SimilarExport ZIP
100%

Activity 7 PieChart

✓ Published1🌍 Public
Gguttavenkata745@gmail.com
Last edited Oct 29, 2024
Created on Oct 29, 2024
Forked from Hello VizHub

This D3.js pie chart displays global internet usage by country, with each slice representing a country and its corresponding number of users. The visualization loads data from a remote CSV file and uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Labels are positioned using a custom `labelArc`, and an HTML legend is built dynamically. The SVG chart is rendered with D3's selection and data-binding methods, while styling is applied through external CSS.

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…

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

Activity7.1

A pie chart displays the share of browser usage from a CSV dataset, with each slice labeled by its percentage. The chart uses D3 v7 to load CSV data asynchronously, applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, and renders via SVG. A legend on the right maps color swatches to browser names, while slice texts show the corresponding usage values. The example demonstrates handling remote CSV data, SVG path generation, and legend construction with D3's `select` and `append` methods.

SSiddhardha
85% match
Loading thumbnail…

Activity7_Question1

This pie chart visualizes browser usage statistics, with each slice sized by usage percentage and labeled with the browser name. The visualization is rendered as SVG using D3 v7, employing `d3.pie` and `d3.arc` to construct the chart, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. Data is loaded from a remote CSV file via `d3.csv`, and a legend displays each browser name and its corresponding usage value. Text labels are placed using arc centroids, with the chart centered within a 600x400 SVG canvas.

Kkandooriabhiram@gmail.com
85% match
Loading thumbnail…

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

Ssravani1969@gmail.com
85% match
Loading thumbnail…

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

Ssravani1969@gmail.com
85% match
Loading thumbnail…

Activity 7

A pie chart visualizes the distribution of housing data by ocean proximity, with each slice colored and labeled to show the count of homes in each category. The chart includes a title and a legend displaying category names with their corresponding counts. Built with D3.js (v6), the visualization loads CSV data from a GitHub repository, uses `d3.pie` and `d3.arc` to generate the pie slices, and applies `d3.scaleOrdinal` with `schemeCategory10` for colors. The SVG rendering includes slice labels positioned via `arc.centroid` and interactive hover-free styling.

Pperamranji
83% match
Loading thumbnail…

Fork of Activity7_Question1

This pie chart visualizes browser usage statistics, with each slice labeled by its browser name and thickness proportional to its usage percentage. A legend on the right maps the categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10` to each browser with its numeric value. The chart is built with D3 v7, using the `d3.pie` layout and `d3.arc` for path generation, with data loaded via `d3.csv` from a remote gist. SVG rendering places the chart and legend, with text labels positioned via `arc.centroid`.

Kkommineniamarasadasivani2002@gmail.com
83% match
Loading thumbnail…

Activity 7.1 Question 1

This pie chart displays literacy rates for 10 countries, with each slice labeled by its rate divided by 1000 and suffixed with "K," alongside a legend mapping colors to country names. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning colors from a hardcoded array. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and slice labels are positioned using the arc generator’s `centroid` method. The chart includes both slice text and a separate legend group, with formatted numbers via `d3.format`.

UUday Vandanapu
82% match