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 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.

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>

mit Licensed

Similar vizzes

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
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
78% 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
77% 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
74% 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
74% 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
74% match
Loading thumbnail…

Gist 33580f9f359cea2b2586

This visualization uses a force-directed network layout to display a portfolio of major stocks, with each node representing a company and links suggesting relationships. The code relies on the D3.js library’s force simulation and animation capabilities to position and update the nodes. Data is pulled live from Yahoo Finance’s CSV quote API, which supplies the ticker symbols and their associated metrics, though only the symbols are rendered as labels in the graph. The visualization appears to be a proof-of-concept for showing financial instruments as an interactive, physics-based cluster.

LLayne Smith
74% 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
73% match