Skip to main content
SimilarExport ZIP
100%

piechart

✓ Published0🌍 Public
Jjaswanthreddy2715@gmail.com
Last edited Nov 5, 2024
Created on Nov 5, 2024
Forked from HTML Starter

This visualization displays a pie chart representing the top 10 store areas by sales, with each slice labeled by its sales value and accompanied by a color-coded legend. The chart sorts the input CSV data in descending order before extracting the top 10 entries, then uses d3.pie() and d3.arc() to generate the slices within an SVG rendered by React. The code employs d3.scaleOrdinal for color assignment and d3.csv to load the Stores dataset from a GitHub gist, with slice labels positioned using arc.centroid().

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

pie chart

This pie chart visualizes the top 10 store areas by sales, using D3 v7 to load CSV data, sort it, and render an SVG pie chart with colored slices, labels, and a legend. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to draw paths, and `d3.scaleOrdinal()` for color encoding. Store area names and corresponding sales values appear both on the slices and in a legend, with data sourced from a GitHub-hosted CSV file.

RRohithNaiduDevareddy@my.unt.edu
93% match
Loading thumbnail…

Fork of pie chart

This pie chart ranks the top 10 store areas by their sales figures, using color-coded slices and a corresponding legend to identify each area. The visualization is built with D3.js v7, using the `pie` function to compute slice arcs and `arc` to draw them as SVG paths. Store sales data is loaded from a CSV file and sorted to display the largest values. Each slice is labeled with its store area code and sales total, with a legend on the right providing a color key.

SSaiHarshitManda@my.unt.edu
91% match
Loading thumbnail…

D3JS_ASSIGNMENT

This visualization displays a pie chart of the top 10 store areas ranked by their sales, with each slice labeled by store area name and sales value. The chart uses D3.js v7 to load CSV data, sort it, and generate the pie layout with `d3.pie()` and `d3.arc()`. Colored slices and a custom legend highlight each category, while store area names are overlaid on the chart using arc centroids. The SVG rendering includes a title and axis labels, with data sourced from a remote GitHub repository.

AArungopal Andalam
89% match
Loading thumbnail…

Fork of Crop_Yield - Piechart

This pie chart visualization displays the top 10 store areas ranked by sales, with each slice labeled with the store area code and its corresponding sales value. The chart uses a legend to identify the color-coded segments and includes store area names positioned directly on the pie slices. Built with D3.js v7, the example loads CSV data, sorts it descending by sales, and uses `d3.pie()` with `d3.arc()` to generate the paths, while a `d3.scaleOrdinal` assigns colors to the categorical labels.

Nnavyasrimeka9@gmail.com
89% match
Loading thumbnail…

Task-9

This visualization shows the top 10 store areas by sales as a pie chart, with each slice labeled by its store area code and corresponding sales value, alongside a legend listing all areas. The code loads a CSV dataset from GitHub, sorts and filters it, then uses d3.pie() and d3.arc() to generate the chart within an SVG canvas. A d3.scaleOrdinal assigns distinct colors to slices, and custom text elements are positioned using arc.centroid(). The legend is built manually with SVG rects and text elements, and axis-like labels for "Store Area" and "Sales" are added as decorative text.

AArungopal Andalam
87% match
Loading thumbnail…

Activity 7

This pie chart visualizes the top 10 store areas by sales, using a dataset fetched via `d3.csv` from a GitHub-hosted CSV file. Slices are generated with `d3.pie()` and drawn as SVG paths using `d3.arc()`, with each slice labeled by its store area and sales value. A legend, built with SVG groups, maps the color-coded categories to their names. The chart uses a custom color scale from `d3.scaleOrdinal()` and is styled with a bordered SVG container.

Hhlmn4936@gmail.com
87% match
Loading thumbnail…

Bhavitha pie chart

This visualization displays the top 10 store areas by sales as a pie chart, with each slice labeled by its sales value and a color-coded legend identifying each store area. The code loads CSV data from a gist, sorts it in descending order, and uses d3.pie and d3.arc to generate the chart. A d3.scaleOrdinal maps categorical colors to slices, while SVG text and legend elements render directly in the browser without additional frameworks.

Bbhavithamanyam@gmail.com
86% match
Loading thumbnail…

hr_pie chart

This pie chart visualizes the top 10 store areas by sales, with each slice labeled and a legend identifying store area codes and their corresponding sales figures. Sorted data from a CSV file is loaded via `d3.csv` and rendered using `d3.pie` and `d3.arc`. D3’s ordinal color scale assigns distinct colors to slices, while SVG text elements position labels at arc centroids. The chart includes a custom legend built with D3 selections.

Hhlmn4936@gmail.com
86% match