A classic comparison

100%

A classic comparison

✓ Published0🌍 Public

Last edited Mar 30, 2017

Created on Mar 30, 2017

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.

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/ff90f973b5ef1a3ecbea4bbae76ad44d'>IEX Market - Classic Charts</a>

mit Licensed

Similar vizzes

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

90% match

Loading thumbnail…

A classic comparison

This example compares the same dataset across four classic chart types—bar chart, pie chart, treemap, and bubble chart—arranged in a 2×2 grid. A dropdown menu lets the viewer switch the metric being visualized, which is market data from the IEX API, including volume, market percentage, and tape categories. The code uses d3.layout.pie, d3.layout.treemap, d3.layout.pack, and d3.svg.arc to generate the charts, with d3.jsonp handling the API request and d3-tip available for tooltips.

AAjayyy

89% match

Loading thumbnail…

A classic comparison (sorted)

Seven random values are displayed in four small multiples, each using a different D3 layout: a bar chart, a pie chart, a treemap, and a bubble chart. The data are sorted in descending order before rendering, so every chart presents the same ranked sequence of categories. The code uses D3 v3 layouts including `d3.layout.pie`, `d3.layout.treemap`, and `d3.layout.pack`, with SVG shapes for all marks. A categorical color scale maps each of the seven classes to a distinct color across all panels.

TThanaporn-sk

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

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

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

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

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

72% match