Sarah Lowrey

Force-Directed Graph

Matthew Bouchard

Ian Johnson

Force-Directed Skeleton Graph

Will

remi landais

Force-Directed Graph with self link

Scott Anderson

Conservation Connections Graph

Ahmed Al Naqbi

Vladimir Filipovic

Rafael Ballester-Ripoll

Data Visualization Course

Force-Directed Graph: Air Routes in Saudi Arabia

Chris Knowles

OGTR website network

Kai Hansen

BT Universe Graph (SVG)

Zhonghao Yang

Rahul Sahebrao Gawale

Force-Directed Graph - Zoomable

Abhishek Kulkarni

Max Duval

The Guardian's commercial bundle

Yixin Ye

Force-Directed Graph allowing - Can manually drag and fix node positions

Carlos Scheidegger

Vir Diaz Villa

50 top Twitter users 2020 - Force-Directed Graph

education stuff

Relationship Graph

Alexandre Ramos

Quem engajou mais usuários com a #3J?

Mohit Yadav

Force-Directed Graph with Image in circle as Node Label

Valentin Veronesi

Javier Vasquez

Huijae

CS2013 SDF relation visualization

S'pht'Kr

Cuisine Map Force-Directed Graph

tlinkner

Departments, Centers, and members for the Decarbonizing Tough Transport Workshop

Yousef Amar

Connected text bubbles

Mike Bostock

Observable

Components

D3 Charts

Drag and drop SVG, HTML or Canvas using mouse or touch input.

d3-drag

Force-directed graph layout using velocity Verlet integration.

d3-force

Hi @mbostock. If I wanted to run this function outside of the Observable environment, what implication would `invalidation` have. As I understand it, this is an object that only exists in Observable.

Thanks. Beautiful graph, btw.

Harry

invalidation is optional; if you pass a promise, the function registers "simulation.stop" on this promise, so it can stop doing computations when it receives that message.

What's the point of 'replacing the input nodes and links with mutable objects for the simulation'

it would be great to give the option for node radius to insert and function to bind with data properties, as it is possibile for groups and titles

Michele Mauri

@Michele Great idea, I implemented it (you can now pass a function to nodeRadius).

@dianaow sorry for the belated reply: we need these objects to hold the changing values of x, y, vx, vy during the simulation (as well as fx, fy if the user holds a node manually with the pointer).

@Fil wow thank you! Anther useful variable to hadle with functions would be `linkStrength`, so as `linkStrokeWidth` you can bind it to data

Thanks for providing the notebook! 
I'm trying to use your code outside of observablehq in a "traditional html-javascript constellation". I'm importing D3 via a CDN. As promised, your function ForceGraph() returns a <svg> element. However, I'm failing to append it to the DOM. By listening to the event 'DOMContentLoaded' I make sure, that D3 can access my target element. Can you please give me hint, how to append the <svg> to the DOM?

Thanks in advance
Alexander

Alexander

Same issue on my side. I tried to append the created svg into my html by using: 

d3.select('body').append('chart');

But it looks it's still the wrong way to go. No graph appear in the web page but at least no error either.

Any hint how to do it?

Hervé

If _chart_ is the result of the chart cell above, you could try to use:
   d3.select('body').append(() => chart);

See https://github.com/d3/d3-selection#selection_append

Great! It did it, now the graph pops up in the web page.
Thx a lot for your help.

miserables.json

Force-directed graph component

Forks of Force-directed graph component