Skip to main content
SimilarExport ZIP
100%

Simple D3 Percentage Gauge Responsive

✓ Published0🌍 Public
FFasani
Last edited Oct 13, 2017
Created on Oct 13, 2017

A responsive percentage gauge displays a semicircular progress arc with a live numeric percentage label, updating automatically through a timed sequence of sample value pairs. The visualization uses D3 v4’s `d3.arc` and `d3.arc` with `startAngle` and `endAngle` to construct the background and foreground arcs, while SVG text shows the computed percentage. The gauge resizes based on the viewport width using jQuery, and its width, radius, and font size scale proportionally. Animation cycles through hardcoded test values, though the update itself is not animated, only redrawn. The rendering relies on SVG paths and standard D3 selection methods.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Gauge

This example presents a gauge visualization that displays a single numeric value on a semi-circular arc, using a colored gradient to represent the range from minimum to maximum. The gauge updates dynamically with an animated pointer that transitions smoothly to a new random value every few seconds, simulating real-time data changes. Built with D3.js v2, the visualization uses `d3.svg.arc` for the segmented ring, `d3.layout.pie` for tick generation, and `d3.scale.linear` to map the input domain to angular positions. The pointer’s movement relies on D3’s `transition` with an elastic easing, and the gauge’s color scale is defined by `d3.interpolateHsl`, while labels are positioned via rotation transforms.

IImSraone
79% match
Loading thumbnail…

A gauge in D3.js with gradient generator

This gauge visualization displays six semicircular arcs around a central value readout, each shaded with a gradient that transitions between colors to represent different battery and power states. The code uses D3.js v5’s `arc` generator and `transition` method, building linear gradients via `svg.append('defs')` with `linearGradient` elements positioned using trigonometric calculations. A dark slate indicator arc and a white percentage text label update smoothly, while the SVG canvas is statically sized at 900×500 pixels.

Dderallye
78% 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
78% match
Loading thumbnail…

Gauge

This example shows a circular gauge with a colored arc, tick labels, and an animated pointer that moves with an elastic ease. The gauge is driven by random data values, with the pointer rotating via a `transition` on its `transform`. Built with D3 v2, it uses `d3.svg.arc` for the ring, a linear scale for value mapping, and `d3.layout.pie` for tick segments. The pointer rotates through a simple rotational transformation rather than redrawing its path.

GGerardoFurtado
77% 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
77% match
Loading thumbnail…

SVG Face

A circular gauge displays the value 158 out of 158 as 100%, with a needle rotating to the final position and labeled start, end, and current values. The chart is built with React components that define SVG elements, while D3’s `arc` generator and `scaleOrdinal` color scale construct six colored segments around the gauge. The needle, percentage text, and value labels are positioned using SVG transformations computed from the percentage. The implementation uses d3 v6 and React 17.

JJonathan Arredondo
77% match
Loading thumbnail…

A gauge in D3.js

This D3.js v5 example renders an SVG gauge to visualize a battery’s state of charge, showing a value of 80 percent as a red percentage text in the center. The gauge consists of three arc segments with distinct gradients: a left arc with a green-to-red vertical gradient indicating full-to-empty battery status, and two right arcs using horizontal gradients to delineate minimum and recommended charge levels. The code uses `d3.arc` to generate the arc paths, computes coordinates from degrees, and applies CSS-defined gradients via SVG `<defs>` elements with classes like `stop-battery-full` and `stop-left`. The visualization is constructed procedurally in `index.js` using D3’s selection and attribute methods on an SVG canvas.

Dderallye
76% match