Fork of Donut

100%

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

Forked from Donut

A fork of a donut chart, this example displays the current day of the year as a percentage of the total days in the year. The visualization renders a semi-circular progress gauge using D3’s `arc` generator, with a gray background arc and an orange foreground arc that advances as the year progresses. The code calculates the progress by dividing the day-of-year by the total days, using D3’s `timeFormat`. Built with React and rendered as SVG, the gauge includes a centered text label showing the rounded percentage.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Donut

This example displays the current day of the year as a percentage, shown simultaneously in a progress bar, a donut chart, and a semicircular gauge. The three components are rendered as SVG using React, with the `d3.arc` API generating the donut and gauge paths. The progress value is computed from the date using `timeFormat` from d3, and each visualization updates dynamically based on that calculated fraction.

Cckp8

95% match

Loading thumbnail…

Fork of Visualizing Percentages

This visualization shows the current day of the year as a percentage using three different progress indicators: a horizontal bar, a donut, and a gauge. The percentage is computed from today’s date using `d3.timeFormat` to compare the day-of-year against the total days in the year. Each indicator is built with React components and SVG paths generated by `d3.arc`, with progress values driving the bar width, donut arc end angle, and gauge sweep. The layout is arranged using SVG groups with transforms, and the background container is toggled via a margin rect.

Cckp8

90% match

Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the year's progress, using three different chart types: a progress bar, a donut chart, and a gauge. The data is derived from the current date, calculated with `d3.timeFormat`, and the visualization is rendered as an SVG within a React framework. The code defines custom components for each chart type, leveraging D3's `arc` API to generate the donut and gauge paths, while the bar uses simple SVG rectangles.

Cckp8

90% match

Loading thumbnail…

Fork of Visualizing Percentages

Three alternative views of the current date's progress through the year appear side by side: a rounded progress bar, a donut chart, and a semicircular gauge. Each chart displays the same percentage value, computed from the current day of year divided by the total days in the year. The code uses D3 v6 arc generators for the donut and gauge paths, along with SVG rectangles for the bar, and renders the percentage labels as SVG text elements within a React application.

Cckp8

89% match

Loading thumbnail…

Fork of Visualizing Percentages

This example visualizes the current day of the year as a percentage of the total year, derived from JavaScript's `Date` object and D3's `timeFormat`. It displays this value through three distinct SVG components: a rounded progress bar, a donut chart, and a semicircular gauge. The code uses D3's `arc` generator to construct the donut and gauge paths, while React components manage the rendering. Margins and layout are handled by a custom `VizContainer` component that wraps the SVG output.

Cckp8

89% match

Loading thumbnail…

Donut

This example displays a year’s progress as a percentage through three synchronized visuals: a rounded progress bar, a donut chart, and a semicircular gauge. The progress value is computed from the current date relative to the total days in the year. Built with React, the code uses D3’s `arc` generator to create the donut and gauge paths, while SVG rectangles render the bar. Text labels show the rounded percentage, and each visualization uses distinct colors.

AAmier Faudzi

88% match

Loading thumbnail…

Visualizing Percentages

This example shows three different ways to visualize the same percentage: the current day of the year as a fraction of the total days in the year, computed using `timeFormat` from d3. It presents a progress bar, a donut chart, and a semicircular gauge side by side, each displaying the computed value. The React components render SVG primitives, with the donut and gauge using d3’s `arc` generator to create their shapes. The progress bar uses simple SVG rectangles, and all three update dynamically based on the current date.

WWaseem Medhat

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

80% match