Fork of Fork of ICE - 7 Pie Chart FOR MARkS

100%

Fork of Fork of ICE - 7 Pie Chart FOR MARkS

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

Forked from Fork of ICE - 7 Pie Chart FOR MARkS

A pie chart visualizes company profits from a CSV dataset, encoding each company's profit value as a colored slice with a text label showing the profit amount. The legend lists company names alongside their corresponding colors and profit values. Built with D3 v5 in a React context, the code uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to fetch and render the SVG, with pie slices positioned via `arc.centroid` and legend items generated dynamically.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE-7 Fork of Pie Chart

This visualization shows the profit percentages of various companies using a pie chart, with a legend to the right mapping colors to company names and exact values. The chart is built with D3 version 5, rendering as SVG elements on an HTML canvas. It loads company and profit data from a remote CSV file using `d3.csv`, then applies the `d3.pie` layout and `d3.arc` path generator to create the slices. Color encoding is handled by `d3.scaleOrdinal` with a predefined palette. Profit values are formatted using `d3.format` for display in the legend.

Kkarumanchimanasa

90% match

Loading thumbnail…

Fork of Fork of Fork of ICE7 PIE chart for vini

A pie chart displays salary per hour for employees, with each slice colored and labeled with its dollar value, alongside a legend pairing hourly rates with time categories. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load data from a CSV file hosted on GitHub, compute arc paths, and assign colors. Text labels are positioned using the arc centroid method, and the chart is rendered as an SVG within a React-based HTML page.

VVineela Reddy

87% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart FOR MARkS

This visualization presents student marks as a pie chart, with each slice colored and labeled by GPA, accompanied by a legend listing the corresponding time spent. Built with React and D3.js v5, the code uses `d3.csv` to load data from a GitHub gist, `d3.pie` and `d3.arc` to generate the chart geometry and centroids, and `d3.scaleOrdinal` to map GPA values to a fixed set of colors. The SVG output includes both path segments and overlaid text labels.

NNavaneeth-Ragi

87% match

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes 2015 sales data for different companies using a legend and colored arcs. The chart displays each brand’s year-to-date profit converted to thousands and rendered as a simple SVG pie. The code imports D3 v5 modules like `pie`, `arc`, and `scaleOrdinal` to generate the chart, while loading data from a CSV via D3’s `csv` function. React is used as the framework, and the page is styled with custom CSS for headings and legend text.

Ssowmyanagula@my.unt.edu

87% 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

87% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart FOR MARkS

This visualization presents a pie chart depicting study hours and corresponding GPA scores, with each slice labeled by GPA value. The chart uses D3 v5 in a React framework, employing d3.pie and d3.arc to generate SVG paths, and d3.scaleOrdinal with a custom color array to differentiate sections. Data is fetched asynchronously from a CSV file via d3.csv, and a legend displays both study time and GPA for each category. The SVG canvas is fixed at 960 by 500 pixels, with text elements positioned using arc centroids.

NNavaneeth-Ragi

86% 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

86% 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

86% match