Tony

Force-Directed Graph, Disjoint

David Sewell

Joram Millenaar

Therapieland

Patrick Hochstenbach

Emanuele Santos

Flavia Felicioni

Julian Iannone

Grupos de participantes

Zidane

Federico Pérez Boco

Edenor Tweets

Matthew Bouchard

Alex Stewart

Disjoint Force-Directed Graph

Troy Vassalotti

Wordbank Network Graph

Nascif Abousalh-Neto

Exploring the Data Visualization Catalogue

Mark

Team Graph

Sean McAllister

Loris Mat

Disjoint Force-Directed Graph | American Football Salaries

Drew Fisher

Curriculum Skill Tree

Raju Ps

sift Network

Andrew Nalband

turbineworkforce data team

Michael Hall

Daniel Dimitrov

Hugues Le Gendre

Graph de dépendance d'Apprenti-sage

Mike

КР 30/1 "Рак легкого" 2020 - взаимосвязи отдельных рекомендаций в СППР

Sankho T 

Rodrigo Deodoro

Ink Force-Directed Graph

Ye Cao

Mike Bostock

D3 Charts

Force-directed graph layout using velocity Verlet integration.

d3-force

Hi! I'm trying to use this code, but the graph is not using "responsive", how do I make one like the one shown here? Thanks!

Setting "100vw" as "width" and "100vh" as "height" solved the problem for now.
Maybe there's a more appropriate way?

in the example above we pass “width” (shorthand for {width: width}, where the width variable is defined—in the context of Observable’s stdlib—as the width of the page. See https://github.com/observablehq/stdlib

I am trying to learn Python and D3, and I am trying to use this code as a standalone python/flask app but I am having problems. I read the instructions above about using this code outside of observable, but I can't get it to work. I created a much smaller sample set of data using the exact same structure as the JSON above, I pass the JSON data into the page and put it into the graph variable. It seems to load OK, I can see the JSON in the graph variable in the debugger, but it complains that "d3.map()" is not a function. It breaks on this line:

const N = d3.map(nodes, nodeId).map(intern);

When I hover over "nodes" it shows it as undefined - so I am trying to figure out what puts the values into the "nodes" variable?

George

Please check that you have a recent version of D3. d3.map was introduced in https://github.com/d3/d3-array/releases/tag/v2.8.0 and https://github.com/d3/d3/releases/tag/v6.2.0

Thanks, I did check and was pulling an older version. Now I have this:

<script src="https://d3js.org/d3.v7.min.js"></script>

but now I get a really obscure error from the d3.v7.min.js. The line in the debugger is huge, but deep in the line I get this:

=typeof t[Symbol.iterator])throw new TypeError("values is not iterable")

Seems like I am still missing some kind of dependency.

If you remove .min from the url you should be able to see better. Please share your code online (as an observable notebook, for example) if you want to help us help you.

I have removed your extremely long comment with the full web page code, and pasted it in a notebook here
https://observablehq.com/@recifs/graph-user-support
As you can see, it works; so I suspect the issue might be that the data you feed to the function doesn't have the right format, maybe? Feel free to fork that notebook and iterate.

Thanks I definitely appreciate your help. I will continue to try to play with the formatting of the data.

graph.json

Force-directed graph component

Forks of Force-Directed Graph, Disjoint