Fork of Making a Donut chart - project

100%

Fork of Making a Donut chart - project

✓ Published1🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

Kkakumanusreya

95% match

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

76% match

Loading thumbnail…

Fork of Area Chart for Hotel Booking - Project

This area chart visualizes hotel booking closure rates over time, with a pink background and blue filled area beneath a curved line. It uses D3 v5’s `csv` loader to import timestamp and hotel-close data from a GitHub gist, then employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth, filled path. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and custom labels, while the SVG canvas measures 960 by 500 pixels and is appended to by a single group with specified margins. The chart title appears above the plotting area.

Kkakumanusreya

76% 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

75% 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

75% 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

75% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

NNarayana Reddy

75% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

NNarayana Reddy

75% match