Skip to main content
SimilarExport ZIP
100%

Piechart

✓ Published0🌍 Public
NNagalakshmi Thota
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from Hello VizHub

This example presents a pie chart visualizing the quantity of fruits sold, with each slice labeled by its percentage of the total. The chart is rendered as an SVG within a VizHub project, loading data from a remote CSV file using `d3.csv`. The code leverages `d3.pie` and `d3.arc` to generate the slices, `d3.scaleOrdinal` with `schemeCategory10` for colors, and creates an HTML legend with colored swatches. The chart title and percentage labels appear directly in the SVG, with `d3.sum` used to compute totals.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

PieChart-D3

A pie chart displays the distribution of fruit categories from a CSV file, with each slice labeled and a corresponding color legend. The chart is rendered as SVG using D3 v7, with the pie layout created via `d3.pie` and `d3.arc`, and colors assigned through `d3.scaleOrdinal` with `d3.schemeCategory10`. Data is loaded asynchronously with `d3.csv`, and slice labels are positioned using `arc.centroid`. The legend is built manually by appending colored rectangles and text elements.

Kkblikitha22@gmail.com
87% match
Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
86% match
Loading thumbnail…

Activity 7.1

This pie chart displays the distribution of fruit quantities sold, with each slice representing a fruit type and labeled with its percentage of total sales. The visualization loads CSV data from a GitHub repository, converts the "Quantity Sold" field to numeric values, and uses D3.js v7's `d3.pie()` and `d3.arc()` generators to create the SVG arcs. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) assigns distinct colors to each fruit, while percentage labels are positioned using `arc.centroid()`. A custom HTML legend below the chart maps each color swatch to its corresponding fruit name.

NNagalakshmi Thota
86% match
Loading thumbnail…

Piechart

A pie chart displays chocolate sales proportions by product category. The visualization uses D3.js version 7, loading data from a CSV file and mapping category values to colors with `d3.scaleOrdinal` and `d3.schemeSet2`. The `d3.pie()` and `d3.arc()` functions generate the chart geometry, rendering each segment as a filled SVG path with white strokes. A custom HTML legend, built with D3 selections, labels each category using the same color scale, while the page layout is styled through external CSS.

Kkirankumari26guj@gmail.com
85% match
Loading thumbnail…

fruits

This pie chart shows the proportional distribution of fruit quantities sold, with each slice labeled by its percentage of the total. It is built with D3 v7, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.csv` to load the dataset from a GitHub-hosted CSV. A custom legend and a bold title are added below the SVG chart.

NNagalakshmi Thota
85% match
Loading thumbnail…

pie_sales

This pie chart visualizes product sales from a CSV file, displaying each product’s share as a colored slice with labels positioned at each slice’s centroid. The chart uses d3.pie() to compute arc angles and d3.arc() to render the SVG paths, with a d3.scaleOrdinal and d3.schemeCategory10 providing color encoding. A legend below the chart lists each product and its corresponding sales value, generated from the same loaded data. The visualization is built with D3 v7 and rendered as inline SVG within an HTML container.

PP Manisha
85% match
Loading thumbnail…

Pie Chart

This example displays a pie chart of sales figures for different companies, with each segment labeled by its proportional value and paired with a legend showing company names and sales totals. The chart is rendered as SVG using D3 v5, with data fetched from a CSV URL. It uses D3’s `pie` and `arc` generators to create the segments, a `scaleOrdinal` to map sales values to a set of predefined colors, and custom text elements to label each slice.

Mmanvithareddykarra
85% match
Loading thumbnail…

Hello VizHub

This pie chart visualizes total sales by product category, using data from a cleaned sales dataset hosted on GitHub. Built with D3.js v7, it employs `d3.pie` and `d3.arc` to generate the chart segments, with colors assigned via `d3.scaleOrdinal`. The code processes the CSV data with `d3.csv`, groups values using `d3.rollups`, and renders the result as SVG, including a legend and placeholder axis labels.

Ddivya.matavalam828@gmail.com
85% match