Fork of Fork of Making a Donut chart - project

100%

Fork of Fork of Making a Donut chart - project

✓ Published0🌍 Public

Last edited Apr 26, 2023

Created on Apr 26, 2023

Forked from Fork of Making a Donut chart - project

This donut chart shows the number of booking changes across five hotel market segments—Direct, Corporate, Online TA, Offline TA/TO, and Complementary—with each segment’s value multiplied by 1,000 from the CSV data. The visualization uses D3 v5’s `pie` and `arc` generators to compute the donut geometry, with a `scaleOrdinal` mapping segment names to categorical colors. Labels are positioned via `labelArc.centroid()`, and the chart is rendered as SVG, with the CSV loaded using `d3.csv`. The text labels are styled with white fill and a sans-serif font.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Donut chart - project

This donut chart shows booking changes across five hotel market segments—Direct, Corporate, Online TA, Offline TA/TO, and Complementary—using a pink background and colored arcs. The code loads data from a CSV file, multiplies booking changes by 1,000, and renders an SVG via d3.pie and d3.arc, with d3.scaleOrdinal assigning distinct colors. Segment labels are placed inside the ring using a separate labelArc and text elements. The visualization uses D3 v5 and a data-driven approach to highlight relative booking volumes.

Rrajasrilekkala

95% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

78% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

RRochelle

78% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This donut chart displays income categories (Sales, Dividends, Interest) with each slice’s percentage revealed via an interactive tooltip on mouseover. Built with D3 v5, it loads data from data.csv, scales colors with `scaleOrdinal`, and computes slice geometry using `pie` and `arc` functions. Hovering highlights each slice’s opacity change and shows a tooltip positioned at the cursor, while labeled text sits inside each arc segment. The SVG rendering includes a padded, rounded arc style with corner radius.

NNarayana Reddy

77% match

Loading thumbnail…

Fork of project-Pie chart

This pie chart shows the percentage of canceled hotel bookings by country, using a dataset loaded via d3.csv from a GitHub gist. It renders an SVG with a pie layout from d3.pie and d3.arc, coloring each slice with a scaleOrdinal mapping to a discrete palette. Labels display the percentage on each segment, and a legend lists countries alongside their values, all styled with CSS. The visualization relies on d3 v5, including d3.arc for concentric geometry and d3.format for axis text.

Kkakumanusreya

77% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999

77% match

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu

77% match

Loading thumbnail…

Fork of Pie chart Test

This example presents a large donut chart that displays the revenue figures of ten major global companies, drawn from a CSV data file. The chart is rendered as Scalable Vector Graphics (SVG) using the D3.js library, with each segment’s color assigned from a hardcoded ordinal scale. The visualization’s construction relies on the `d3.pie` function to compute the arc segments, `d3.arc` to define the donut’s inner and outer radii, and centroid-based text positioning to place company names. The code also includes a default dataset and static functions, indicating a direct, non-interactive rendering approach.

SSnapika

77% match