Skip to main content
SimilarExport ZIP
100%

hi

✓ Published0🌍 Public
SSupriya Ravilla
Last edited Apr 12, 2024
Created on Apr 12, 2024

This example demonstrates a pie chart visualizing the distribution of different genres, with each slice labeled and accompanied by a color-coded legend. It is built using the D3.js library, importing functions such as `scaleOrdinal`, `pie`, and `arc` to generate the SVG rendering. The chart is configured with a width of 600 and height of 400 pixels, and the data, containing genres like Documentary, Drama, and Comedy, is passed to a modular `pieChart` function. The visualization highlights D3's capabilities for creating interactive and styled data representations.

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…

test

This pie chart visualizes the distribution of fruit consumption categories, with each slice representing a genre's value from data loaded via `d3.csv` from a remote CSV file. The chart uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path shapes, with `d3.scaleOrdinal` assigning categorical colors. Interactive tooltips appear via appended `title` elements, while value labels are positioned at each arc's centroid using `arcPath.centroid()`. A legend and title are rendered within the 600×600 SVG, demonstrating a reusable pie chart function.

Ggreeshmareddy135@gmail.com
82% match
Loading thumbnail…

piechart

This pie chart visualizes categorical data loaded from a CSV file, displaying each category as a colored slice with a label and a legend. The code uses D3 v6 API functions including `d3.pie` to compute arc data, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. It renders as an SVG with a centered group, positioning arc paths and text labels via the `arc.centroid` method, while the legend is built with appended rectangles and text elements.

Rrajeswariamruthabommaraju@my.unt.edu
81% match
Loading thumbnail…

Assignment-2_Question-1

This example presents a pie chart visualizing the distribution of genres from a CSV dataset, loaded via D3’s `csv` fetcher and mapped to numerical values from the “Less than 3” column. Using D3 v7, it constructs a 600x600 SVG with `pie()` and `arc()` to generate slices, colored by `scaleOrdinal` and labeled with values at each arc’s centroid. A legend and title are added, with a color range from orange to green. The reusable `createPieChart` function encapsulates the rendering logic.

RRISHIK KURIKELLY
81% match
Loading thumbnail…

hm0693_Q1

This example demonstrates how to create a pie chart using the D3.js library, visualizing the distribution of three Iris species, each with a count of 50. The chart is rendered as scalable vector graphics (SVG) with a legend displayed below. The code utilizes D3's `pie` function to compute arc data, `arc` for defining the pie slices, and `scaleOrdinal` with the `schemeCategory10` color palette. Percentage labels are positioned at the centroid of each arc, while a separate legend is constructed using HTML elements.

Mmukkamalaharichandana@gmail.com
81% match
Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar
80% match
Loading thumbnail…

Fork of pie chart

This example shows a categorical distribution as a pie chart with a legend. It visualizes five categories with varying values, each slice labeled directly and represented by a distinct color in a separate legend. The chart is built using D3 v6, leveraging `d3.pie` and `d3.arc` generators to compute slice geometry, while `d3.scaleOrdinal` assigns the categorical color scheme. The SVG output is generated from hardcoded data, with the pie centered within a 500-pixel square and a custom-styled HTML legend positioned beside it.

Ssathvik0311@gmail.com
80% match
Loading thumbnail…

DV TAK-9&10

This example shows a pie chart of music genres based on the “below 5.0” column from a CSV file hosted on GitHub. Each genre is represented as a colored slice with a white stroke, and a matching legend lists the genre labels beside the chart. The code uses d3.csv to load the data, then applies d3.pie and d3.arc to generate the segment shapes, with d3.scaleOrdinal and d3.schemeCategory10 determining the fill colors. The SVG is rendered inside a dedicated container, and the legend is built with HTML divs styled via CSS.

Nnagabinduk2023@gmail.com
80% match
Loading thumbnail…

DV TAK-9&10

This example shows a pie chart of music genres based on the “below 5.0” column from a CSV file hosted on GitHub. Each genre is represented as a colored slice with a white stroke, and a matching legend lists the genre labels beside the chart. The code uses d3.csv to load the data, then applies d3.pie and d3.arc to generate the segment shapes, with d3.scaleOrdinal and d3.schemeCategory10 determining the fill colors. The SVG is rendered inside a dedicated container, and the legend is built with HTML divs styled via CSS.

Nnagabinduk2023@gmail.com
80% match