Skip to main content
SimilarExport ZIP
100%

bubble

✓ Published0🌍 Public
YYUTONG FENG
Last edited Jun 11, 2021
Created on Jun 11, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
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
88% 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
88% 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
86% 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
85% 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
77% 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
76% 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
75% match