Skip to main content
SimilarExport ZIP
100%

ICE7 - Pie Chart

✓ Published3🌍 Public
Mmamathareddy1321@gmail.com
Last edited Apr 2, 2025
Created on Apr 2, 2025

A pie chart displays total sales by region, using canvas rendering via Chart.js. A custom legend to the right lists each region and its sales amount, with color-coded swatches built from a hardcoded array of thirteen regions and sales figures. The chart disables its built-in legend and constructs the HTML legend dynamically with JavaScript, iterating over the data to create list items.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE7

A pie chart shows average sales by outlet location type, aggregating data from a CSV file. D3.js loads the remote dataset, filters invalid entries, groups by location, and computes mean sales values. The visualization uses d3.pie, d3.arc, and d3.rollup to generate slices, with d3.scaleOrdinal mapping colors and d3.sum calculating percentages for labels. A legend identifies each category, rendered as SVG within a 600x500 canvas.

Ssrinathkarumuru@my.unt.edu
85% match
Loading thumbnail…

ICE 7.2

A pie chart visualizes total sales data for U.S. states, with each slice labeled by its sales value in millions. A legend maps state names to their corresponding colors. The visualization uses D3.js v5 and React, fetching data from a CSV URL. The chart is rendered as an SVG, using D3's pie, arc, and scaleOrdinal APIs to generate the slices and color mapping.

Kkartik900
85% 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
84% match
Loading thumbnail…

ICE 7 Pie Chart

This example visualizes top product sales as an interactive pie chart, with a legend displaying each product name and its corresponding unit count. The chart renders using D3 v5 within a React framework, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded from an external CSV file via `d3.csv`, sorted by sales value, and the top 10 items are selected for display. The SVG-based visualization includes hover logging of sales values, with legends positioned alongside the chart.

Llibramanju
84% 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
83% match
Loading thumbnail…

ICE-7

A pie chart visualizes sales by category from a CSV dataset, using d3.csv to load values. The SVG graphic displays category labels on each slice via d3.arc and a legend on the right. D3 v7’s pie generator computes the arc angles, while d3.scaleOrdinal with schemeTableau10 assigns colors. The code uses `d3.pie()` and `d3.arc()` to generate paths, with tooltips added as titles, and a legend built from rectangles and text elements.

Aankitgoudpoodhari07@gmail.com
83% match
Loading thumbnail…

ICE-7 PIE Chart

This example shows the sales of various fruits as a D3 pie chart with a corresponding legend. The chart uses d3.csv to load data from a remote GitHub gist, then d3.pie and d3.arc to compute and draw the slices. A d3.scaleOrdinal maps sales values to a hardcoded color palette. The legend displays each fruit name and its sales total formatted with d3.format. The SVG rendering approach is used throughout, with the chart centered and the legend positioned to the right.

RRadhakrishna246
83% match