Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Pie Chart

✓ Published0🌍 Public
TTejucmandava
Last edited Mar 26, 2023
Created on Mar 26, 2023
Forked from Fork of Pie Chart

A pie chart displays the premium monthly cost of Netflix subscriptions across various countries, sourced from a CSV file hosted on GitHub. Built with React and rendered using SVG, the visualization uses D3.js v5 APIs including `select`, `csv`, `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the chart and a custom legend. The data is sorted and the top 10 countries are shown, with tooltip logging to the console on mouseover.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the premium monthly cost of Netflix subscriptions across different countries, displaying the top 10 most expensive plans. The chart uses D3 v5’s `pie` and `arc` generators to create SVG segments, with `scaleOrdinal` and `schemeCategory10` for color mapping. Each slice’s fill color corresponds to the cost value, and a legend lists country names with their respective prices in US dollars. Data is loaded asynchronously from a CSV file hosted on GitHub Gist via `d3.csv`, and the render function sorts the data by premium cost before slicing the top ten entries.

TTejucmandava
95% match
Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays the basic monthly cost of Netflix subscriptions across ten countries, with a color-coded pie chart and a corresponding legend that lists each country, its color swatch, and its cost in dollars. The chart is rendered as SVG, with the data sorted in descending order before the top ten entries are displayed. The code uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the chart, and loads data from a CSV hosted on GitHub.

Mmanishcheruku
93% match
Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions for ten countries, represented as a pie chart with a legend and dollar amounts. It uses D3 v5 functions like `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding, rendering SVG elements. Data is loaded from a CSV file via `d3.csv` and sorted before rendering. The chart is implemented in a React starter template, with interaction limited to console logging on mouseover.

GGogineni44
93% match
Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions for ten countries, represented as a pie chart with a legend and dollar amounts. It uses D3 v5 functions like `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding, rendering SVG elements. Data is loaded from a CSV file via `d3.csv` and sorted before rendering. The chart is implemented in a React starter template, with interaction limited to console logging on mouseover.

GGogineni44
93% match
Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, using a dataset loaded from a CSV file. The chart renders as an SVG with color-coded segments and a legend listing each country alongside its corresponding price. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and colors, while mouseover events log data to the console. The legend displays country names and values formatted with a custom number format.

NNikitha123171
93% match
Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, using a dataset loaded from a CSV file. The chart renders as an SVG with color-coded segments and a legend listing each country alongside its corresponding price. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and colors, while mouseover events log data to the console. The legend displays country names and values formatted with a custom number format.

NNikitha123171
93% match
Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic monthly cost of Netflix subscriptions across ten countries using a pie chart with a legend. The chart is rendered with SVG elements and built in React, using D3 v5 functions such as `pie()`, `arc()`, `scaleOrdinal()`, and `schemeCategory10` for coloring. Data is loaded via `d3.csv` from a GitHub gist, sorted descending, and displayed with formatted dollar values in the legend. Each slice responds to mouseover by logging the cost to the console.

AAlonso Figueroa
93% match
Loading thumbnail…

Fork of Fork of Pie Chart

This visualization presents the basic cost of Netflix subscriptions for the ten most expensive countries, rendered as a pie chart using D3.js version 5 within a React framework. The chart displays each country's cost as a colored arc segment with a legend listing country names and corresponding dollar amounts. The code utilizes D3's `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` functions to generate the chart and its color scheme, pulling data from a CSV file hosted on GitHub Gist. Mouseover interactions log the cost values to the console.

Mmanishcheruku
93% match