level

100%

✓ Published0🌍 Public

Last edited Jan 16, 2017

Created on Jan 13, 2017

A circular progress indicator displays a 50% value in orange on a white background. The visualization uses D3.js to construct an SVG composition, layering paths and concentric circles to create a donut chart with tick marks. A large text element renders the percentage in the center. The code defines variables for size, border, stroke, and color, then uses `svg.append("path")` and `svg.append("circle")` with explicit `attr` settings to draw the shapes, and `svg.append("text")` for the label.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Visualizing Percentages

Three SVG progress indicators—a rounded bar, a donut, and a gauge—display the same 35% value in a React-based dashboard. The bar’s fill width and the donut’s arc length are computed by multiplying the total width or circumference by `progress`. The gauge uses a d3 `arc` generator with start and end angles mapped to the progress fraction. All indicators use a shared `VizContainer` SVG wrapper, with D3’s `timeFormat` computing the current day of the year.

IIan Newby

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

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

75% match

Loading thumbnail…

Progressive pie chart 1

D3.js renders a donut chart displaying 65% progress. The visualization shows a dark-themed widget titled “Progress Status,” with a gradient-filled arc representing the completion ratio over a static background ring. The central percentage text updates dynamically during the animation. Using SVG paths and the d3.layout.pie and d3.svg.arc APIs, the arc’s angle interpolates from zero to the target proportion via transition.attrTween, while the count of 0 to 65 animates alongside it.

SSokrates86

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

74% match

Loading thumbnail…

Simple D3 Percentage Gauge

This example displays a rotating set of percentage gauges, cycling through seven predefined value pairs to show the proportion of a lower to an upper total. It demonstrates how a semicircular gauge can be built with D3 v4 and SVG, using `d3.arc` to define the background track and the colored progress arc, with a red fill indicating the current percentage. The gauge updates every second via `setInterval`, and the center text shows the rounded percentage. The code relies on jQuery for document readiness, while D3 handles the rendering, and the animation is a simple replacement of the SVG elements rather than a transition.

FFasani

74% match

Loading thumbnail…

"Percent complete" bar

This example visualizes progress as two rounded horizontal bars: the first shows the total value in white, and the second overlays the current value in blue, with numeric labels on each bar. It uses D3.js v2 with a linear scale to map the data values [900, 350] to pixel widths within a fixed 200-pixel SVG. The code selects SVG rect elements via `chart.selectAll("rect")` and appends text labels using `chart.selectAll("text")`, with styling defined in an external CSS file.

KKacieW

74% match

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

73% match