Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
Kkirankumari26guj@gmail.com
Last edited Mar 24, 2025
Created on Mar 24, 2025
Forked from 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.

AI-generated description

Chocolate Sales Pie Chart

This visualization shows the distribution of chocolate brand sales using a D3.js pie chart.

  • Dataset: Chocolate brand sales
  • Visualized with: D3.js v7
  • Legend and color-coded slices help distinguish each brand's contribution
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a pie chart of scores loaded from a remote CSV file. The visualization uses d3.pie and d3.arc to compute and render the donut-like segments, with a categorical color scale (d3.scaleOrdinal) assigning colors. Data is fetched via d3.csv from a GitHub gist, and the SVG paths and labels are drawn with D3's data-join pattern, placing names at each arc's centroid.

CChiranjeeviUppala@my.unt.edu
88% match
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 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…

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
87% 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
87% match
Loading thumbnail…

Fork of Hello VizHub

This D3.js pie chart visualizes the global smartphone market share from a CSV file, displaying each brand or model as a colored slice with a percentage label and a legend on the right. The chart loads data from a GitHub-hosted CSV, dynamically detects label and value columns, and optionally normalizes values to percentages. It uses `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with the Tableau10 color scheme, and renders the visualization as an SVG. The code also demonstrates flexible CSV header detection and data preprocessing.

Bbhargavipagolu2025@gmail.com
86% match
Loading thumbnail…

Fork of Hello VizHub

This example shows a pie chart with a legend, displaying the quantities of four fruits. It loads D3 via UNPKG and uses local ES6 module imports. The visualization uses `d3.pie` and `d3.arc` to generate and render the slices, with `d3.scaleOrdinal` for categorical colors. It appends an SVG to the body, positions the pie in the center, and adds text labels using the arc centroid. A separate legend group is built with rectangles and text, anchored to the right side of the SVG.

KKritin Kesav
85% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a D3.js pie chart that visualizes the distribution of insurance records by region, rendered as SVG with an accompanying legend and interactive tooltips. The code loads CSV data from a GitHub-hosted dataset using `d3.csv`, aggregates region counts with `d3.rollup`, and constructs the pie with `d3.pie` and `d3.arc`. Hovering over a slice highlights it, triggers a tooltip showing the category and value, and applies categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10`.

Kkotha.shiva@btech.christuniversity.in
85% match