Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> line{ stroke: #999; stroke-width:1px; opacity:1; } .vertex { fill: #1f77b4; fill-opacity: 1; stroke: #999; stroke-opacity: .5;} </style></head><body> <script> var nodes =[ { "item": 1 }, { "item": 2 }, { "item": 3 }, { "item": 4 }, { "item": 5 }, { "item": 6 }, { "item": 7 }, { "item": 8 }, { "item": 9 }, { "item": 10 }, { "item": 11 }, { "item": 12 }, { "item": 13 }, { "item": 14 }, { "item": 15 }, { "item": 16 }, { "item": 17 }, { "item": 18 }, { "item": 19 }, { "item": 20 }, { "item": 21 }, { "item": 22 }, { "item": 23 }, { "item": 24 }, { "item": 25 }, { "item": 26 }, { "item": 27 }, { "item": 28 }, { "item": 29 }, { "item": 30 }, { "item": 31 }, { "item": 32 }, { "item": 33 }, { "item": 34 }, { "item": 35 }, { "item": 36 }, { "item": 37 }, { "item": 38 }, { "item": 39 }, { "item": 40 }, { "item": 41 }, { "item": 42 }, { "item": 43 }, { "item": 44 }, { "item": 45 }, { "item": 46 }, { "item": 47 }, { "item": 48 }, { "item": 49 }, { "item": 50 }, { "item": 51 }, { "item": 52 }, { "item": 53 }, { "item": 54 }, { "item": 55 }, { "item": 56 }, { "item": 57 }, { "item": 58 }, { "item": 59 }, { "item": 60 }, { "item": 61 }, { "item": 62 }, { "item": 63 }, { "item": 64 }, { "item": 65 }, { "item": 66 }, { "item": 67 }, { "item": 68 }, { "item": 69 }, { "item": 70 }, { "item": 71 }, { "item": 72 }, { "item": 73 }, { "item": 74 }, { "item": 75 }, { "item": 76 }, { "item": 77 }, { "item": 78 }, { "item": 79 }, { "item": 80 }, { "item": 81 }, { "item": 82 }, { "item": 83 }, { "item": 84 }, { "item": 85 }, { "item": 86 }, { "item": 87 }, { "item": 88 }, { "item": 89 }, { "item": 90 }, { "item": 91 }, { "item": 92 }, { "item": 93 }, { "item": 94 }, { "item": 95 }, { "item": 96 }, { "item": 97 }, { "item": 98 }, { "item": 99 }, { "item": 100 }, { "item": 101 }, { "item": 102 }, { "item": 103 }, { "item": 104 }, { "item": 104 }]; var links = [ { "source": 1, "target": 2 }, { "source": 1, "target": 25 }, { "source": 2, "target": 3 }, { "source": 2, "target": 12 }, { "source": 3, "target": 4 }, { "source": 3, "target": 88 }, { "source": 4, "target": 5 }, { "source": 4, "target": 84 }, { "source": 5, "target": 6 }, { "source": 5, "target": 75 }, { "source": 6, "target": 7 }, { "source": 6, "target": 39 }, { "source": 7, "target": 8 }, { "source": 7, "target": 98 }, { "source": 8, "target": 9 }, { "source": 8, "target": 83 }, { "source": 9, "target": 10 }, { "source": 9, "target": 89 }, { "source": 10, "target": 11 }, { "source": 10, "target": 35 }, { "source": 11, "target": 12 }, { "source": 11, "target": 28 }, { "source": 12, "target": 13 }, { "source": 12, "target": 21 }, { "source": 13, "target": 14 }, { "source": 13, "target": 36 }, { "source": 14, "target": 15 }, { "source": 14, "target": 38 }, { "source": 15, "target": 16 }, { "source": 15, "target": 25 }, { "source": 16, "target": 17 }, { "source": 16, "target": 101 }, { "source": 17, "target": 18 }, { "source": 17, "target": 97 }, { "source": 18, "target": 19 }, { "source": 18, "target": 88 }, { "source": 19, "target": 20 }, { "source": 19, "target": 52 }, { "source": 20, "target": 21 }, { "source": 20, "target": 7 }, { "source": 21, "target": 22 }, { "source": 21, "target": 96 }, { "source": 22, "target": 23 }, { "source": 22, "target": 102 }, { "source": 23, "target": 24 }, { "source": 23, "target": 48 }, { "source": 24, "target": 25 }, { "source": 24, "target": 41 }, { "source": 25, "target": 26 }, { "source": 25, "target": 34 }, { "source": 26, "target": 27 }, { "source": 26, "target": 49 }, { "source": 27, "target": 28 }, { "source": 27, "target": 51 }, { "source": 28, "target": 29 }, { "source": 28, "target": 38 }, { "source": 29, "target": 30 }, { "source": 29, "target": 10 }, { "source": 30, "target": 31 }, { "source": 30, "target": 6 }, { "source": 31, "target": 32 }, { "source": 31, "target": 101 }, { "source": 32, "target": 33 }, { "source": 32, "target": 65 }, { "source": 33, "target": 34 }, { "source": 33, "target": 20 }, { "source": 34, "target": 35 }, { "source": 34, "target": 5 }, { "source": 35, "target": 36 }, { "source": 35, "target": 11 }, { "source": 36, "target": 37 }, { "source": 36, "target": 61 }, { "source": 37, "target": 38 }, { "source": 37, "target": 54 }, { "source": 38, "target": 39 }, { "source": 38, "target": 47 }, { "source": 39, "target": 40 }, { "source": 39, "target": 62 }, { "source": 40, "target": 41 }, { "source": 40, "target": 64 }, { "source": 41, "target": 42 }, { "source": 41, "target": 51 }, { "source": 42, "target": 43 }, { "source": 42, "target": 23 }, { "source": 43, "target": 44 }, { "source": 43, "target": 19 }, { "source": 44, "target": 45 }, { "source": 44, "target": 10 }, { "source": 45, "target": 46 }, { "source": 45, "target": 78 }, { "source": 46, "target": 47 }, { "source": 46, "target": 33 }, { "source": 47, "target": 48 }, { "source": 47, "target": 18 }, { "source": 48, "target": 49 }, { "source": 48, "target": 24 }, { "source": 49, "target": 50 }, { "source": 49, "target": 74 }, { "source": 50, "target": 51 }, { "source": 50, "target": 67 }, { "source": 51, "target": 52 }, { "source": 51, "target": 60 }, { "source": 52, "target": 53 }, { "source": 52, "target": 75 }, { "source": 53, "target": 54 }, { "source": 53, "target": 77 }, { "source": 54, "target": 55 }, { "source": 54, "target": 64 }, { "source": 55, "target": 56 }, { "source": 55, "target": 36 }, { "source": 56, "target": 57 }, { "source": 56, "target": 32 }, { "source": 57, "target": 58 }, { "source": 57, "target": 23 }, { "source": 58, "target": 59 }, { "source": 58, "target": 91 }, { "source": 59, "target": 60 }, { "source": 59, "target": 46 }, { "source": 60, "target": 61 }, { "source": 60, "target": 31 }, { "source": 61, "target": 62 }, { "source": 61, "target": 37 }, { "source": 62, "target": 63 }, { "source": 62, "target": 87 }, { "source": 63, "target": 64 }, { "source": 63, "target": 80 }, { "source": 64, "target": 65 }, { "source": 64, "target": 73 }, { "source": 65, "target": 66 }, { "source": 65, "target": 88 }, { "source": 66, "target": 67 }, { "source": 66, "target": 90 }, { "source": 67, "target": 68 }, { "source": 67, "target": 77 }, { "source": 68, "target": 69 }, { "source": 68, "target": 49 }, { "source": 69, "target": 70 }, { "source": 69, "target": 45 }, { "source": 70, "target": 71 }, { "source": 70, "target": 36 }, { "source": 71, "target": 72 }, { "source": 71, "target": 104 }, { "source": 72, "target": 73 }, { "source": 72, "target": 59 }, { "source": 73, "target": 74 }, { "source": 73, "target": 44 }, { "source": 74, "target": 75 }, { "source": 74, "target": 50 }, { "source": 75, "target": 76 }, { "source": 75, "target": 100 }, { "source": 76, "target": 77 }, { "source": 76, "target": 93 }, { "source": 77, "target": 78 }, { "source": 77, "target": 86 }, { "source": 78, "target": 79 }, { "source": 78, "target": 101 }, { "source": 79, "target": 80 }, { "source": 79, "target": 103 }, { "source": 80, "target": 81 }, { "source": 80, "target": 90 }, { "source": 81, "target": 82 }, { "source": 81, "target": 62 }, { "source": 82, "target": 83 }, { "source": 82, "target": 58 }, { "source": 83, "target": 84 }, { "source": 83, "target": 49 }, { "source": 84, "target": 85 }, { "source": 84, "target": 13 }, { "source": 85, "target": 86 }, { "source": 85, "target": 72 }, { "source": 86, "target": 87 }, { "source": 86, "target": 57 }, { "source": 87, "target": 88 }, { "source": 87, "target": 63 }, { "source": 88, "target": 89 }, { "source": 88, "target": 9 }, { "source": 89, "target": 90 }, { "source": 89, "target": 2 }, { "source": 90, "target": 91 }, { "source": 90, "target": 99 }, { "source": 91, "target": 92 }, { "source": 91, "target": 10 }, { "source": 92, "target": 93 }, { "source": 92, "target": 12 }, { "source": 93, "target": 94 }, { "source": 93, "target": 103 }, { "source": 94, "target": 95 }, { "source": 94, "target": 75 }, { "source": 95, "target": 96 }, { "source": 95, "target": 71 }, { "source": 96, "target": 97 }, { "source": 96, "target": 62 }, { "source": 97, "target": 98 }, { "source": 97, "target": 26 }, { "source": 98, "target": 99 }, { "source": 98, "target": 85 }, { "source": 99, "target": 100 }, { "source": 99, "target": 70 }, { "source": 100, "target": 101 }, { "source": 100, "target": 76 }, { "source": 101, "target": 102 }, { "source": 101, "target": 22 }, { "source": 102, "target": 103 }, { "source": 102, "target": 15 }, { "source": 103, "target": 104 }, { "source": 103, "target": 8 }, { "source": 104, "target": 1 }, { "source": 104, "target": 23 }]; var width = 500; var height = 500; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); svg.append('g').classed('nodes',true); svg.append('g').classed('links',true); var force = d3.forceSimulation() .nodes(nodes) .force('center', d3.forceCenter((width/2)+11, height/2)) .force('charge', d3.forceManyBody().strength(-10)) .force('collision', d3.forceCollide()) .force('link', d3.forceLink().links(links)) .on('tick',ticked); function updateTextNodes(){ var nodeList = svg.select('.nodes') .selectAll('circle') .data(nodes); nodeList.enter() .append('circle') .classed('vertex',true) .attr('r',5) .merge(nodeList) .attr('cx',d => d.x) .attr('cy',d => d.y); nodeList.exit().remove(); } function updateLinks(){ var linkLine = svg.select('.links') .selectAll('line') .data(links); linkLine.enter() .append('line') .merge(linkLine) .attr('x1',d => d.source.x) .attr('y1',d => d.source.y) .attr('x2',d => d.target.x) .attr('y2',d => d.target.y); linkLine.exit().remove(); } function ticked(){ updateTextNodes(); updateLinks(); } </script></body> https://d3js.org/d3.v4.min.js