ICE 7 Assignment

100%

ICE 7 Assignment

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

A donut chart visualizes the total units purchased for each item in a dataset loaded from a CSV file. Each item's slice is labeled with its unit count, and a legend lists the items with color swatches and their corresponding values. The visualization is built with D3 v5, using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute arc segments and assign colors, with SVG rendering for the chart and legend.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment ICE 7

This example shows a pie chart of units purchased for each item, with the item names and their values listed in a legend. The chart uses D3 v5 to load CSV data from a GitHub gist and renders SVG paths with d3.pie, d3.arc, and scaleOrdinal. Value labels are placed on each slice using the arc generator's centroid method, and the legend is built manually with appended rectangles and text elements.

VVaishnavi6199

86% match

Loading thumbnail…

Fork of Assignment ICE 7

This pie chart displays the number of units purchased for each item, with values labeled on each slice and a color-coded legend listing items and their corresponding counts. The visualization is built using D3 v5, loading CSV data from a GitHub gist and rendering with SVG. It uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the chart, while the legend is constructed manually with appended rectangles and text elements.

VVaishnavi6199

85% match

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the cost of various products as a pie chart, with each slice labeled and accompanied by a legend. Built with D3 v5, it loads cost data from a CSV file hosted on GitHub. The chart’s slices are generated using `d3.pie` and `d3.arc`, with each slice's percentage label positioned via the arc's centroid. A separate legend group displays a color swatch, product name, and cost value for each item.

PPrasanth Damarla

81% match

Loading thumbnail…

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

RRamyapriyaPutta

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

80% match

Loading thumbnail…

ICE-7 pie chart

This pie chart visualizes the number of car units sold for different car models, with each slice colored distinctly and accompanied by a legend showing the car name and its corresponding value. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate the SVG paths, while data is loaded asynchronously from a CSV file via `d3.csv`. The rendering includes a centered pie with a 200-pixel outer radius, and the legend displays colored rectangles and text labels positioned to the right.

SSheshidharreddy

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

79% match

Loading thumbnail…

ICE 7 Saranya

This example displays a donut chart of aggregated sales data, with each arc labeled by its total value and a legend identifying categories. The visualization also includes tooltips on hover and uses opacity to differentiate segments. Built with React and D3 v2, it loads CSV data and processes it through a custom `TransformChartData` function to sum values by category. The chart is rendered as an SVG using `d3.layout.pie` and `d3.svg.arc`, with color mapping via `d3.scale.ordinal` and interactive legend elements.

MMalempatiSaranya

79% match