Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

A gauge in D3.js with gradient generator

Public visualization

Viewing a saved revision (read-only)

77f0f481605b400fb3a2671006040323

A gauge in D3.js with gradient generator

0 stars0🌍 Public
Dderallye
Last edited Aug 10, 2020
Created on Aug 10, 2020
Forked from A gauge in D3.js

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.

AI-generated description

Test gauge with gradient generator