Fork of ICE - 7 Pie Chart Maanas Katta

100%

Fork of ICE - 7 Pie Chart Maanas Katta

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

Forked from ICE - 7 Pie Chart Maanas Katta

This example visualizes the calorie counts of McDonald's top 10 best-selling menu items in a pie chart, with a legend listing each item and its calorie value. It uses D3.js v7 to load CSV data, compute the pie layout with `d3.pie()`, and render the arcs using `d3.arc()`. The chart is drawn as an SVG, with a color scale (`d3.scaleOrdinal`) mapping each item to a distinct color. The data comes from a remote CSV file containing nutritional information, and the visualization emphasizes the relative caloric contribution of each item.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Pie Chart_ICE7

This pie chart visualizes the calorie content per 100g for the top ten food items, sorted in descending order. The visualization is built using D3 version 7, rendering via SVG, with each slice’s value labeled directly on the chart. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and appends interactive text elements. The data is loaded from a CSV file, and legends display the food name alongside its formatted calorie count, with the chart centered at (250,250).

NNiharika-Guthikonda

84% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This example visualizes nutritional component comparisons across ten McDonald’s menu items, plotting three lines for total fat, protein, and carbohydrates on a shared band scale. It uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` for smooth paths. Data is loaded from a CSV via `d3.csv`, and `d3.schemeCategory10` colors the lines. The chart includes rotated x-axis labels and a legend, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Mmanthenasirisha06@gmail.com

82% match

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart shows the average cost of living plus rent for various cities, with each slice colored and paired with a legend listing city names and values in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`, computes the pie layout using `d3.pie` and `d3.arc`, and encodes colors with `d3.scaleOrdinal`. It renders as SVG, styling text and legends through CSS, and formats tick values with `d3.format`.

NNikhilchiguru-8

82% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the distribution of Amazon users across the top 10 countries, with each slice labeled by its value in thousands and a corresponding legend listing countries and their respective user counts. Built with D3 v5, the visualization uses the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate and color the arcs, while `d3.select` and `d3.format` handle SVG rendering and tick labels. Data is fetched asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements within a 960x500 canvas.

SSUSHMA CHIRRA

82% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 most populated U.S. states, with each slice labeled by its population in thousands and accompanied by a color-coded legend. Built with D3 v5, the code fetches CSV data via `d3.csv`, computes slice angles with `d3.pie`, draws arcs with `d3.arc`, and maps colors using `d3.scaleOrdinal`. Labels are positioned at each slice’s centroid, while the legend separately lists state names and values using SVG `rect` and `text` elements.

Ggayathri

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

80% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This fork of an ICE example visualizes the top 10 countries by air pollution deaths in 2020 as a pie chart, with each slice labeled by death count in thousands and a matching color-coded legend. Using d3.csv to load data from a GitHub gist, it applies d3.pie, d3.arc, and d3.scaleOrdinal to compute and render SVG paths, while d3.arc.centroid positions the slice text labels.

DDeegutla123

80% match

Loading thumbnail…

Fork of ICE - 7 Pie Chart Manvitha reddy

This visualization displays the top 10 companies and their sales figures for 2020 using a pie chart. The chart segments are color-coded and labeled with sales values, and a legend on the right maps each company name to its corresponding color and sales amount. The code uses the D3.js library (d3.csv, d3.pie, d3.arc, d3.scaleOrdinal) to fetch data from a CSV file hosted on GitHub and render the SVG chart, with custom styling applied for text and legend elements.

Mmanvithareddykarra

80% match