Test Tops - Pack Layout

100%

Test Tops - Pack Layout

✓ Published0🌍 Public

Last edited Mar 13, 2017

Created on Mar 13, 2017

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.

AI-generated description

IEX API

forked from <a href='http://bl.ocks.org/karthiir/'>karthiir</a>'s block: <a href='http://bl.ocks.org/karthiir/ba6ddba499baf5339961ebdfd369ab43'>Test Tops - Pack Layout </a>

mit Licensed

Similar vizzes

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

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

71% match

Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis

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

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

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

71% match

Loading thumbnail…

Untitled

This interactive scatterplot displays stock data with price on the x-axis and true value on the y-axis, using colored circles to represent stock types. Users filter the visualization through a dropdown menu for sector selection and jQuery UI sliders that adjust volume and delta ranges. The D3.js code loads data from a CSV file, applies keyed enter/update/exit selections, and includes hover tooltips that highlight individual stocks. The SVG renderer uses d3.axisBottom and d3.axisLeft for axes, with d3.scaleOrdinal for categorical coloring.

Mmkolowrat

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

69% match