Skip to main content
SimilarExport ZIP
100%

ICE 7.2

✓ Published0🌍 Public
Kkartik900
Last edited Mar 26, 2023
Created on Mar 26, 2023
Forked from HTML Starter

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.

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 Pie Chart

This pie chart visualizes car production sales by U.S. state, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend. The chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via the `csv` function. Slices are generated using `d3.pie` and `d3.arc`, colored through `scaleOrdinal`, and label positions are computed with the arc centroid method. The title and background styling come from a separate CSS file.

Ppethavenu
89% 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
88% 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
88% match
Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the top 10 most populated U.S. states as a pie chart, with each slice colored distinctly and accompanied by a legend showing state names and population values (in thousands). It uses d3.csv to load data from a GitHub gist, then applies d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG paths and colors. The chart is rendered with SVG elements, and legends are appended dynamically with text and rectangular markers.

Cchakritha06
87% match
Loading thumbnail…

ICE7-Pie Chart

This visualization displays U.S. state populations as a pie chart, showing each state’s population in millions with color-coded slices and a matching legend. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate and style the chart from CSV data loaded via `csv`. The SVG rendering includes slice labels positioned with `arc.centroid` and a legend built from appended `rect` and `text` elements. The data source is a GitHub gist URL.

KKolliTeja
87% match
Loading thumbnail…

ICE-7-Assignment-7- Piechart

This pie chart displays the distribution of housing sales across the ten most populous U.S. states, with each slice sized by the number of sales and labeled in a legend showing exact values. The visualization uses D3 v7 to generate an SVG pie chart, applying `d3.pie()` to compute arc angles and `d3.arc()` to render the paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to states. The data consists of hardcoded values for state populations and sales figures, and the chart includes a custom legend positioned to the right of the pie.

Ssowmyakancharla01@gmail.com
87% match
Loading thumbnail…

ICE7 Pie chart

A pie chart displays the top ten U.S. states by Democratic votes in the 2020 election, with each slice labeled by state and colored via a d3.scaleOrdinal. The chart is rendered as an SVG using d3.pie and d3.arc, with labels positioned via d3.arc centroid. Data loads from a CSV fetched with d3.csv, and the chart updates reactively in a React component using hooks.

LLakshmiVandanaNunna
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