Skip to main content
SimilarExport ZIP
100%

D3 Liquid Fill Gauge

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 19, 2018
Created on Jun 1, 2017

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.

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>

mit Licensed

Similar vizzes

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
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
89% 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
87% 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
86% 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
86% 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
84% 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
81% match
Loading thumbnail…

animation Fork of Fork of bubble

This example visualizes two animated liquid-fill gauges using the ECharts library, with each gauge displaying different data ratios (0.6/0.3 and 0.8/0.2). The primary gauge is placed inside a CSS-animated container that cycles through background colors and positions, while the secondary gauge remains static. Both charts are initialized via `echarts.init()` and configured with the `liquidFill` series type, rendering smooth, wave-like fill effects. The page also loads D3 v5, though no D3-specific functions are used in the visible code.

YYUTONG FENG
81% match