Skip to main content
SimilarExport ZIP
100%

ICE 7 : Task 2 (Pie Chart)

✓ Published0🌍 Public
NNITIN0601
Last edited Mar 28, 2022
Created on Mar 23, 2022
Forked from ICE 6 : Task 1

A pie chart displays year-wise Tesla sales from a CSV file, with each slice labeled by year and accompanied by a legend showing both year and sales values. The visualization uses d3.csv to load data, d3.layout.pie to compute arc angles, and d3.svg.arc for slice rendering. Ordinal scales assign categorical colors, while SVG groups position arcs, text labels, and legend rectangles. The chart is built with d3.v3 inside an HTML page with React components managing the state and rendering the SVG output.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 : Task3(Line Chart)

This visualization displays Tesla sales data by year using a line chart. The chart plots yearly sales values on a linear scale against a time-based x-axis, with axis labels for “Year” and “Sales” and a title. The code loads CSV data from a GitHub gist and renders the line as an SVG path using D3 v5’s `scaleTime`, `scaleLinear`, `line` generator, `axisBottom`, and `axisLeft` functions within a React framework.

NNITIN0601
87% 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
86% 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
86% match
Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the top car sales in 2022, with each slice sized proportionally to the number of units sold and a legend displaying car names and sales counts. The chart renders using D3 v5’s `pie` and `arc` generators to compute segment geometry, with colors assigned via `scaleOrdinal` and `d3.schemeCategory10`. Data is loaded asynchronously from `carsales.json` using `d3.json`, and the SVG is built by appending `path` and `rect` elements. The presentation uses an SVG container with a legend offset to the side, and sales values are formatted with `d3.format`.

Rrakeshkommineni
86% match
Loading thumbnail…

ICE - 7 Pie Chart

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.

PPriyanka7002
86% 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
85% match
Loading thumbnail…

ICE 7 Pie Chart

This visualization presents a pie chart of top car company sales by price, with each slice labeled with its value and accompanied by a legend listing the corresponding model names. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the segments and map categorical colors, while the legend is built manually with SVG `rect` and `text` elements. Data is loaded from a GitHub Gist via `d3.csv` in a React-based setup, with the SVG rendered directly in the browser.

Llikith1266
85% 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
85% match