100%

Quantitative foci �� <a href="http://bl.ocks.org/3349192" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Aug 14, 2012

This is a D3.js visualization based on an earlier talk example, showing a network of nodes in a force-directed layout. Nodes are connected by links and are labeled with numbers, while a larger, labeled "focus" element attracts nearby nodes. The demo uses `d3.forceSimulation` to apply physical forces, `d3.forceSpring` for link elasticity, and `d3.forceCharge` for repulsion, running in a live simulation with the canvas updating each tick. The code is a direct copy of the original example, with a radial variant available in a separate gist.

AI-generated description

Quantitative foci �� <a href="http://bl.ocks.org/3349192" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

copy of http://mbostock.github.com/d3/talk/20110921/quantitative-foci.html

Radial foci is shown in gist 3125600.

Similar vizzes

Loading thumbnail…

Force Layouts - Quantitative Foci

This example demonstrates a force-directed layout with radial foci, where mouse movement generates nodes that are attracted to invisible rings around the center. Node color encodes the ring’s squared radius using a linear color scale. The code uses d3.layout.force, svg selection of circles, and d3.svg.mouse to add nodes, while the tick handler steers each node toward its assigned ring distance. A transition shrinks nodes after three seconds and removes them from the array, creating a continuous particle stream. The work is derived from an earlier quantitative-foci example by Mike Bostock.

GGerHobbelt

81% match

Loading thumbnail…

Force Layouts - Quantitative Foci

This example demonstrates a dynamic force-directed layout where nodes are created by mouse movement, each with a vertical target position and color based on its height. As the simulation runs, nodes transition toward their assigned horizontal positions, creating a flowing ribbon-like stream of circles. Built with d3.v2, the code uses `d3.layout.force`, `d3.scale.linear` with `d3.interpolateHsl` for color mapping, and svg transitions with a delay to remove nodes after a set time. The animation shows nodes moving continuously, simulating a particle system with a quantitative focus based on their y-coordinate.

GGerHobbelt

81% match

Loading thumbnail…

collapsible D3.js force layout + dat.gui for fiddling

This example demonstrates a dynamic network graph rendered with a D3.js force simulation, where nodes and links rearrange in real time as users adjust the simulation’s parameters. The code uses `d3.forceSimulation` for physics-based layout, alongside a dat.gui control panel that exposes sliders for tweaking forces like charge, link distance, and collision strength. Each node displays a numeric label, and dragging updates positions while the simulation continues to run. The visualization pulls data from a hardcoded array of nodes and edges, and its primary purpose is to show how interactive parameter fiddling directly affects the stability and clustering of the force-directed graph.

GGerHobbelt

79% match

Loading thumbnail…

Multi-Foci Force Layout

Five fixed nodes serve as force foci that attract and repel moving nodes in a 2D space. As the mouse moves, the user spawns new nodes with random radii and colors; these nodes are pulled toward a focus matching their type while colliding with each other via a quadtree. The simulation runs on D3 v3’s force layout with custom attraction and collision logic, rendering everything as SVG circles with animated transitions that remove nodes after three seconds. The `d3.layout.force` API drives the physics, and `d3.geom.quadtree` accelerates collision detection.

Mmbostock

78% match

Loading thumbnail…

Gist f52706b726949be61205fcf8133a66e7

This example visualizes a dynamic network of interconnected nodes, showing how forces shape a cluster’s layout over time. It uses a force-directed simulation via `d3.forceSimulation` with charge, link, and collision forces to position nodes, while links are drawn as straight lines. The rendering relies on SVG paths updated each tick, and the code includes a custom drag interaction using `d3.drag` to let viewers manually reposition nodes. The underlying data structure is a small JavaScript array of objects representing nodes and links, likely sourced from a static inline dataset. The visualization emphasizes real-time interaction rather than geographic or spatial data, focusing on emergent clustering behavior.

11wheel

78% match

Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes

78% match

Loading thumbnail…

Force-Directed Layout (Multiple Foci)

One hundred unconnected nodes in a D3 force-directed graph continuously move and cluster around four focal points. The layout uses custom forces that push even and odd indexed nodes in opposite vertical and horizontal directions, creating a structured pattern of four color-coded groups. Rendered as an animated SVG, the visualization relies on D3’s `d3.layout.force` with position Verlet integration, and a tick handler applies index-based directional pushes each frame. Clicking the page or dragging nodes perturbs their positions, which then resume the clustering behavior.

KKuerzibe

78% match

Loading thumbnail…

Gist a7d5ced57721ac3f7075bbbbaee32a49

This interactive visualization uses a force-directed simulation to animate a network of nodes and links, showing how connected elements cluster and repel. The code relies on D3’s `d3.forceSimulation` with custom forces for charge, centering, and collision, while link positions update via the simulation’s tick handler. Node rendering uses SVG circles, and the visualization reads its data from an embedded array of node and link objects, with no external data source. The interaction includes drag-and-drop support via D3’s drag behavior, letting viewers move nodes while the simulation continuously recalculates positions.

11wheel

78% match