Skip to main content
SimilarExport ZIP
100%

X DataClips + D3.js Force-Directed

✓ Published0🌍 Public
663anp3ca
Last edited Sep 20, 2018
Created on Sep 20, 2018

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.

AI-generated description

Second demo of consuming Heroku DataClips with D3.js.

Data source: https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk (.json)

forked from <a href='http://bl.ocks.org/dustinlarimer/'>dustinlarimer</a>'s block: <a href='http://bl.ocks.org/dustinlarimer/5716840'>DataClips + D3.js Force-Directed</a>

forked from <a href='http://bl.ocks.org/karthiir/'>karthiir</a>'s block: <a href='http://bl.ocks.org/karthiir/7b6475e0878972db47e92e31ff55f298'>X DataClips + D3.js Force-Directed</a>

forked from <a href='http://bl.ocks.org/63anp3ca/'>63anp3ca</a>'s block: <a href='http://bl.ocks.org/63anp3ca/f153ae0edfec296a3a1ffc9497e1d949'>X DataClips + D3.js Force-Directed</a>

mit Licensed

Similar vizzes

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
93% match
Loading thumbnail…

DataClips + D3.js Force-Directed

This example visualizes monthly book purchase amounts as a force-directed node graph, where each node’s size corresponds to spending and color encodes tiers (green, yellow, orange, red) based on dollar ranges. It consumes a JSON dataset from a Heroku DataClip, preprocessed by parsing dates and amounts. Using D3.js v3’s `d3.layout.force`, nodes are positioned with gravity and charge scaled by amount, while SVG circles and text labels render the data. The color scale uses `d3.scale.category10()` for categorical differentiation, and dragging is enabled via `force.drag`.

663anp3ca
76% match
Loading thumbnail…

DataClips + D3.js Force-Directed

This example shows monthly book purchase amounts as a force-directed node layout, where each circle’s size and color encode spending (green for ≤800, yellow for ≤900, orange for ≤1000, red above), with date and dollar labels. It uses D3 v3’s `d3.layout.force` for physics simulation, `d3.json` to load local sample data (originally from a Heroku DataClips endpoint), and SVG for rendering. Nodes are draggable via `force.drag`, with tick updates repositioning them.

663anp3ca
76% 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
73% match
Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

AAlexDaGr8
73% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
71% match
Loading thumbnail…

Concentric circle force layout graph in D3.v4

This example visualizes a network of research papers on Real-Time Bidding for online advertising, showing papers as nodes and citations as links. The force-directed layout organizes papers into concentric circles by publication year, with more recent papers near the center. Nodes are colored by year and are draggable, with the graph supporting zooming and panning. The visualization uses D3.v4's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` forces to compute dynamic node positions. It renders nodes and links as SVG elements with animated transitions, and loads paper metadata from a JSON data file. Zoom interaction is implemented via D3's `zoom` object with configurable scale extents.

FFrissAnalytics
71% 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
70% match