animation Fork of Fork of bubble

100%

animation Fork of Fork of bubble

✓ Published2🌍 Public

Last edited Jun 15, 2021

Created on Jun 11, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of bubble

Two liquid-filled bubble gauges are rendered side by side using ECharts and its liquidFill extension. Each gauge displays two overlaid liquid levels—the left bubble shows proportions of 0.6 and 0.3, while the right shows 0.8 and 0.2—using the `echarts.init` method and a series configuration with `"type": "liquidFill"`. The gauges are positioned absolutely within separate divs, with a CSS transform applied to one container. The page also loads D3 v5, though the visualization itself relies entirely on ECharts' built-in rendering rather than D3 manipulation.

YYUTONG FENG

90% match

Loading thumbnail…

bubble

This example displays two liquid-fill gauges rendered side by side on a single page, showing different data values as animated, wave-like filled shapes. The visualization is created using the ECharts library with its `liquidFill` series type, initialized on two separate DOM containers within an HTML layout. The JavaScript code uses `echarts.init` to bind each chart to its respective element and sets options containing the fill data and center positions. The page loads D3 v5 and ECharts from CDNs, with styling handled by an external stylesheet.

YYUTONG FENG

88% match

Loading thumbnail…

bubble

Two liquid-fill gauges render in separate containers, displaying proportional bubble-like fills at different positions. The example initializes two ECharts instances via `echarts.init`, targeting `#main` and `#sub` divs. Each instance sets a `liquidFill` series with different data values (`[0.6, 0.3]` and `[0.8, 0.2]`) and custom centers. The page loads D3 v5 and ECharts from CDNs, with basic styling from an external stylesheet.

YYUTONG FENG

85% match

Loading thumbnail…

css animation test

Two liquid-fill charts display animated fluid levels in different colors and proportions, with one chart also moving diagonally via a CSS keyframe animation. The page initializes both ECharts instances using `echarts.init` and `setOption`, configuring the liquidFill series with data arrays like `[0.6, 0.3]` and `[0.8, 0.2]`. The animation name and duration are defined in an inline CSS `@keyframes` rule.

YYUTONG FENG

83% match

Loading thumbnail…

test

Two liquid-fill gauges display two paired datasets, each with two values (0.6/0.3 and 0.8/0.2), rendered as overlapping blue bubbles inside rounded containers. The example shows how ECharts’ `liquidFill` series type can be instantiated twice on separate DOM elements (`main` and `sub`), with each chart initialized via `echarts.init` and configured through a `setOption` call. A separate container positions the two gauges at different screen offsets.

YYUTONG FENG

82% match

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

81% match

Loading thumbnail…

Awesome-pyecharts

This example displays a liquid fill chart with two nested bubbles representing proportions of 0.6 and 0.3, rendered in a canvas via the ECharts library. It uses the `echarts.init` API with a white theme and the `liquidFill` series type, pulling data directly from an inline JavaScript array. The page loads ECharts and its liquidfill plugin from CDN assets, producing a single interactive visualization within a fixed 900x450 pixel container.

YYUTONG FENG

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

77% match