IEX Tops - Pack Layout

100%

IEX Tops - Pack Layout

✓ Published0🌍 Public

Last edited Mar 13, 2017

Created on Mar 13, 2017

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.

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/21c8b90f1cd2099cf7fc5f9e38c5148a'>IEX Tops - Pack Layout </a>

mit Licensed

Similar vizzes

Loading thumbnail…

Test Tops - Pack Layout

This visualization displays real-time market data for individual stock symbols using a circular packing layout. The size of each circle reflects a selected metric—volume, market percentage, last sale price, or last sale size—which can be changed via a dropdown menu. Data is fetched from the IEX Trading API using a custom `d3.jsonp` helper, and tooltips reveal exact values via `d3-tip`. A “next” button cycles through sorting orders (default, ascending, descending), re-layouting the `d3.layout.pack` hierarchy and updating circle positions and radii accordingly, with all elements rendered as SVG.

TThanaporn-sk

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

75% match

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

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

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

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

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

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

68% match