Skip to main content
SimilarExport ZIP
100%

firoze_Q1

✓ Published0🌍 Public
Sshaikfiroze186@gmail.com
Last edited Apr 21, 2024
Created on Apr 21, 2024

This example displays the distribution of ice cream sales as a pie chart, with each slice sized proportionally to its sales category and accompanied by a legend. It uses D3 v7, loaded via UNPKG, to generate an SVG graphic with the `d3.arc()` and `d3.pie()` functions for the chart layout. The page renders static, pre-defined data without interactivity, and styles the container, SVG, and legend items using a separate CSS file. The legend is built dynamically with DOM elements to match the chart’s color-coded slices.

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…

Firoze_T9_Q1

This example shows the distribution of ice cream flavors by sales as an interactive pie chart. It uses D3.js v7 to fetch a CSV file from a GitHub gist, parse the data, and aggregate flavor counts. The visualization employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a categorical color scheme to render the chart and its legend.

Sshaikfiroze186@gmail.com
90% match
Loading thumbnail…

Firoze Piechart

This example shows a pie chart of daily activities and their percentage shares, with hovering over each slice revealing the activity name and value via a tooltip. It loads a CSV dataset from a GitHub repository and uses D3 v7 APIs including `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arcs. The chart is rendered as SVG within a fixed-size container, with colors assigned from `schemeCategory10` and no sorting applied to the data order.

Sshaikfiroze186@gmail.com
83% match
Loading thumbnail…

Firoze_pchart

This example shows the distribution of Formula 1 car brands as a pie chart, with each slice labeled by its percentage of the total. The chart uses a categorical color scale and includes a legend, title, and axis labels. Built with D3 v6, it loads CSV data, applies the d3.pie and d3.arc generators to compute and draw the arcs, and uses d3.scaleOrdinal with schemeCategory10 for coloring. Percentage labels are positioned using arcGenerator.centroid, with SVG rendering throughout.

Sshaikfiroze186@gmail.com
81% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage sales of different items in a pie chart, with a legend displaying each item’s name and corresponding value. Built with D3 v5, it loads data from a CSV hosted on GitHub, converts sales values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the SVG path segments. Colors are assigned via `d3.scaleOrdinal`, while the legend is manually created with appended rectangles and text. The chart is rendered entirely in SVG, with a fixed width and height, and no interactive behavior.

MMar-99
81% match
Loading thumbnail…

ice7 part2

This example presents an interactive pie chart built with D3.js v7 that visualizes static sales data across four product categories. The chart renders as an SVG, with each category represented by a colored slice, and uses a hover interaction to display a tooltip showing the category name and its sales value. The code employs `d3.pie()` to compute the arc angles, `d3.arc()` to generate the slice paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. A separate HTML legend lists each category with its corresponding color swatch.

Jjammigumpula.priyanka193@gmail.com
81% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage of sales for different items using a pie chart with a color-coded legend. The chart is rendered as an SVG, with each slice’s arc and fill color generated via `d3.arc()` and `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV URL using `d3.csv`, and the legend displays each item’s name and sales percentage, formatted with `d3.format`. The visualization relies on D3 v5 and a custom `bundle.js`, with the pie layout computed by `d3.pie()`.

MMar-99
80% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the percentage of sales for different items, with a legend positioned to the right showing each item’s name and corresponding value. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the dataset from a GitHub gist. The visualization renders as SVG, with section labels and legend text styled via CSS.

RRahulSai05
80% match
Loading thumbnail…

Pie Chart Creation ICE7

This example visualizes item sales and their percentages as a pie chart, with a legend displaying each item and its corresponding share. The chart uses D3 v5 APIs, including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and color the chart segments. Data is fetched from a remote CSV file, and total sales are calculated to render the percentage labels. The visualization is rendered as SVG, with a legend on the right side that pairs a color swatch with each item’s name and percentage value.

Aavvarijayakrishna99@gmail.com
80% match