Fork of ICE - 7 Pie Chart OTT and subscription

100%

Fork of ICE - 7 Pie Chart OTT and subscription

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

Forked from Fork of ICE - 7 Pie Chart FOR MARkS

This visualization presents a pie chart comparing monthly subscription prices in Indian Rupees across various OTT platforms, using data fetched from a GitHub-hosted CSV file. Each slice is labeled with its price, and a color-coded legend identifies the platform names alongside their corresponding rates. The chart is built with React, D3 v5’s `pie()` and `arc()` generators, and `scaleOrdinal` for coloring, rendering in SVG. The code uses asynchronous `csv` loading and `d3.arc` for both slice geometry and centroid-based text placement.

AI-generated description

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

Similar vizzes

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…

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

81% match

Loading thumbnail…

ICE 7 - Pie Chart

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.

NNaveen Kumar

80% match

Loading thumbnail…

Fork of ICE-7_Pie_Fajardo

This pie chart visualizes the basic cost of Netflix subscriptions across the top ten countries, sorted in descending order. Each slice is colored using `d3.scaleOrdinal` with `schemeCategory10`, and labels are generated via `d3.pie` and `d3.arc` before being rendered as SVG paths. A legend with country names and dollar amounts accompanies the chart, built with SVG `rect` and `text` elements. Data is loaded asynchronously from a CSV file using `d3.csv`.

RRobFaj

80% match

Loading thumbnail…

Fork of Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

A bar chart displaying the number of users for various OTT platforms, ranked by population count. The chart uses React to manage component state and D3.js (v5) for data loading and scale generation. Data is fetched from a CSV file using `d3.csv`, with horizontal bars rendered as SVG rectangles scaled by `d3.scaleLinear`. The visualization includes gridlines and labels generated through D3's tick methods.

TTulluripallavi

79% match

Loading thumbnail…

Fork of ICE - 7 Pie chart

This pie chart visualizes survey respondents’ top choices for social media usage, with each slice labeled by its percentage and a matching color-coded legend. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the paths and `d3.scaleOrdinal` to assign categorical colors. Data is loaded asynchronously from a CSV via `d3.csv` and rendered as SVG. The code also employs `arc.centroid` to position the percentage labels directly on each slice, while the legend pairs colored rectangles with social media names and values.

RRahulSai05

79% match

Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

This horizontal bar chart visualizes the number of users of OTT platforms, sourced from a CSV file. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. React manages the data state and updates the visualization. The chart displays the first 12 rows of data, with axis ticks and labels generated via D3's axis functions.

TTulluripallavi

79% match

Loading thumbnail…

Fork of Fork of ICE - 7 Pie chart

This pie chart visualizes survey responses about people’s preferred social media platforms, displaying each category’s percentage share. The chart uses D3.js v5 with SVG rendering, fetching CSV data via `d3.csv` and constructing arcs with `d3.pie()` and `d3.arc()`. Each slice is labeled with its percentage, and a legend lists the platform names alongside color swatches and values. Colors are assigned using `d3.scaleOrdinal`, while text formatting relies on `d3.format`.

Ppremsaiv

79% match