Fork of ICE 7 Pie Chart

100%

Fork of ICE 7 Pie Chart

✓ Published0🌍 Public

Last edited Apr 24, 2023

Created on Apr 24, 2023

This example shows a pie chart of sales data for the top 10 products, with a legend displaying each product name and its corresponding sales value in units. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` for coloring segments, and renders via SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, sorted by sales, and sliced to the top 10. Hovering over a slice logs the sales value to the console. The visualization is built within a React starter framework.

AI-generated description

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

Similar vizzes

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

93% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage of sales for different items using a pie chart with a color-coded legend. The chart is rendered as an SVG, with each slice’s arc and fill color generated via `d3.arc()` and `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV URL using `d3.csv`, and the legend displays each item’s name and sales percentage, formatted with `d3.format`. The visualization relies on D3 v5 and a custom `bundle.js`, with the pie layout computed by `d3.pie()`.

MMar-99

90% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage sales of different items in a pie chart, with a legend displaying each item’s name and corresponding value. Built with D3 v5, it loads data from a CSV hosted on GitHub, converts sales values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the SVG path segments. Colors are assigned via `d3.scaleOrdinal`, while the legend is manually created with appended rectangles and text. The chart is rendered entirely in SVG, with a fixed width and height, and no interactive behavior.

MMar-99

90% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the percentage of sales for different items, with a legend positioned to the right showing each item’s name and corresponding value. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the dataset from a GitHub gist. The visualization renders as SVG, with section labels and legend text styled via CSS.

RRahulSai05

88% match

Loading thumbnail…

Fork of ICE7 Pie Chart

This pie chart displays the revenue distribution for ten beauty products, with each slice sized proportionally to its sales value and colored using the `d3.scaleOrdinal` scheme. A legend on the right lists product names and their formatted revenue values using `d3.format`. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths from the JSON dataset, which is loaded via `d3.json`. The chart renders within an 860×500 SVG, with both the pie and legend positioned explicitly via SVG transforms.

Vvidhyanamini

87% match

Loading thumbnail…

Fork of Fork of ICE7 Pie Chart

This chart displays the ten best-selling beauty products by revenue as a simple pie chart, with each slice sized proportionally to sales value and colored by category. A legend to the right pairs each product name with its revenue, formatted using D3’s `format` function. Built with D3 v5, it loads data from a JSON file and renders slices via `arc` and `pie` generators within an SVG canvas, using `scaleOrdinal` with the `schemeCategory10` palette for coloring.

RRevanthGrreddy

87% match

Loading thumbnail…

Pie chart , ICE-7

A pie chart displays the top ten weekly product sales in a shop, with each slice sized by the `weeksales` value and colored via `d3.scaleOrdinal`. The code loads CSV data from a GitHub gist using `d3.csv`, computes the pie layout with `d3.pie`, and draws SVG paths with `d3.arc`. Slice labels show formatted sales values, and a legend lists product names with matching colors and values.

AAmanullah007

86% match

Loading thumbnail…

Fork of ICE7 Pie Chart

A pie chart visualizes sales figures for ten car brands, with each slice's area proportional to the brand's sales value and labeled in a side legend showing both the car name and its corresponding number. The chart renders as an SVG using D3 v5, employing the `pie()` generator to compute arc angles from the loaded JSON data, `arc()` to create the paths, and `scaleOrdinal` with `schemeCategory10` to assign colors to slices. The legend is built manually with appended rectangles and text elements, while numeric values are formatted using D3's `format()` function.

DDeekshithVemula

86% match