mayblue9

A simple editor to allow the manipulation of force-directed graph parameters.

This example is based on Mike Bostock's block 4062045.

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

A force-directed graph of murders in TV show The Wire, discussed at blog subsubroutine.com. Created with D3.js.

Credits:

The data was sourced from The Wire HBO TV Wiki
The chart owes a debt of gratitude to the talented Mike Bostock, creator of D3. This was my first D3 visualisation, and to make it work I drew inspiration (OK, I looted) a number of Mike’s generous examples. Most egregiously, I looted from his Force-Directed Graph, Force Directed Graph with Directionality and Force-Directed Graph with Mouseover.

Built with blockbuilder.org

forked from enjalot's block: interviewing.io: mean lines

forked from enjalot's block: interviewing.io: mean vs stddev

This is an example of using ReactJs to render a force directed network graph. D3 performs all the positional calculations for each node and React handles rendering.

	This is a sample file
	http://d3js.org/
	http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer.html
	http://bl.ocks.org/AndrewRP/raw/7468330/
	http://bl.ocks.org/AndrewRP/7468330
	https://gist.github.com/mbostock/1046712
	http://bl.ocks.org/mbostock/1046712
	https://github.com/mbostock/d3/wiki/Gallery
	http://bl.ocks.org/mbostock
	http://bl.ocks.org/mbostock/4062006

	{
	"graph": [],
	"links": [
	{"source": 0, "target": 1},
	{"source": 0, "target": 2},
	{"source": 0, "target": 3},
	{"source": 0, "target": 4},
	{"source": 0, "target": 5},
	{"source": 0, "target": 6},
	{"source": 1, "target": 3},

	{
	"nodes":[
	{"name":"node1","group":1},
	{"name":"node2","group":2},
	{"name":"node3","group":2},
	{"name":"node4","group":3}
	],
	"links":[
	{"source":2,"target":1,"weight":1},
	{"source":0,"target":2,"weight":3}