| license: mit |
This simple force-directed graph show the relationships to Elizabeth Bennet. 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.
forked from csenkbeil's block: A force-directed Graph of Relationships
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| .link { | |
| stroke-opacity: .6; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var radius = 5; | |
| var colors =d3.scaleOrdinal(d3.schemeCategory10); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json('links.json', function(err, data){ | |
| // console.log(data); | |
| //position node with their group | |
| // var perRow = 2; | |
| // data.nodes.forEach(function(node){ | |
| // node.focusX = (node.group % perRow)* 100; | |
| // node.focusY = Math.floor(node.group/ perRow) * 100; | |
| // }); | |
| data.links.forEach(function(link) { | |
| link.source = data.nodes.find(function(node) {return node.id === link.source}); | |
| link.target = data.nodes.find(function(node) {return node.id === link.target}); | |
| }); | |
| // one tick it's one iteration | |
| var simulations = d3.forceSimulation(data.nodes) | |
| .force('center', d3.forceCenter(width/2, height/2)) | |
| .force('collide', d3.forceCollide(radius + 1)) | |
| // .force('attraction', d3.forceManyBody().strength(100).distanceMin(150)) | |
| // .force('repulsion', d3.forceManyBody().strength(-100).distanceMax(150)) | |
| .force('x', d3.forceX().x(function(d){ | |
| return d.focusX | |
| })) | |
| .force('y', d3.forceY().y(function(d){ | |
| return d.focusY })) | |
| // .force('links', d3.forceLink(data.links) | |
| // .id(function(d){return d.id}) | |
| // .strength(function(d){}) | |
| .on('tick', ticked); | |
| //create circle for each node, there's x and y got calculated each tick | |
| var links = svg.selectAll('line') | |
| .data(data.links, function(d){return d.source.id + ',' + d.target.id}) | |
| .enter().append('line') | |
| .attr('stroke', '#ccc'); | |
| var circles = svg.selectAll('circle') | |
| .data(data.nodes, function(d){return d.id}) | |
| .enter().append('circle') | |
| .attr('r', radius) | |
| .attr('fill', function(d){return colors(d.group)}) | |
| // .call(drag) | |
| function ticked() { | |
| circles | |
| .attr('cx', function(d) {return d.x}) | |
| .attr('cy', function(d) {return d.y}); | |
| links.attr('x1', function(d) {return d.source.x}) | |
| .attr('x2', function(d){return d.target.x}) | |
| .attr('y1', function(d) {return d.source.y}) | |
| .attr('y2', function(d){return d.target.y}) | |
| } | |
| }) | |
| </script> |
| {"nodes": [ | |
| { | |
| "kidid": -827783955, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -827783953, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817886, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817890, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817891, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817889, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817887, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6893817885, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147056277, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 325785855, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2116768375, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1552424077, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6114316215, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6114307643, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6114317246, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6114320383, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6114315356, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 200021265517, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147255997, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147255999, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147256000, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147255998, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1691220900, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147183736, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 895685420, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 895778335, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147003835, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585112152, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585112149, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585112148, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585112151, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147432580, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24213781543, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2123000294, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210111, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210102, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210110, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578208475, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210114, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210108, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210098, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210109, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210112, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210104, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210096, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210106, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 25333208361, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210116, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210105, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210101, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210100, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48578210117, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2101242846, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290260, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290255, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585111939, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290241, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290236, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290245, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6111100696, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1812117673, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 220036460036, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24203971213, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24203971219, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24203971218, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24203971217, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24203971214, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -599267673, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2122461700, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585245860, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290239, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290238, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147335073, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147335072, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147334024, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147334026, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147334025, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147334023, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 5025144109, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 5025391282, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 5025391286, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 5025391279, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2143330443, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2143331354, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147056380, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2143331313, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2143330405, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6952920154, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6952919238, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6952920354, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1973347880, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585245860, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585111937, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 961545830, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 961545833, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2123290615, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290239, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 48579290238, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46580016247, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24228835809, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2147463722, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 220038022138, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 220038022139, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1393613006, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1393609381, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1393609383, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1393609382, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -1393609384, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2131496387, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2132370983, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2121267202, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230383590, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230446858, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230284344, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230410085, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230447578, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230395776, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230410933, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230323463, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230285955, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 6230323850, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956095960, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956234390, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956234405, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956234328, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956234362, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": -2097696152, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1956234352, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 46585111937, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 1835106864, | |
| "group": 1 | |
| }, | |
| { | |
| "kidid": 24021015576, | |
| "group": 1 | |
| } | |
| ] | |
| , | |
| "links" : [ | |
| { | |
| "Source": -827783955, | |
| "Target": -827783953, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6893817886, | |
| "Target": 6893817890, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6893817886, | |
| "Target": 6893817891, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6893817886, | |
| "Target": 6893817889, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6893817886, | |
| "Target": 6893817887, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6893817886, | |
| "Target": 6893817885, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6114316215, | |
| "Target": 6114307643, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6114316215, | |
| "Target": 6114317246, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6114316215, | |
| "Target": 6114320383, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6114316215, | |
| "Target": 6114315356, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147255997, | |
| "Target": -2147255999, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147255997, | |
| "Target": -2147256000, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147255997, | |
| "Target": -2147255998, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 895685420, | |
| "Target": 895778335, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 46585112152, | |
| "Target": 46585112149, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 46585112152, | |
| "Target": 46585112148, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 46585112152, | |
| "Target": 46585112151, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210102, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210110, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578208475, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210114, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210108, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210098, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210109, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210112, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210104, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210096, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210106, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 25333208361, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210116, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210105, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210101, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210100, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48578210111, | |
| "Target": 48578210117, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48579290260, | |
| "Target": 48579290255, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48579290241, | |
| "Target": 48579290236, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48579290241, | |
| "Target": 48579290245, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 24203971213, | |
| "Target": 24203971219, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 24203971213, | |
| "Target": 24203971218, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 24203971213, | |
| "Target": 24203971217, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 24203971213, | |
| "Target": 24203971214, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147335072, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334024, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334026, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334025, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334023, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 48579290239, | |
| "Target": 48579290238, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147335072, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334024, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334026, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334025, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2147335073, | |
| "Target": -2147334023, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 5025144109, | |
| "Target": 5025391282, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 5025144109, | |
| "Target": 5025391286, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 5025144109, | |
| "Target": 5025391279, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2143330443, | |
| "Target": -2143331354, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2143330443, | |
| "Target": -2147056380, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2143330443, | |
| "Target": -2143331313, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": -2143330443, | |
| "Target": -2143330405, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6952920154, | |
| "Target": 6952919238, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 6952920154, | |
| "Target": 6952920354, | |
| "relationship": 1 | |
| }, | |
| { | |
| "Source": 961545830, | |
| "Target": 961545833, | |
| "relationship": 1 | |
| } | |
| ] | |
| } |