"Percent complete" bar

100%

"Percent complete" bar

✓ Published0🌍 Public

Last edited May 14, 2018

Created on May 14, 2018

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.

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

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

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

76% match

Loading thumbnail…

D3: Drawing a Bar Chart

This example demonstrates a basic bar chart built with D3 v7 in an SVG container, visualizing an array of 20 numeric values. The bars grow downward from the top of a 500×100 pixel canvas, with each bar’s height proportional to its data value multiplied by 4, and its fill color transitioning from dark to lighter blue based on the data. The chart also overlays each bar with white, 11px sans-serif text labels showing the exact data values, centered horizontally within each bar. The code uses `d3.select` to append SVG elements and the data-join pattern with `.enter()` to create rectangles and text nodes.

MMarisa Tania

76% match

Loading thumbnail…

Count + Percent

This example demonstrates a dual-axis chart combining bar and line representations. Gray bars show raw counts by year on a steelblue left axis, while a steelblue line with points displays percentage data on a crimson right axis. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to generate the axes. Data is loaded from a local CSV file.

AAsmabee Khan

76% match

Loading thumbnail…

HTML Starter

A single orange-to-green bar visualizes a numeric score of 79 on a fixed 0-to-100 scale. The bar’s width and fill color both derive from the same data value using `d3.scaleLinear` for the x-position and color ranges. Rendered as an SVG rectangle with a black stroke, the chart updates automatically when the data array changes. The example uses D3 v6 to append the SVG and bind the data to the rectangle element.

CChristian Magelssen

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

75% match

Loading thumbnail…

Percentage bar chart

This percentage bar chart uses a horizontal bar layout to show a direct linear relationship between amount and percentage values. The bars extend proportionally from left to right, with the x-axis representing percentage and the y-axis categorizing amounts. The visualization loads CSV data using D3’s `csv` method, then renders with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. SVG rectangles display the bars, colored with a deep maroon fill and styled via external CSS.

TTusar

74% match