Hello VizHub

100%

✓ Published1🌍 Public

Last edited Apr 6, 2025

Created on Apr 6, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

This pie chart shows the distribution of total sales across item categories, with each slice labeled by its category and dollar amount, alongside a color-coded legend and a centered title and subtitle. It loads data from a CSV hosted in a GitHub Gist, aggregates the sales per category using `d3.rollups` and `d3.sum`, then renders the visualization with `d3.pie` and `d3.arc`. The SVG output uses `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and D3 is loaded via a script tag from d3js.org.

Nnikhilapogula@my.unt.edu

88% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This example presents a pie chart of aggregated sales data by product category, loaded from a CSV file hosted on GitHub and rendered as an SVG. It uses D3 v6 APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart displays each category’s total sales in thousands and its percentage share, with labeled arcs and a legend.

KKritin Kesav

88% match

Loading thumbnail…

Fork of Hello VizHub-Ganesh

This pie chart visualizes the distribution of sales by product category, with a legend identifying each category's color. It loads data from a CSV file hosted on GitHub and renders the chart as an SVG using D3's `pie`, `arc`, and `scaleOrdinal` APIs. The chart applies a categorical color scheme and includes a title.

Gganeshseeram2405@gmail.com

88% match

Loading thumbnail…

Piechart

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.

NNagalakshmi Thota

85% match

Loading thumbnail…

Fork of Hello VizHub

This pie chart visualizes the distribution of pizza orders by category, with each slice labeled with its count and a legend identifying the categories. The code loads data from a GitHub Gist CSV file using `d3.csv`, calculates category frequencies through manual aggregation, and renders the chart as SVG with `d3.pie` and `d3.arc`. Slices use a `d3.scaleOrdinal` color scale with `d3.schemeCategory10`, and labels are positioned via `arc.centroid`. The legend is built manually, mapping rectangles and text to each category.

Kkshravyak.2001@gmail.com

84% match

Loading thumbnail…

Activity 7

This pie chart displays total sales by product, using a CSV dataset loaded from GitHub. The D3.js v7 code (with d3.csv, d3.rollup, d3.sum, d3.pie, and d3.arc) aggregates the data and renders SVG slices labeled with product names. A color legend, built with d3.scaleOrdinal and d3.schemeCategory10, lists each product and its summed sales value. The chart uses white slice strokes and a centered layout within an 800x500 SVG.

Ddivya.matavalam828@gmail.com

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

84% match

Loading thumbnail…

ProductSales_PieChart

A pie chart visualizes the distribution of sales across six product categories, displaying each product's name and percentage inside its slice. Built with D3.js v7, the visualization uses `d3.pie` to compute arc segments and `d3.arc` for rendering paths, with an ordinal color scale assigning distinct hues. Sales data from a CSV file is loaded via `d3.csv`, and a legend on the right lists each product with its corresponding color and total sales value. The chart includes white stroke separators and labels positioned using arc centroids.

AALIMINETI SPOORTHY REDDY

83% match