Skip to main content
SimilarExport ZIP
100%

D3 Liquid Fill Gauge

✓ Published0🌍 Public
663anp3ca
Last edited Sep 24, 2018
Created on Sep 24, 2018

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.

AI-generated description

Liquid Fill Gauge v1.1 - 7/14/2015

Changes:

  • Added support for updating the gauge value after loading is complete. The loadLiquidFillGauge method now returns an object with an update method which allows the gauge value to be changed. Click any of the gauges above to randomly update their value.

Configurable features include:

  • Changeable min/max values.
  • All colors.
  • Outer circle thickness.
  • Gap between the outer circle and inner fill area.
  • Wave height.
  • Wave speed.
  • Wave count.
  • Wave rise time.
  • Wave height scaling on/off. Reduces the wave height near the min/max values so that the wave won't make the fill area appear total full or totally empty.
  • Wave starting offset. Most useful when wave animation is turned off and you want the wave min or max at a specific horizontal position in the fill area.
  • Wave rising upon load on/off.
  • Wave animation on/off.
  • Text height.
  • Text vertical position.
  • Text increment from min value upon loading.
  • Display of % symbol on/off.

Open source under BSD 2-clause
Copyright (c) 2015, Curtis Bratton
All rights reserved.

forked from <a href='http://bl.ocks.org/brattonc/'>brattonc</a>'s block: <a href='http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6'>D3 Liquid Fill Gauge</a>

forked from <a href='http://bl.ocks.org/FrissAnalytics/'>FrissAnalytics</a>'s block: <a href='http://bl.ocks.org/FrissAnalytics/e5348c6b954f038f40129419a8e8b51b'>D3 Liquid Fill Gauge</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Liquid Fill Gauge

Six animated liquid fill gauges display percentage values inside circular containers, with each gauge customized through different colors, wave heights, speeds, and text positions. Clicking any gauge triggers an update that animates the value and wave behavior. The implementation uses D3 v3 with SVG rendering, building wave shapes from generated data points and scaling functions. The `loadLiquidFillGauge` function returns an object with an `update` method, which transitions the gauge to a new randomly generated value while animating the wave rise, scroll, and text count-up effects.

FFrissAnalytics
95% match
Loading thumbnail…

2018: Reactietijden Liquid Fill Gauge

This visualization shows five liquid fill gauges displaying response times, each with distinct colors and configurations. The gauges update randomly when clicked, with values counting up and animating via wave-like fills. Built with D3 v3 for SVG rendering, it uses custom functions like `loadLiquidFillGauge` and `liquidFillGaugeDefaultSettings` to control wave height, speed, and animation. The `d3.scale.linear` API maps values for both circle and wave paths, while configurable settings adjust text position, color, and percent display.

MMisunoKitara
85% match
Loading thumbnail…

2018: KLASCE: Servicepunt Werktijden Liquid Fill Gauge

Five liquid fill gauges display percentage values within animated, circular containers. Each gauge uses a wave pattern to represent the fill level, with configurable colors, wave heights, animation speeds, and text styling. The visualization is built with D3.js v3, using SVG and JavaScript to render and animate the gauges. Clicking any gauge triggers an update method that randomly changes its displayed value, demonstrating the library's dynamic updating capability.

MMisunoKitara
85% match
Loading thumbnail…

2018: KLASCE: Servicepunt Reactietijden Liquid Fill Gauge

Five liquid-fill gauges display percentage values in animated SVG wave forms, each with distinct colors, wave counts, and text styles. Clicking any gauge triggers an update to a random value, demonstrating the gauge’s dynamic re-rendering. The visualization relies on D3 v3 for SVG generation, path construction for waves, and linear scales for positioning, alongside custom configuration parameters from Curtis Bratton’s Liquid Fill Gauge library for thickness, animation timing, and text placement.

MMisunoKitara
85% match
Loading thumbnail…

2018: KLASCE: Aankoopadvies Werktijden Liquid Fill Gauge

The block displays five liquid fill gauges, each visualizing a single percentage value as a circular, animated water-like fill. The example demonstrates a customizable D3.js (v3) SVG component, where each gauge can be independently configured with distinct colors, wave heights, animation speeds, and text styling. The gauges are interactive: clicking any of them triggers a JavaScript update function that randomly changes the displayed value, and the gauge smoothly re-animates to the new percentage. The code relies on the `loadLiquidFillGauge` function and the `liquidFillGaugeDefaultSettings` configuration object to build each gauge using SVG paths and CSS animations.

MMisunoKitara
84% match
Loading thumbnail…

2018: ICTS Reactietijden Liquid Fill Gauge

Five D3.js v3 liquid fill gauges display response-time metrics from the ICTS service desk, each styled with distinct color schemes and animated wave configurations. The gauges use a custom `liquidFillGauge` function with SVG paths, clipped by wave patterns that rise and animate via D3 scales and linear interpolation. Clicking any gauge triggers an `update` method, randomly regenerating values between 0 and 100. The implementation highlights configurable parameters like wave height, speed, count, and text positioning, with values counting up on load.

MMisunoKitara
82% match
Loading thumbnail…

Circle of Gauges

Circle of Gauges presents ten liquid-filled gauge charts arranged as a force-directed graph, with each gauge tethered by a line to a central summary bubble. Each gauge’s radius and fill level encode a numeric value from a shared JSON dataset, while the central bubble aggregates the total. The visualization is built with D3.js and animated: the gauges settle into place under a force layout, and their wave fills rise and animate once the layout stabilizes. Color distinguishes the individual items, and the SVG rendering keeps the interaction smooth.

663anp3ca
82% match
Loading thumbnail…

2018: ICTS Werktijden Liquid Fill Gauge

Five liquid fill gauges display service working-hours percentages from 2018 ICTS data. Each circle shows a value with an animated wave filling to the corresponding height, using D3 v3 to generate SVG elements. The gauges use configurable wave animation, color schemes, and text positioning. Clicking any gauge triggers a random value update via the returned object’s `update` method, demonstrating the library’s dynamic reloading capability.

MMisunoKitara
80% match