YUTONG FENG

@yt-feng·13 public vizzes

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.

Jun 17, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

Jun 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Canvas Force Tutorial

This visualization shows a Facebook friend network as a force-directed graph rendered on an HTML `<canvas>` element. The code loads edge data from a CSV file, builds nodes and links, and applies `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` to position the network. Each tick redraws nodes as small circles and links as lines using Canvas 2D context methods, with a simple 700×500 layout and muted stroke styling.

Jun 17, 2021

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four measurement dimensions—petal width, sepal width, petal length, and sepal length—every three seconds. Each of the 150 data points represents a flower, with its position and axes updating smoothly. The visualization uses D3 v6 with `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to animate both the circles and axes. Rendering is SVG-based, with a reusable `scatterPlot` function that handles entering, updating, and exiting elements via selection.join.

Jun 17, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in large, centered type, with a simple console message logged in the background. The page uses plain HTML and CSS for styling, with a `body` element set to center-aligned text at a font size of 13em. JavaScript runs a `console.log` statement to output “Hello JavaScript!” to the developer tools. No external libraries or data sources are involved; the visualization relies solely on static markup and a basic script tag.

Jun 17, 2021

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.

Jun 15, 2021

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.

Jun 15, 2021

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.

Jun 15, 2021

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.

Jun 11, 2021

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.

Jun 11, 2021

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.

Jun 11, 2021

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.

Jun 11, 2021

Loading thumbnail…

Fork of Fork of connection

This visualization maps a network of interconnected nodes, showing proxies, agents, and devices linked by HTTPS, callback, tunnel, and reverse connections. It uses D3 version 6 to render the network as SVG paths with vertical links, alongside Font Awesome icons for node types. The layout positions nodes on a fixed coordinate system, while colors and line styles distinguish connection types, creating an animated, interactive diagram of system communication.

Jun 9, 2021