Тест

100%

✓ Published1🌍 Public

Last edited Dec 16, 2020

Created on Jan 23, 2020

Forked from Untitled

This demo shows a target indicator with a progress bar representing $14 reached toward a $15 goal, along with a text message stating that $1 more is needed. The interface uses Bootstrap 4’s progress bar component for the filled track, while custom CSS styles the container, frame, and target badge. An SVG path from Bootstrap’s icon set renders the info icon, and inline SVG markup is used for the dropdown arrow. The layout relies on floated elements and percentage-based widths, with a linear-gradient background for the outer wrapper.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive progress bar shows three workflow stages—Started, In Progress, and Completed—selectable from a dropdown menu. A gray background rectangle fills progressively with color, width, and hue (yellow to orange to green) changing via a 1000-millisecond D3 transition to reflect the chosen state. The code builds the bar using SVG rectangles and the `d3.scale.ordinal` color scale, with the `progressBar()` function controlling state changes and animated updates through `transition().duration()`.

Mmanidhana90

62% match

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

60% match

Loading thumbnail…

level

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.

SServuc

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

59% match

Loading thumbnail…

Bars transitioning over text

Bars transition over text shows a row of colored bars repeatedly rising and falling while the letter inside each bar toggles between two hidden messages. Using D3.js 3.5.5, ordinal and linear scales map letter positions and bar heights, while a custom recursive transition drives each bar’s vertical movement and color change. The code builds an SVG with text elements and rects, animating them via `transition().duration(1000).delay(...).each(slide)`, swapping between the letters arrays on each cycle. The bars cycle through a color scale, and the text flips between "Item explorer" and "by Michael Ankerst" as the animation loops.

EEE2dev

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

59% match

Loading thumbnail…

Progressive pie chart 4

A progress widget displays a percentage value inside a ring-shaped pie chart, with the ring filling clockwise as the number animates. The visualization cycles automatically, updating the displayed percentage and arc every 1.5 seconds. Built with D3.js, the code uses `d3.layout.pie` for layout, `d3.svg.arc` to define both full-circle background and foreground arcs, and `transition.attrTween` with `d3.interpolate` to smoothly animate the arc and a text counter. The SVG includes an inset-shadow filter for a recessed effect, and the page styles the widget with a card-like header and centered layout.

SSokrates86

59% match

Loading thumbnail…

Progress Events

This example visualizes the progress of an asynchronous request as a circular gauge with a dark foreground arc filling a gray background track, alongside a percentage label. The data is fetched from a GitHub API endpoint, and the gauge animates smoothly by interpolating progress values. The code uses `d3.json` to create a request object, registers a "progress" event listener with `.on`, and updates the arc by setting its end angle through `arc.endAngle`. The process runs in SVG, with animation handled via `d3.transition` and `d3.interpolate`. Once the request completes, the gauge scales down via a transition.

Mmbostock

58% match