Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7_Pie

✓ Published0🌍 Public
Cchandanagandla
Last edited Mar 30, 2023
Created on Mar 30, 2023
Forked from ICE-7_Pie_Fajardo

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of ICE #7 - Pie Chart

This visualization displays the inflation rates of the ten G20 countries with the highest values as of February 2023, using a pie chart with a color-coded legend. The chart is rendered as an SVG using D3 v5, with slices generated via `d3.arc` and colored using `scaleOrdinal` with the `schemeCategory10` palette. The legend lists each country and its corresponding rate, formatted as a percentage. Data is loaded asynchronously from a CSV file hosted on a GitHub Gist, sorted in descending order, and then visualized.

Cchandanagandla
88% 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
87% match
Loading thumbnail…

Fork of Pie Chart

This example displays the cost of living for the top 10 countries using a pie chart, with each slice colored and accompanied by a legend listing country names and dollar amounts. The visualization is built with D3 v5 in a React framework, rendering SVG elements via `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, while loading CSV data from a GitHub gist. Data is sorted and sliced to show only the top 10 values, with hover interactions logging slice data to the console.

Nnavyasrimeka9@gmail.com
84% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the distribution of Amazon users across the top 10 countries, with each slice labeled by its value in thousands and a corresponding legend listing countries and their respective user counts. Built with D3 v5, the visualization uses the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate and color the arcs, while `d3.select` and `d3.format` handle SVG rendering and tick labels. Data is fetched asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements within a 960x500 canvas.

SSUSHMA CHIRRA
83% match
Loading thumbnail…

ICE #7 - Pie Chart

This pie chart visualizes February 2023 inflation rates for the top ten G20 countries, ordered from highest to lowest. Each slice's color corresponds to a category, and a legend lists country names alongside their percentages. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate the SVG segments and legends. Data is loaded from a CSV hosted on a Gist, with values formatted with a custom percentage function. The chart is built with React and rendered as an SVG, with interactive mouseover logging of data values.

KKevin Raj
83% 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
83% 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
83% match