IEX Market - Liquid Fill Gauge

100%

IEX Market - Liquid Fill Gauge

✓ Published0🌍 Public

Last edited Mar 13, 2017

Created on Mar 13, 2017

This example visualizes market share percentages from the IEX API as a grid of five animated liquid fill gauges. Each gauge represents a different exchange venue, with its percentage displayed as the liquid level. The code uses D3.js v3 with the `liquidFillGauge.js` library to render SVG gauges with animated waves, and `jsonp.js` to fetch data. A dropdown menu lets users switch between five distinct gauge configurations, each with different colors, wave behaviors, and animation timings.

AI-generated description

IEX API

forked from <a href='http://bl.ocks.org/iexviz/'>iexviz</a>'s block: <a href='http://bl.ocks.org/iexviz/5c1871724912abe471d6e0e986bfd749'>IEX Market - Liquid Fill Gauge</a>

mit Licensed

Similar vizzes

Loading thumbnail…

IEX Market - Bubble Update

A live bubble chart visualizes the IEX market by mapping venue names to circle sizes based on metrics like volume and market share, updating every few seconds. Using D3 v4 with SVG and animated transitions, the visualization fetches data via a JSONP API call to IEX Trading. Each update cycles through different data keys, resizing and repositioning bubbles with smooth, circular path transitions while the IEX venue is highlighted in orange.

AAjayyy

78% 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

78% match

Loading thumbnail…

IEX Market - Olympics Sprint

This visualization displays real-time market data for trading venues as a circular "Olympics sprint" chart. Each venue is represented as a colored arc segment positioned on a track, with the arc length reflecting the venue’s selected metric—such as market percentage, volume, or tape category—via a square-root scale. The chart animates continuously, rotating each segment and updating text labels along the arcs as time progresses. Built with D3 v4, the code fetches live data from the IEX Trading API using JSONP, then renders the visualization as SVG. It employs `d3.arc` for the segment geometry, `d3.scaleSqrt` for mapping values, `d3.timer` for animation, and `d3.scaleRainbow` (though overridden by a custom color function) to color each venue. A dropdown lets users switch between different metrics to update the display.

AAjayyy

76% 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

76% 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

76% 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

76% match

Loading thumbnail…

IEX Tops - Pack Layout

This pack layout visualization displays current IEX Trading stock data, representing each symbol as a circle whose area reflects a selected metric—either volume, market percent, last sale price, or last sale size. Users choose the metric via a dropdown and can reorder the circles by default, ascending, or descending sort buttons. Circles are labeled with stock tickers and reveal exact values on hover through a d3-tip tooltip. The code uses `d3.layout.pack()` for the circle-packing algorithm, renders to SVG, and fetches live data with a JSONP callback from the IEX API.

TThanaporn-sk

75% 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

75% match