ForceDirectedGraph

In this example below you will see how to do a ForceDirectedGraph with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by zdflower, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright zdflower ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ForceDirectedGraph</title>
  
  
  <link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/zdflower/forceDirectedGraph/master/flags/flags.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  		<svg id="graph"></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/zdflower/forcedirectedgraph-xjxWJK */
line {
  stroke: green;
}

/*Downloaded from https://www.codeseek.co/zdflower/forcedirectedgraph-xjxWJK */

const data = {
	"nodes": [
		{ "country": "East Timor", "code": "tl" },
		{ "country": "Canada", "code": "ca" },
		{ "country": "Turkmenistan", "code": "tm" },
		{ "country": "United States of America", "code": "us" },
		{ "country": "Lithuania", "code": "lt" },
		{ "country": "Cambodia", "code": "kh" },
		{ "country": "Ethiopia", "code": "et" },
		{ "country": "Swaziland", "code": "sz" },
		{ "country": "Argentina", "code": "ar" },
		{ "country": "Bolivia", "code": "bo" },
		{ "country": "Cameroon", "code": "cm" },
		{ "country": "Burkina Faso", "code": "bf" },
		{ "country": "Ghana", "code": "gh" },
		{ "country": "Saudi Arabia", "code": "sa" },
		{ "country": "Slovenia", "code": "si" },
		{ "country": "Guatemala", "code": "gt" },
		{ "country": "Bosnia and Herzegovina", "code": "ba" },
		{ "country": "Kuwait", "code": "kw" },
		{ "country": "Russian Federation", "code": "ru" },
		{ "country": "Jordan", "code": "jo" },
		{ "country": "St. Lucia", "code": "lc" },
		{ "country": "Spain", "code": "es" },
		{ "country": "Liberia", "code": "lr" },
		{ "country": "Netherlands", "code": "nl" },
		{ "country": "Paraguay", "code": "py" },
		{ "country": "Oman", "code": "om" },
		{ "country": "Tanzania", "code": "tz" },
		{ "country": "Gabon", "code": "ga" },
		{ "country": "Monaco", "code": "mc" },
		{ "country": "Yemen", "code": "ye" },
		{ "country": "Pakistan", "code": "pk" },
		{ "country": "Albania", "code": "al" },
		{ "country": "United Arab Emirates", "code": "ae" },
		{ "country": "India", "code": "in" },
		{ "country": "Azerbaijan", "code": "az" },
		{ "country": "Lesotho", "code": "ls" },
		{ "country": "Kenya", "code": "ke" },
		{ "country": "South Korea", "code": "kr" },
		{ "country": "Tajikistan", "code": "tj" },
		{ "country": "Turkey", "code": "tr" },
		{ "country": "Afghanistan", "code": "af" },
		{ "country": "Bangladesh", "code": "bd" },
		{ "country": "Mauritania", "code": "mr" },
		{ "country": "Solomon Islands", "code": "sb" },
		{ "country": "San Marino", "code": "sm" },
		{ "country": "Kyrgyzstan", "code": "kg" },
		{ "country": "Mongolia", "code": "mn" },
		{ "country": "France", "code": "fr" },
		{ "country": "Rwanda", "code": "rw" },
		{ "country": "Slovakia", "code": "sk" },
		{ "country": "Somalia", "code": "so" },
		{ "country": "Peru", "code": "pe" },
		{ "country": "Laos", "code": "la" },
		{ "country": "Norway", "code": "no" },
		{ "country": "Malawi", "code": "mw" },
		{ "country": "Benin", "code": "bj" },
		{ "country": "Singapore", "code": "sg" },
		{ "country": "Montenegro", "code": "me" },
		{ "country": "Togo", "code": "tg" },
		{ "country": "China", "code": "cn" },
		{ "country": "Armenia", "code": "am" },
		{ "country": "Dominican Republic", "code": "do" },
		{ "country": "Ukraine", "code": "ua" },
		{ "country": "Bahrain", "code": "bh" },
		{ "country": "Finland", "code": "fi" },
		{ "country": "Libya", "code": "ly" },
		{ "country": "Indonesia", "code": "id" },
		{ "country": "Central African Republic", "code": "cf" },
		{ "country": "Sweden", "code": "se" },
		{ "country": "Vietnam", "code": "vn" },
		{ "country": "Mali", "code": "ml" },
		{ "country": "Bulgaria", "code": "bg" },
		{ "country": "Romania", "code": "ro" },
		{ "country": "Angola", "code": "ao" },
		{ "country": "Chad", "code": "td" },
		{ "country": "South Africa", "code": "za" },
		{ "country": "St. Vincent and the Grenadines", "code": "vc" },
		{ "country": "Nicaragua", "code": "ni" },
		{ "country": "Liechtenstein", "code": "li" },
		{ "country": "Antigua & Barbuda", "code": "ag" },
		{ "country": "Malaysia", "code": "my" },
		{ "country": "Senegal", "code": "sn" },
		{ "country": "Mozambique", "code": "mz" },
		{ "country": "Uganda", "code": "ug" },
		{ "country": "Japan", "code": "jp" },
		{ "country": "Niger", "code": "ne" },
		{ "country": "Brazil", "code": "br" },
		{ "country": "Guinea", "code": "gn" },
		{ "country": "Panama", "code": "pa" },
		{ "country": "Guyana", "code": "gy" },
		{ "country": "Costa Rica", "code": "cr" },
		{ "country": "Luxembourg", "code": "lu" },
		{ "country": "Andorra", "code": "ad" },
		{ "country": "Ivory Coast", "code": "ci" },
		{ "country": "Syria", "code": "sy" },
		{ "country": "Nigeria", "code": "ng" },
		{ "country": "Ecuador", "code": "ec" },
		{ "country": "Czech Republic", "code": "cz" },
		{ "country": "Brunei", "code": "bn" },
		{ "country": "Australia", "code": "au" },
		{ "country": "Iran", "code": "ir" },
		{ "country": "Algeria", "code": "dz" },
		{ "country": "El Salvador", "code": "sv" },
		{ "country": "St. Kitts and Nevis", "code": "kn" },
		{ "country": "Chile", "code": "cl" },
		{ "country": "Belgium", "code": "be" },
		{ "country": "Thailand", "code": "th" },
		{ "country": "Haiti", "code": "ht" },
		{ "country": "Iraq", "code": "iq" },
		{ "country": "Sierra Leone", "code": "sl" },
		{ "country": "Georgia", "code": "ge" },
		{ "country": "Gambia", "code": "gm" },
		{ "country": "Philippines", "code": "ph" },
		{ "country": "Moldova", "code": "md" },
		{ "country": "Morocco", "code": "ma" },
		{ "country": "Namibia", "code": "na" },
		{ "country": "Guinea-Bissau", "code": "gw" },
		{ "country": "Switzerland", "code": "ch" },
		{ "country": "Grenada", "code": "gd" },
		{ "country": "Belize", "code": "bz" },
		{ "country": "Portugal", "code": "pt" },
		{ "country": "Estonia", "code": "ee" },
		{ "country": "Uruguay", "code": "uy" },
		{ "country": "Equatorial Guinea", "code": "gq" },
		{ "country": "Lebanon", "code": "lb" },
		{ "country": "Uzbekistan", "code": "uz" },
		{ "country": "Egypt", "code": "eg" },
		{ "country": "Djibouti", "code": "dj" },
		{ "country": "Colombia", "code": "co" },
		{ "country": "Burundi", "code": "bi" },
		{ "country": "Taiwan", "code": "tw" },
		{ "country": "Cyprus", "code": "cy" },
		{ "country": "Qatar", "code": "qa" },
		{ "country": "Italy", "code": "it" },
		{ "country": "Bhutan", "code": "bt" },
		{ "country": "Sudan", "code": "sd" },
		{ "country": "Nepal", "code": "np" },
		{ "country": "Democratic Republic of the Congo", "code": "cd" },
		{ "country": "Suriname", "code": "sr" },
		{ "country": "Venezuela", "code": "ve" },
		{ "country": "Israel", "code": "il" },
		{ "country": "Zambia", "code": "zm" },
		{ "country": "Austria", "code": "at" },
		{ "country": "Papua New Guinea", "code": "pg" },
		{ "country": "Zimbabwe", "code": "zw" },
		{ "country": "Germany", "code": "de" },
		{ "country": "Denmark", "code": "dk" },
		{ "country": "Kazakhstan", "code": "kz" },
		{ "country": "Poland", "code": "pl" },
		{ "country": "Eritrea", "code": "er" },
		{ "country": "Ireland", "code": "ie" },
		{ "country": "Macedonia", "code": "mk" },
		{ "country": "North Korea", "code": "kp" },
		{ "country": "Trinidad and Tobago", "code": "tt" },
		{ "country": "Latvia", "code": "lv" },
		{ "country": "Hungary", "code": "hu" },
		{ "country": "Belarus", "code": "by" },
		{ "country": "Honduras", "code": "hn" },
		{ "country": "Myanmar", "code": "mm" },
		{ "country": "Mexico", "code": "mx" },
		{ "country": "Tunisia", "code": "tn" },
		{ "country": "United Kingdom", "code": "gb" },
		{ "country": "Congo", "code": "cg" },
		{ "country": "Yugoslavia", "code": "xk" },
		{ "country": "Greece", "code": "gr" },
		{ "country": "Sri Lanka", "code": "lk" },
		{ "country": "Croatia", "code": "hr" },
		{ "country": "Botswana", "code": "bw" }
	],
	"links": [
		{ "target": 66, "source": 0 },
		{ "target": 3, "source": 1 },
		{ "target": 100, "source": 2 },
		{ "target": 40, "source": 2 },
		{ "target": 125, "source": 2 },
		{ "target": 147, "source": 2 },
		{ "target": 159, "source": 3 },
		{ "target": 18, "source": 3 },
		{ "target": 148, "source": 4 },
		{ "target": 18, "source": 4 },
		{ "target": 154, "source": 4 },
		{ "target": 156, "source": 4 },
		{ "target": 106, "source": 5 },
		{ "target": 52, "source": 5 },
		{ "target": 69, "source": 5 },
		{ "target": 36, "source": 6 },
		{ "target": 50, "source": 6 },
		{ "target": 127, "source": 6 },
		{ "target": 149, "source": 6 },
		{ "target": 135, "source": 6 },
		{ "target": 82, "source": 7 },
		{ "target": 75, "source": 7 },
		{ "target": 86, "source": 8 },
		{ "target": 9, "source": 8 },
		{ "target": 24, "source": 8 },
		{ "target": 104, "source": 8 },
		{ "target": 122, "source": 8 },
		{ "target": 51, "source": 9 },
		{ "target": 86, "source": 9 },
		{ "target": 24, "source": 9 },
		{ "target": 104, "source": 9 },
		{ "target": 123, "source": 10 },
		{ "target": 95, "source": 10 },
		{ "target": 27, "source": 10 },
		{ "target": 67, "source": 10 },
		{ "target": 74, "source": 10 },
		{ "target": 162, "source": 10 },
		{ "target": 70, "source": 11 },
		{ "target": 55, "source": 11 },
		{ "target": 85, "source": 11 },
		{ "target": 93, "source": 11 },
		{ "target": 12, "source": 11 },
		{ "target": 58, "source": 11 },
		{ "target": 93, "source": 12 },
		{ "target": 58, "source": 12 },
		{ "target": 108, "source": 13 },
		{ "target": 126, "source": 13 },
		{ "target": 19, "source": 13 },
		{ "target": 140, "source": 13 },
		{ "target": 29, "source": 13 },
		{ "target": 17, "source": 13 },
		{ "target": 63, "source": 13 },
		{ "target": 132, "source": 13 },
		{ "target": 32, "source": 13 },
		{ "target": 25, "source": 13 },
		{ "target": 142, "source": 14 },
		{ "target": 155, "source": 14 },
		{ "target": 133, "source": 14 },
		{ "target": 166, "source": 14 },
		{ "target": 159, "source": 15 },
		{ "target": 119, "source": 15 },
		{ "target": 157, "source": 15 },
		{ "target": 102, "source": 15 },
		{ "target": 166, "source": 16 },
		{ "target": 163, "source": 16 },
		{ "target": 57, "source": 16 },
		{ "target": 100, "source": 17 },
		{ "target": 108, "source": 17 },
		{ "target": 148, "source": 18 },
		{ "target": 121, "source": 18 },
		{ "target": 154, "source": 18 },
		{ "target": 62, "source": 18 },
		{ "target": 156, "source": 18 },
		{ "target": 110, "source": 18 },
		{ "target": 34, "source": 18 },
		{ "target": 64, "source": 18 },
		{ "target": 53, "source": 18 },
		{ "target": 147, "source": 18 },
		{ "target": 59, "source": 18 },
		{ "target": 46, "source": 18 },
		{ "target": 152, "source": 18 },
		{ "target": 84, "source": 18 },
		{ "target": 108, "source": 19 },
		{ "target": 126, "source": 19 },
		{ "target": 94, "source": 19 },
		{ "target": 140, "source": 19 },
		{ "target": 76, "source": 20 },
		{ "target": 47, "source": 21 },
		{ "target": 92, "source": 21 },
		{ "target": 120, "source": 21 },
		{ "target": 114, "source": 21 },
		{ "target": 93, "source": 22 },
		{ "target": 87, "source": 22 },
		{ "target": 109, "source": 22 },
		{ "target": 105, "source": 23 },
		{ "target": 145, "source": 23 },
		{ "target": 86, "source": 24 },
		{ "target": 29, "source": 25 },
		{ "target": 32, "source": 25 },
		{ "target": 137, "source": 26 },
		{ "target": 83, "source": 26 },
		{ "target": 36, "source": 26 },
		{ "target": 129, "source": 26 },
		{ "target": 48, "source": 26 },
		{ "target": 82, "source": 26 },
		{ "target": 141, "source": 26 },
		{ "target": 54, "source": 26 },
		{ "target": 123, "source": 27 },
		{ "target": 162, "source": 27 },
		{ "target": 47, "source": 28 },
		{ "target": 127, "source": 29 },
		{ "target": 149, "source": 29 },
		{ "target": 100, "source": 30 },
		{ "target": 40, "source": 30 },
		{ "target": 59, "source": 30 },
		{ "target": 33, "source": 30 },
		{ "target": 158, "source": 30 },
		{ "target": 151, "source": 31 },
		{ "target": 163, "source": 31 },
		{ "target": 57, "source": 31 },
		{ "target": 164, "source": 31 },
		{ "target": 132, "source": 32 },
		{ "target": 59, "source": 33 },
		{ "target": 134, "source": 33 },
		{ "target": 41, "source": 33 },
		{ "target": 158, "source": 33 },
		{ "target": 165, "source": 33 },
		{ "target": 136, "source": 33 },
		{ "target": 60, "source": 34 },
		{ "target": 110, "source": 34 },
		{ "target": 100, "source": 34 },
		{ "target": 39, "source": 34 },
		{ "target": 75, "source": 35 },
		{ "target": 83, "source": 36 },
		{ "target": 50, "source": 36 },
		{ "target": 135, "source": 36 },
		{ "target": 152, "source": 37 },
		{ "target": 40, "source": 38 },
		{ "target": 45, "source": 38 },
		{ "target": 125, "source": 38 },
		{ "target": 59, "source": 38 },
		{ "target": 164, "source": 39 },
		{ "target": 131, "source": 39 },
		{ "target": 71, "source": 39 },
		{ "target": 60, "source": 39 },
		{ "target": 110, "source": 39 },
		{ "target": 100, "source": 39 },
		{ "target": 108, "source": 39 },
		{ "target": 94, "source": 39 },
		{ "target": 100, "source": 40 },
		{ "target": 125, "source": 40 },
		{ "target": 59, "source": 40 },
		{ "target": 158, "source": 41 },
		{ "target": 70, "source": 42 },
		{ "target": 81, "source": 42 },
		{ "target": 114, "source": 42 },
		{ "target": 101, "source": 42 },
		{ "target": 143, "source": 43 },
		{ "target": 133, "source": 44 },
		{ "target": 125, "source": 45 },
		{ "target": 147, "source": 45 },
		{ "target": 59, "source": 45 },
		{ "target": 59, "source": 46 },
		{ "target": 161, "source": 47 },
		{ "target": 105, "source": 47 },
		{ "target": 91, "source": 47 },
		{ "target": 117, "source": 47 },
		{ "target": 92, "source": 47 },
		{ "target": 145, "source": 47 },
		{ "target": 133, "source": 47 },
		{ "target": 137, "source": 48 },
		{ "target": 83, "source": 48 },
		{ "target": 129, "source": 48 },
		{ "target": 148, "source": 49 },
		{ "target": 142, "source": 49 },
		{ "target": 155, "source": 49 },
		{ "target": 97, "source": 49 },
		{ "target": 62, "source": 49 },
		{ "target": 127, "source": 50 },
		{ "target": 128, "source": 51 },
		{ "target": 96, "source": 51 },
		{ "target": 86, "source": 51 },
		{ "target": 104, "source": 51 },
		{ "target": 59, "source": 52 },
		{ "target": 158, "source": 52 },
		{ "target": 106, "source": 52 },
		{ "target": 69, "source": 52 },
		{ "target": 64, "source": 53 },
		{ "target": 68, "source": 53 },
		{ "target": 82, "source": 54 },
		{ "target": 141, "source": 54 },
		{ "target": 85, "source": 55 },
		{ "target": 58, "source": 55 },
		{ "target": 95, "source": 55 },
		{ "target": 80, "source": 56 },
		{ "target": 66, "source": 56 },
		{ "target": 166, "source": 57 },
		{ "target": 163, "source": 57 },
		{ "target": 147, "source": 59 },
		{ "target": 130, "source": 59 },
		{ "target": 152, "source": 59 },
		{ "target": 134, "source": 59 },
		{ "target": 158, "source": 59 },
		{ "target": 136, "source": 59 },
		{ "target": 69, "source": 59 },
		{ "target": 110, "source": 60 },
		{ "target": 100, "source": 60 },
		{ "target": 107, "source": 61 },
		{ "target": 148, "source": 62 },
		{ "target": 155, "source": 62 },
		{ "target": 113, "source": 62 },
		{ "target": 72, "source": 62 },
		{ "target": 156, "source": 62 },
		{ "target": 132, "source": 63 },
		{ "target": 121, "source": 64 },
		{ "target": 68, "source": 64 },
		{ "target": 85, "source": 65 },
		{ "target": 74, "source": 65 },
		{ "target": 101, "source": 65 },
		{ "target": 160, "source": 65 },
		{ "target": 135, "source": 65 },
		{ "target": 126, "source": 65 },
		{ "target": 80, "source": 66 },
		{ "target": 143, "source": 66 },
		{ "target": 74, "source": 67 },
		{ "target": 162, "source": 67 },
		{ "target": 137, "source": 67 },
		{ "target": 135, "source": 67 },
		{ "target": 146, "source": 68 },
		{ "target": 81, "source": 70 },
		{ "target": 85, "source": 70 },
		{ "target": 93, "source": 70 },
		{ "target": 87, "source": 70 },
		{ "target": 101, "source": 70 },
		{ "target": 151, "source": 71 },
		{ "target": 163, "source": 71 },
		{ "target": 164, "source": 71 },
		{ "target": 72, "source": 71 },
		{ "target": 155, "source": 72 },
		{ "target": 163, "source": 72 },
		{ "target": 113, "source": 72 },
		{ "target": 162, "source": 73 },
		{ "target": 137, "source": 73 },
		{ "target": 141, "source": 73 },
		{ "target": 115, "source": 73 },
		{ "target": 85, "source": 74 },
		{ "target": 95, "source": 74 },
		{ "target": 135, "source": 74 },
		{ "target": 82, "source": 75 },
		{ "target": 144, "source": 75 },
		{ "target": 115, "source": 75 },
		{ "target": 167, "source": 75 },
		{ "target": 118, "source": 76 },
		{ "target": 157, "source": 77 },
		{ "target": 102, "source": 77 },
		{ "target": 90, "source": 77 },
		{ "target": 117, "source": 78 },
		{ "target": 142, "source": 78 },
		{ "target": 103, "source": 79 },
		{ "target": 106, "source": 80 },
		{ "target": 98, "source": 80 },
		{ "target": 112, "source": 80 },
		{ "target": 116, "source": 81 },
		{ "target": 111, "source": 81 },
		{ "target": 87, "source": 81 },
		{ "target": 141, "source": 82 },
		{ "target": 144, "source": 82 },
		{ "target": 137, "source": 83 },
		{ "target": 135, "source": 83 },
		{ "target": 95, "source": 85 },
		{ "target": 101, "source": 85 },
		{ "target": 128, "source": 86 },
		{ "target": 139, "source": 86 },
		{ "target": 89, "source": 86 },
		{ "target": 138, "source": 86 },
		{ "target": 122, "source": 86 },
		{ "target": 116, "source": 87 },
		{ "target": 93, "source": 87 },
		{ "target": 109, "source": 87 },
		{ "target": 90, "source": 88 },
		{ "target": 128, "source": 88 },
		{ "target": 139, "source": 89 },
		{ "target": 138, "source": 89 },
		{ "target": 105, "source": 91 },
		{ "target": 145, "source": 91 },
		{ "target": 108, "source": 94 },
		{ "target": 124, "source": 94 },
		{ "target": 140, "source": 94 },
		{ "target": 128, "source": 96 },
		{ "target": 145, "source": 97 },
		{ "target": 148, "source": 97 },
		{ "target": 142, "source": 97 },
		{ "target": 143, "source": 99 },
		{ "target": 108, "source": 100 },
		{ "target": 114, "source": 101 },
		{ "target": 160, "source": 101 },
		{ "target": 157, "source": 102 },
		{ "target": 145, "source": 105 },
		{ "target": 158, "source": 106 },
		{ "target": 141, "source": 115 },
		{ "target": 167, "source": 115 },
		{ "target": 145, "source": 117 },
		{ "target": 142, "source": 117 },
		{ "target": 133, "source": 117 },
		{ "target": 159, "source": 119 },
		{ "target": 154, "source": 121 },
		{ "target": 140, "source": 124 },
		{ "target": 147, "source": 125 },
		{ "target": 135, "source": 126 },
		{ "target": 140, "source": 126 },
		{ "target": 149, "source": 127 },
		{ "target": 139, "source": 128 },
		{ "target": 137, "source": 129 },
		{ "target": 142, "source": 133 },
		{ "target": 166, "source": 133 },
		{ "target": 137, "source": 135 },
		{ "target": 149, "source": 135 },
		{ "target": 162, "source": 137 },
		{ "target": 141, "source": 137 },
		{ "target": 153, "source": 139 },
		{ "target": 144, "source": 141 },
		{ "target": 167, "source": 141 },
		{ "target": 145, "source": 142 },
		{ "target": 155, "source": 142 },
		{ "target": 167, "source": 144 },
		{ "target": 148, "source": 145 },
		{ "target": 146, "source": 145 },
		{ "target": 156, "source": 148 },
		{ "target": 161, "source": 150 },
		{ "target": 163, "source": 151 },
		{ "target": 164, "source": 151 },
		{ "target": 156, "source": 154 },
		{ "target": 166, "source": 155 },
		{ "target": 163, "source": 155 },
		{ "target": 166, "source": 163 }
	]
}

const node_data = data.nodes;
const link_data = data.links;

const width = 900;
const height = 600;

const svg = d3.select("svg").attr("width", width).attr("height", height)

const simulacion = d3.forceSimulation().nodes(node_data)
	
const link_force = d3.forceLink(link_data).id((d, i) => i);
	
simulacion
  .force("charge_force", d3.forceManyBody())
	.force("center_force", d3.forceCenter(width / 2, height / 2))
	.force("links", link_force);

const node = svg.append("g").attr("class", "nodes")
    .selectAll(".node")
	  .data(node_data)
	  .enter()
	  .append("g").attr("class", "node")
	  .append("text").text((d) => d.country)

node.append("image").attr("class", (d) => "flag" + " flag-" + d.code)

const link = svg.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(link_data)
  .enter()
  .append("line")
  .attr("stroke-width", 2);
	
simulacion.on("tick", tickActions);

function tickActions() {
	node
		.attr("x", (d) => d.x)
		.attr("y", (d) => d.y)
	link
		.attr("x1", (d) => d.source.x)
		.attr("y1", (d) => d.source.y)
		.attr("x2", (d) => d.target.x)
		.attr("y2", (d) => d.target.y)
}

// Resources:
// http://www.puzzlr.org/force-directed-graph-minimal-working-example/
// https://bl.ocks.org/mbostock/950642
// https://www.flag-sprites.com/

Comments