Fork of ICE - 7 Pie Chart

100%

Fork of ICE - 7 Pie Chart

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

92% match

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

91% match

Loading thumbnail…

Fork of ICE-7_Pie

This visualization displays the basic cost of Amazon across countries, presenting the top 10 countries by inflation rate as a pie chart with an accompanying legend. The chart uses D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate colored slices, while `csv` loads the data from a GitHub gist. The legend lists each country with its inflation rate in dollars, rendered as SVG elements. Interactive mouseover events log the inflation rate values to the console, and the chart is built within a React framework using D3’s selection and data join methods.

Cchandanagandla

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

87% match

Loading thumbnail…

Fork of Fork of ICE-7 Pie Chart

A pie chart shows the total library size of films and events for the top eleven countries on Amazon Prime, sorted descending, with a legend listing each country and its value. The visualization uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` with `schemeCategory10` for color encoding, rendering as SVG. Data is loaded from a CSV file hosted on GitHub containing ICE-7 statistics, and the chart displays slices with a fixed outer radius of 150 pixels.

MMgk1255

86% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This visualization displays the cost of basic Amazon Prime subscriptions across different countries, presenting a horizontal bar chart of the top twelve countries by price. The chart uses React for component management and D3 v5 for data binding, scaling, and layout, with SVG rendering. Data is loaded from a CSV file using D3’s `csv` function, and scales are created with `scaleBand` and `scaleLinear`. Grid lines and axis tick labels are manually generated by iterating over scale ticks, and each country is represented by a colored rectangle. The visualization updates reactively as data loads, initially showing a loading message.

Vviswak12

86% match

Loading thumbnail…

Fork of ICE-7 Pie Chart

This static pie chart visualizes the distribution of films and events across the Amazon Prime library by country, showing the total library size for the top 11 countries. The chart uses d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal and schemeCategory10 for color encoding. A legend displays each country name and its numeric total value. The data is loaded as CSV from a GitHub gist, and mouseover events log the library size to the console, though no interactive tooltip is rendered.

MMgk1255

86% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This chart displays the monthly cost of Amazon Prime in twelve different countries, using a horizontal bar graph where bar length corresponds to cost. Built with React and D3 v5, it fetches CSV data from a GitHub gist and renders an SVG. The visualization manually constructs scales with `scaleBand` and `scaleLinear`, and draws gridlines, axis ticks, and rectangles using SVG primitives.

MMgk1255

85% match