ICE 7 - Pie Chart

100%

ICE 7 - Pie Chart

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This visualization displays the monthly subscription costs for YouTube Premium in ten different countries, using a pie chart to compare prices in US dollars. Each slice is colored using the `scaleOrdinal` and `schemeCategory10` color scales, with a legend on the right listing each country and its corresponding price. The code utilizes D3 v5 APIs including `pie`, `arc`, and `csv` to parse data from a GitHub Gist, sorting the values in descending order before rendering. The SVG is statically sized, and hover interactions log data to the console.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE - 7 Pie Chart

This example displays the pricing of Amazon Prime in various countries as a pie chart generated with D3.js. Each slice, colored using a categorical scale, represents a country’s subscription cost in dollars, with values labeled directly on the chart and in a legend. The visualization uses D3’s `pie`, `arc`, and `scaleOrdinal` functions to compute and render the arc segments, while the data is fetched from a remote CSV file. An interactive SVG canvas updates the chart to show total prices across all selected regions.

GGogineni44

85% match

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays the monthly price of Amazon Prime subscriptions across different countries, with each slice colored uniquely and labeled with its price in dollars. A legend to the right pairs each country name with its corresponding color and price. The visualization uses D3 v5 to fetch CSV data via `d3.csv`, process it with `d3.pie`, and render SVG paths and text using `d3.arc` and `d3.scaleOrdinal`. The color scheme is defined manually, and values are formatted with `d3.format`.

SSharanya1307

85% match

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the cost of F1 TV Pro subscriptions across different countries, with each slice labeled with its price in US dollars and accompanied by a color-coded legend. The visualization is built using D3.js v5, fetching CSV data from a GitHub gist and rendering it as SVG. The code uses `d3.pie` to compute arc angles, `d3.arc` for path generation, and `d3.scaleOrdinal` to map costs to a fixed palette. The legend is manually positioned, and all text labels use `d3.format` for numeric formatting.

PPYATA SHARAN

84% match

Loading thumbnail…

Ice 7 Pie Chart

This pie chart shows the basic cost of Netflix subscriptions across ten countries, ranked from highest to lowest, with a legend listing each country and its corresponding price. The visualization is built using D3 version 5 within a React framework, rendering as an SVG. It uses `d3.pie` and `d3.arc` to generate the sectors, with `d3.scaleOrdinal` and `d3.schemeCategory10` for color assignment. Data is loaded from a CSV file via `d3.csv`, sorted, and the top ten entries are displayed with interactive `mouseover` logging.

Mmanishcheruku

84% match

Loading thumbnail…

ICE7-Pie Chart

A pie chart displays the cost per gallon of gas for ten countries, labeled as the "Basic Cost of Netflix," with a legend listing each country and its corresponding dollar value. The visualization uses D3 v5 APIs including `pie()`, `arc()`, `scaleOrdinal` with `schemeCategory10`, and SVG rendering within a React component. Data is loaded via `csv()` from a GitHub gist, parsed for numeric cost values, and sorted to show the top ten entries.

Yyamunaunt

82% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the cost of Amazon Prime subscriptions across different countries. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`. The data is fetched from a remote CSV file containing country and price information. Revenue values are shown as black text labels on each pie slice, while a legend to the right maps a country to its corresponding price, with slices colored using a predefined array of ten colors. The pie is rendered using SVG elements appended to a 960x500 canvas.

Ttejasrikotipalli1@gmail.com

82% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the premium monthly cost of Netflix subscriptions across ten countries, with each slice colored by cost and accompanied by a legend listing country names and prices in US dollars. The visualization uses D3 v5 APIs including `pie()` for angle generation, `arc()` for path construction, `scaleOrdinal` with `schemeCategory10` for colors, and `csv()` to load data from a GitHub gist. The chart renders as SVG within a React application, displaying values sorted in descending order and updating interactively on mouseover.

TTejaswicmandava

82% match

Loading thumbnail…

ICE-7- Pie Chart for Amazon Data

This example visualizes country-wise Amazon costs using a pie chart, displaying the top 10 countries by cost with color-coded slices and a legend listing each country’s cost in dollars. The chart is rendered as SVG using D3 v5, with `d3.pie()` to compute arc angles, `d3.arc()` to generate path segments, and `d3.scaleOrdinal()` with `schemeCategory10` for colors. Data is loaded from a CSV hosted on GitHub Gist and sorted before rendering. Interactive mouseover events log the selected country’s cost to the console.

KKetha

82% match