Skip to main content
SimilarExport ZIP
100%

Simple D3 Percentage Gauge

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

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.

AI-generated description

Built with blockbuilder.org

Copied and modified from https://codepen.io/adeveloperdiary/pen/VaQRqe?editors=0010

mit Licensed

Similar vizzes

Loading thumbnail…

Simple D3 Percentage Gauge Responsive

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.

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
81% 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
80% 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
79% 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
79% 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
79% 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
79% match
Loading thumbnail…

D3 Liquid Fill Gauge

The D3 Liquid Fill Gauge displays circular gauges that visualize numeric values as animated waves filling a circle, with the current percentage displayed prominently inside. Each gauge’s appearance and behavior—such as wave height, speed, count, color, and animation—are configurable through a settings object. The implementation uses D3 v3 with SVG rendering, building the wave effect with a clipping path formed from sine-wave data points and scaling via linear scales. Clicking any gauge triggers an update method that randomly changes its displayed value.

663anp3ca
78% match