IEX Market - Olympics Sprint

100%

IEX Market - Olympics Sprint

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

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.

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/82dfa10db7b2fc6c1ad54cc4cfd1c243'>IEX Market - Olympics Sprint</a>

gpl-3.0 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

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

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

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

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

75% match

Loading thumbnail…

title

This visualization, built with D3.js and rendered as an SVG, shows a time-series area chart of bid data across multiple financial exchanges. The chart displays overlapping filled regions, with the x-axis representing time and the y-axis representing price or value, while a light gray rect at the top-right suggests a hover or selection area. The data, sourced from a gist by FergusDevelopmentLLC, is drawn using smooth path curves for each exchange, creating a dense, layered comparison of exchange activity over time.

WWill Carter

72% match

Loading thumbnail…

A classic comparison

This example demonstrates a four-panel comparison of market data, using the IEX API as its data source. Each quadrant of the visualization applies a different classic chart type to the same dataset—a bar chart, pie chart, treemap, and circle packing—all driven by D3.js v3 and rendered in SVG. A dropdown menu lets you switch the metric being compared (volume, market percent, tapeA/B/C), and all four views update simultaneously to reflect the selected value. The design uses a categorical color palette and crisp, minimal styling, with tooltips provided by d3-tip. The layout places the four charts symmetrically around a central point, creating a clean, dashboard-like comparison.

663anp3ca

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

71% match