Skip to main content
SimilarExport ZIP
100%

Firoze Piechart

✓ Published0🌍 Public
Sshaikfiroze186@gmail.com
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from My 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.

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_Q1

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.

Sshaikfiroze186@gmail.com
83% match
Loading thumbnail…

Activity7.1

A pie chart displays the share of browser usage from a CSV dataset, with each slice labeled by its percentage. The chart uses D3 v7 to load CSV data asynchronously, applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, and renders via SVG. A legend on the right maps color swatches to browser names, while slice texts show the corresponding usage values. The example demonstrates handling remote CSV data, SVG path generation, and legend construction with D3's `select` and `append` methods.

SSiddhardha
81% 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…

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

Activity_7

This pie chart visualizes fruit category proportions loaded from a GitHub Gist CSV file, with each slice labeled and colored using d3.scaleOrdinal with d3.schemeSet3. The D3 v7 code loads the data via d3.csv, converts values to numbers, and generates arcs with d3.pie and d3.arc. A custom legend, built as HTML divs, displays each category’s color and percentage. The SVG rendering includes white category labels positioned at slice centroids.

Aaschowdary.shashi@gmail.com
81% match
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
80% match
Loading thumbnail…

pie

This pie chart displays the categorical sum of a numeric value, with interactive controls to select the category and value columns from a CSV/TSV dataset. Small slices below a configurable minimum share are grouped into an “Other” slice, and the chart updates with animated transitions. Built with D3 v7, it uses `d3.dsvFormat` for automatic delimiter detection, `d3.rollup` for aggregation, and `d3.arc` for rendering each slice as an SVG path. Hovering reveals a tooltip with the exact value and percentage share. The data is fetched from a remote gist file.

Sshreelasya.bezawada@gmail.com
80% match
Loading thumbnail…

Activity 7

A pie chart visualizes the distribution of housing data by ocean proximity, with each slice colored and labeled to show the count of homes in each category. The chart includes a title and a legend displaying category names with their corresponding counts. Built with D3.js (v6), the visualization loads CSV data from a GitHub repository, uses `d3.pie` and `d3.arc` to generate the pie slices, and applies `d3.scaleOrdinal` with `schemeCategory10` for colors. The SVG rendering includes slice labels positioned via `arc.centroid` and interactive hover-free styling.

Pperamranji
80% match