Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public
Nnikhilapogula@my.unt.edu
Last edited Apr 13, 2024
Created on Apr 13, 2024

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.

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…

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
93% 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
91% 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
90% 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
88% match
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a chocolate sales pie chart, showing the distribution of chocolate brand sales through color-coded slices with a legend. The visualization loads CSV data from a GitHub gist, processes it with D3.js v7’s `d3.rollup` and `d3.pie`, and renders slices using `d3.arc`. A color scale with `d3.scaleOrdinal` assigns distinct colors to each brand. The code also includes a separate reusable `pieChart.js` module using `d3-shape` and `d3-scale-chromatic` for chart generation, with an SVG-based output.

Kkirankumari26guj@gmail.com
88% match
Loading thumbnail…

Fork of two

This pie chart shows the proportion of total sales by product category, with labels on each slice and a legend to the side. It uses D3 v7’s `d3.rollups` to aggregate sales per category and `d3.pie` to generate arcs, while `d3.scaleOrdinal` assigns colors. Each slice’s centroid is computed with `d3.arc.centroid` for label placement, and the SVG is rendered from CSV data.

Mmsahithipatel@gmail.com
87% match
Loading thumbnail…

Fork of Hello VizHub

This visualization shows sales figures across different product categories as a filled area chart. The SVG is rendered using D3 v7, with a steelblue area path encoding values through the vertical axis. The chart loads its data from a public GitHub gist and uses D3's `d3.json` to parse it, `d3.scalePoint` and `d3.scaleLinear` for axes, and the `d3.area` generator for the path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with manually placed text labels.

Ssairohithchada@gmail.com
86% match
Loading thumbnail…

Fork of Hello VizHub 91

This example visualizes the distribution of data across ten team categories using a pie chart rendered in SVG. It loads a CSV file from a GitHub gist, processes the data with D3 v5, and displays each slice with its corresponding percentage value. The chart uses `d3.pie`, `d3.arc`, and a color scale, with a manually positioned legend listing team names and colored markers.

Iiamjathin11@gmail.com
86% match