Skip to main content
SimilarExport ZIP
100%

css animation test

✓ Published0🌍 Public
YYUTONG FENG
Last edited Jun 15, 2021
Created on Jun 15, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation.

MIT Licensed

Similar vizzes

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
83% 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
76% 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
75% 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
74% 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
73% match
Loading thumbnail…

template scatter animation

This example shows a scatter plot animation that cycles through three datasets, redrawing points along a diagonal line in red and then transitioning to blue. A timer updates the chart every two seconds, revealing a new series and clearing the previous one by setting an empty series first. Built with ECharts 4.1.0 and jQuery, it uses `setOption` with `animationDelay` and `animationEasingUpdate` to stagger point transitions, while the chart is initialized via `echarts.init` on a DOM container.

YYUTONG FENG
72% 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
70% 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
70% match