IEX Market - Bubble Update

100%

IEX Market - Bubble Update

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

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.

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/8f0fa9420206dc5cdaecca6ee616371f'>IEX Market - Bubble Update</a>

forked from <a href='http://bl.ocks.org/iexviz/'>iexviz</a>'s block: <a href='http://bl.ocks.org/iexviz/31acf53bf0e7e41e602af4519f45ecb6'>IEX Market - Bubble Update</a>

gpl-3.0 Licensed

Similar vizzes

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

81% match

Loading thumbnail…

IEX Market - Liquid Fill Gauge

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.

TThanaporn-sk

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

X DataClips + D3.js Force-Directed

This example visualizes IEX Trading market data as a force-directed node graph. A dropdown menu lets users select which metric—volume, market percent, or tape type—drives the circle radius for each marketplace venue. The visualization uses D3 v3’s `d3.layout.force` for node positioning and `d3.scale.sqrt` for sizing, with data fetched via a custom `d3.jsonp` wrapper from the IEX API. Nodes are rendered as SVG circles with labels showing venue name and the selected value, all styled on a black background.

663anp3ca

75% match

Loading thumbnail…

X DataClips + D3.js Force-Directed

This example visualizes stock exchange venue activity using a force-directed graph in D3.js v3. It pulls live market data from the IEX Trading API via a JSONP callback, then renders nodes sized by a selectable metric—volume, market percent, or tape type—with proportional radii and categorical colors. A dropdown menu lets viewers switch the driving attribute, triggering an SVG rebuild. The layout uses `d3.layout.force` with fixed gravity and drag behavior, while labels display venue names and formatted values. Data is wrapped in a custom `d3.jsonp` helper to handle cross-origin requests.

663anp3ca

70% match

Loading thumbnail…

A classic comparison

This visualization compares market data across multiple trading venues using four classic chart types arranged in a quadrant layout: bar chart, pie chart, treemap, and bubble chart. A dropdown menu lets users switch between volume, market percentage, and tape categories. The code uses d3.layout.pie, d3.layout.treemap, d3.layout.pack, and d3.svg.arc to render the charts, with data fetched live from the IEX Trading API via d3.jsonp. Each chart shares a consistent color scale mapping venue names to categorical colors.

TThanaporn-sk

70% match

Loading thumbnail…

Bubble Update Pattern I

This example demonstrates the general update pattern for D3 selections applied to a bubble chart layout, showing how entering, updating, and exiting circles and labels are handled as data changes. Using the D3 v4 pack layout, it joins data to circle and text elements, then animates transitions: exiting circles shrink and fade, updating elements smoothly move and resize, and entering circles grow from a tiny radius while text fades in. The code relies on `d3.hierarchy`, `d3.pack`, and `d3.transition`, with data randomized by the jeezy utility. The visualization cycles every 1.5 seconds, repeatedly shuffling the alphabet subset and updating the chart accordingly.

GGerardoFurtado

68% match

Loading thumbnail…

Bubble Update Pattern I

This example demonstrates a dynamic bubble chart where circles represent letters from the alphabet, with their sizes and positions updated every 1.5 seconds. It shows the join, update, enter, and exit phases of a data update pattern, animating circles and text labels to reflect a changing dataset. The code uses D3 v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.transition` to smoothly resize and reposition elements, while exit transitions fade and shrink removed items. Data is randomly generated using the `jeezy` library, with rendering handled via SVG elements on a white background.

GGerardoFurtado

68% match