Virtual Progress recorder

100%

Virtual Progress recorder

✓ Published0🌍 Public

Last edited Jul 5, 2020

Created on Feb 11, 2020

This interactive tool visualizes task progress using a physical metaphor: marbles move from a left container to a right container as steps are completed. Users set the number of tasks with a numeric input and click a button to advance progress by one marble. The visualization renders two steel-blue rectangles as containers in an SVG, with React managing the component structure and state updates. The interface is built with React and ReactDOM for rendering, while D3.js v5 is included for potential data binding or transitions, though the current implementation relies primarily on React's declarative JSX.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

66% match

Loading thumbnail…

Table of Progress

Rows of hexadecimal identifiers appear in a table-like list, each with a progress bar that fills from left to right over a random duration before the row collapses and is removed. New rows are created asynchronously, simulating a dynamic queue of tasks. The visualization uses D3.js v3 with chained transitions: `transition().duration().ease("linear")` animates the bar’s width, while a second transition delays the row’s height collapse and removal. Data is generated procedurally via `Math.random()` for durations and creation intervals, with no external dataset.

Mmbostock

64% match

Loading thumbnail…

world map

An interactive bar chart demonstrates how data updates respond to user controls. Buttons increment values, filter entries below 50, or append random numbers, while D3 transitions animate the bars and tooltips. The React component manages state with hooks, and a custom `useResizeObserver` hook dynamically recalculates scales when the container resizes. The SVG rendering uses `scaleBand` for the x-axis, `scaleLinear` for y and color scales, and `axisBottom`/`axisLeft` to draw axes.

JJunyanL

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

63% match

Loading thumbnail…

React Starter

This example displays a series of teal bars and red text values derived from a hardcoded dataset. The visualization uses D3 v5 within a React environment, employing `d3.select` to locate elements and a bar chart transition to animate height changes over ten seconds. The rendering relies on SVG-less HTML divs and paragraphs, with the x-axis labeled “Vars.”

MMohammad Afaq Khan

63% match

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

63% match