Fork of DailyQA_may2

100%

Fork of DailyQA_may2

✓ Published0🌍 Public

Last edited May 3, 2021

Created on May 2, 2021

This example shows a static donut chart displaying five categorical values as colored slices with black outlines and partial opacity. The chart is rendered in an SVG generated with D3 v6, using `d3.pie()` and `d3.arc()` to compute slice geometry and `d3.scaleOrdinal()` for the categorical color scale. Dummy data is hardcoded in the script, and the visualization is centered within a fixed 450×450 pixel canvas. The code forks from a DailyQA project and includes no interactivity or animation.

AI-generated description

Daily QA Visualization in progress.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

83% match

Loading thumbnail…

Fork of HTML Starter

This example shows a donut chart displaying six data categories labeled District A through F, with values assigned as static data in a d3 array. The visualization uses `d3.arc` to create the donut shape with an inner radius of 40 and outer radius derived from the viewport, and `d3.pie` to compute the angles for each segment. The chart is rendered as an SVG appended to the body, with each slice filled in steelblue and white strokes, while custom text labels are positioned using `arc.centroid` and rotated based on the slice’s start and end angles. The color scale `d3.scaleOrdinal` defines a range but is not used for slice fills in the code.

Vvipin kumar paikra

81% match

Loading thumbnail…

Untitled

This example shows a donut chart with eight categorical slices, each labeled with a letter from "a" to "h" and connected to its slice via thin polylines. The chart uses dummy data defined as an object of key-value pairs, with slice colors mapped through `d3.scaleOrdinal` and the `d3.schemeDark2` palette. It computes arc paths using `d3.pie` and `d3.arc`, with a half-radius inner hole, while labels and leader lines are positioned via a second outer arc and centroid calculations. The visualization is rendered as SVG with semi-transparent slices and white stroke separations.

AAkshay U

79% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

79% match

Loading thumbnail…

Fork of [TEST] Pie Chart

This donut chart visualizes credit rating distributions, with categories like "AAA Local" and "BBB- Internacional" shown as proportional arc segments. The D3 v5 code uses `pie()` to compute arc data, `arc()` for path geometry, and `scaleOrdinal()` for the color palette. A legend maps labels and percentage values, rendered via SVG rects and text elements, while data is loaded asynchronously from a JSON file using `json()`.

Ggopiganta

79% match

Loading thumbnail…

Fork of Labels

This example shows a donut chart of five apple-related values with labeled slices. Each label is positioned outside the arc and connected to its corresponding slice via a thin pointer line ending in a circular marker. The implementation uses D3 v6’s `d3.pie` and `d3.arc` to compute slice geometry, with labels placed using trigonometric calculations based on each slice’s mid-angle. SVG markers are defined for both a triangle arrowhead (demonstrated in the README) and the circle used on the pointers, while `d3.scaleOrdinal` with a red-to-blue interpolator colors the slices.

PPiotr Paszek

79% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of a D3.js v4 zoomable sunburst chart displays a donut (or pie) diagram built from a static, hard-coded dataset containing five named values. The visualization encodes each categorical value as an arc segment, using a custom ordinal color scale for distinct fills and black strokes with partial opacity for clarity. The implementation relies on the `d3.select`, `d3.pie`, `d3.entries`, `d3.scaleOrdinal`, and `d3.arc` APIs from the D3 v4 library to compute and render the paths inside an SVG container, with a fixed width and height of 450 pixels.

KKian Fay

78% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

78% match