Skip to main content
SimilarExport ZIP
100%

ICE - 7 Pie Chart

✓ Published0🌍 Public
PPriyanka7002
Last edited Mar 28, 2022
Created on Mar 28, 2022

This example visualizes smartphone sales in millions from 2012 to 2021 as a pie chart, with each slice representing a year's sales. The chart uses d3.pie to compute the arc angles and d3.arc to generate the SVG path segments, with d3.scaleOrdinal assigning a fixed color palette to each slice. Slices display their numerical sales values, while a side legend pairs each year with a colored rectangle and its corresponding sales figure. Data is loaded as CSV from a GitHub gist using d3.csv, and the SVG canvas is centered with a heading above the chart.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 - Pie chart for Mobiles sales

This example displays a pie chart of mobile sales by brand, with each slice labeled by its sales value and accompanied by a legend showing brand names and corresponding figures. It imports data from a CSV file using `d3.csv` and renders the chart as an SVG. The pie layout (`d3.pie`) and arc generators (`d3.arc`) create the slices, while a `scaleOrdinal` maps sales values to a fixed array of section colors, with text and legend elements positioned manually.

YYbg99
89% match
Loading thumbnail…

ICE 7

This pie chart visualizes sales by category, displaying five segments for electronics, furniture, clothing, and toys. The chart uses D3.js v7 to load the sales.csv dataset, then applies `d3.pie()` and `d3.arc()` to compute slice geometries, with `d3.scaleOrdinal` and `d3.schemeTableau10` assigning colors. It renders as SVG with category labels positioned via `labelArc.centroid()` and includes a legend showing each category and its value. Hovering over a slice reveals a tooltip with the category name and numeric value.

Aankitgoudpoodhari07@gmail.com
88% match
Loading thumbnail…

ICE - 7 Pie chart

This example presents a static pie chart that visualizes the percentage of car sales attributed to different car companies. The chart is rendered as an SVG using D3.js version 5, with each slice colored from a predefined palette. The code constructs the pie chart by loading data from a remote CSV file using `d3.csv`, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and style the slices. It also appends text labels at the centroid of each slice via `arc.centroid`, and a legend is built manually with rectangles and text elements.

Ppremsaiv
88% match
Loading thumbnail…

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

RRamyapriyaPutta
87% match
Loading thumbnail…

ICE - 7 Pie Chart for Car Sales (11508271)

This example visualizes top brand car sales in the USA for 2020 as a pie chart, with each slice labeled in thousands and a legend listing brands and their corresponding sales values. It uses d3.csv to load the data from a remote CSV file, then d3.pie and d3.arc to generate the chart’s paths, while d3.scaleOrdinal assigns colors to slices. All rendering is done via SVG, with text elements placed using arc.centroid for slice labels and a custom legend built from appended rectangles and text.

Aabdulmoin9624
87% match
Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes regional sales distribution, with each slice representing a region's proportion of total sales and a legend showing region names with percentage values. The code loads sales data from a GitHub-hosted CSV using d3.csv, then renders the chart with d3.pie and d3.arc functions, applying colors via scaleOrdinal. SVG elements are appended to the page using d3.select, with legend text formatted via d3.format to display percentages. The visualization uses d3.v5 and outputs the result as scalable vector graphics.

Kkuraakhila9@gmail.com
87% match
Loading thumbnail…

ICE7 Pie Chart

This D3.js (v5) pie chart visualizes the proportional sales share of three customer segments—Consumer, Corporate, and Home Office—using data loaded from a CSV file. The chart employs `d3.pie` to compute arc segments, `d3.arc` for the pie geometry, and a categorical color scale from `d3.scaleOrdinal` to differentiate segments. An interactive legend displays each segment’s label and its percentage value, formatted with `d3.format`. The SVG canvas is 1280×800 pixels, with the pie centered and legends positioned to the right for clarity.

SSharmaAshwini
86% match
Loading thumbnail…

ICE 7 Pie Chart

This pie chart displays 2021 car sales by type, with each slice labeled by car category and its percentage of total sales. A legend to the right provides additional identification of the color-coded segments. The visualization is built using D3.js v5, which handles the data loading, pie layout, and arc generation. The code uses `d3.pie()` to compute the angles, `d3.arc()` to draw the slices, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the color palette, with data fetched from a remote text file.

RRahulbelede97@gmail.com
86% match