Skip to main content
SimilarExport ZIP
100%

Activity_7_PieChart

✓ Published0🌍 Public
Kkamalini.ponnuru11@gmail.com
Last edited Oct 30, 2024
Created on Oct 30, 2024
Forked from Pie Chart

This pie chart visualizes the distribution of watch models by brand, using an interactive legend and tooltips to display exact counts and percentages. The chart is rendered with SVG elements and animated transitions, built using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs alongside React. Data is loaded from a remote CSV and aggregated client-side, with hover interactions revealing detailed brand statistics.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Actvity 7.1.1

This pie chart depicts the distribution of car models by brand, aggregated from a CSV file of individual car records. The visualization uses D3 v5 to generate SVG arcs, with an interactive tooltip revealing each brand's model count and percentage on hover. A legend displaying brand names, color swatches, and formatted model counts accompanies the chart, and the code explicitly uses `d3.pie`, `d3.arc`, `scaleOrdinal`, and `schemeCategory10` for rendering and color assignment.

Yyadlapallisaisathvik@gmail.com
84% match
Loading thumbnail…

activity7_PieChart

This example shows the distribution of phone brand counts as a pie chart with labeled percentage slices and a color-coded legend. Using the D3.js library, it loads CSV data from a GitHub repository, calculates proportional arc segments via `d3.pie`, and renders them with `d3.arc`. Each slice displays the brand name and computed percentage, while the legend maps brands to their assigned colors. The chart is drawn as an SVG element, centered on an 800x500 canvas with a light background.

Ssairamisetti3829@gmail.com
82% match
Loading thumbnail…

Activity 7_1

This pie chart displays the market share of smartphone brands, using percentage labels for slices above 5% and a legend listing each brand alongside its count. The visualization is rendered as SVG using D3 v7, with the `d3.pie()` layout, `d3.arc()` for the path geometry, and `d3.scaleOrdinal` for categorical coloring. Data is loaded from a CSV file via `d3.csv()`, and the chart is positioned with a translated group. The code also adds generic X and Y axis labels, even though no axes are present.

Bbhargavipagolu2025@gmail.com
82% match
Loading thumbnail…

Activity-7 q-1

A pie chart displays the distribution of sales counts across different brands, with each slice labeled and colored uniquely. The chart is rendered as an SVG using D3.js v7, with data loaded from a CSV file via `d3.csv` and aggregated using `d3.rollup`. Slices are generated with `d3.pie`, and a legend positioned to the right shows brand color mappings. Hover tooltips are not implemented, but static labels and a Tableau10 color scheme provide clarity.

Bbhargavireddy4016@gmail.com
81% match
Loading thumbnail…

Activity7_Piechart

This example shows the global smartphone market share distribution across brands using a pie chart, with each slice representing a brand’s percentage and a color-coded legend listing all brands alongside their values. The visualization loads D3 from UNPKG and uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths, while data comes from a hardcoded array of brand shares. The chart is rendered entirely with SVG elements, and the legend uses `d3.selectAll` to append rectangles and text labels for each brand.

Llikhitha.sarahah01@gmail.com
81% match
Loading thumbnail…

Activity_7

This pie chart displays the percentage share of smartphone brands or models from a CSV file loaded from GitHub, with slices sized proportionally to each category’s value. The visualization renders slices using D3’s `d3.pie` and `d3.arc`, with percentage labels positioned via `arcLabel.centroid` and a supplementary legend constructed from SVG rects and texts. Data is processed using helper functions that detect label and value columns, filter null entries, and normalize sums exceeding 100 into percentages. The chart uses D3 v7’s `d3.csv` fetch, `d3.rollup` for counting, and `d3.scaleOrdinal` with the Tableau10 color scheme for categorical coloring.

Bbhargavipagolu2025@gmail.com
81% match
Loading thumbnail…

Activity 7

This example shows the market share of smartphone brands as a static pie chart with a legend identifying each brand by color. The visualization is rendered as an SVG using D3.js v5, with data loaded from a CSV file hosted on GitHub. The code uses `d3.csv` to parse the data, `d3.pie` to compute the angular layout, `d3.arc` to generate the pie slice paths, and `d3.scaleOrdinal` to assign colors from a predefined categorical palette. The chart includes a legend of circles and text labels, along with a title and axis labels for context.

Sssuryateja804@gmail.com
80% match
Loading thumbnail…

piechart_rt15

This pie chart visualizes mobile phone sales aggregated by brand, using data fetched from a remote CSV file. The chart displays each brand as a colored slice with a label showing the brand name and total sales, alongside a legend with color-coded entries. Built with D3.js v7, the visualization uses `d3.csv` to load data, `d3.rollup` to aggregate sales per brand, and `d3.pie` and `d3.arc` to generate and render the slices as SVG paths. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) assigns distinct colors, and the legend is constructed manually with styled HTML divs.

Ttelkapallyrekha@gmail.com
80% match