├── .gitignore ├── README.md ├── config.js ├── data ├── data.json ├── index.js ├── org.json ├── org.yaml └── simple-data.js ├── image ├── img-0.png ├── img-1.png ├── img-10.png ├── img-11.png ├── img-12.png ├── img-13.png ├── img-14.png ├── img-15.png ├── img-16.png ├── img-17.png ├── img-18.png ├── img-19.png ├── img-2.png ├── img-20.png ├── img-21.png ├── img-22.png ├── img-23.png ├── img-24.png ├── img-25.png ├── img-26.png ├── img-27.png ├── img-28.png ├── img-29.png ├── img-3.png ├── img-30.png ├── img-4.png ├── img-5.png ├── img-6.png ├── img-7.png ├── img-8.png └── img-9.png ├── index.html ├── index.js ├── notes.yaml ├── package.json ├── src ├── animate.js ├── drag.js ├── hovercard.js ├── image.js ├── label.js ├── link.js ├── node.js └── simulation.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | .idea 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | archive 32 | 33 | dist 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | build 39 | 40 | # node-waf configuration 41 | .lock-wscript 42 | 43 | # Compiled binary addons (https://nodejs.org/api/addons.html) 44 | build/Release 45 | 46 | # Dependency directories 47 | node_modules/ 48 | jspm_packages/ 49 | 50 | # TypeScript v1 declaration files 51 | typings/ 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Optional REPL history 60 | .node_repl_history 61 | 62 | # Output of 'npm pack' 63 | *.tgz 64 | 65 | # Yarn Integrity file 66 | .yarn-integrity 67 | 68 | # dotenv environment variables file 69 | .env 70 | .env.test 71 | 72 | # parcel-bundler cache (https://parceljs.org/) 73 | .cache 74 | 75 | # next.js build output 76 | .next 77 | 78 | # nuxt.js build output 79 | .nuxt 80 | 81 | # vuepress build output 82 | .vuepress/dist 83 | 84 | # Serverless directories 85 | .serverless/ 86 | 87 | # FuseBox cache 88 | .fusebox/ 89 | 90 | # DynamoDB Local files 91 | .dynamodb/ 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # D3 Force Graph Example 2 | 3 | ## Installation 4 | 5 | 1. Make sure that Node.js is installed on your Workstation: https://nodejs.org/en/ 6 | 7 | 2. Open command terminal in project directory, and run: 8 | `npm install` and then run `npm start`. 9 | 10 | This will install all dependencies and start the application. 11 | 12 | 3. Navigate to `http://localhost:8080/index.html` in your browser. 13 | 14 | ## D3 / Force Graphs Resources 15 | 16 | ### Open Resources 17 | 18 | - [Understanding Link Distance (bl.ocks)](http://bl.ocks.org/sathomas/83515b77c2764837aac2) 19 | - [Adjustable Link Strength (bl.ocks)](https://bl.ocks.org/mbostock/aba1a8d1a484f5c5f294eebd353842da) 20 | - [Effects of Curved Lines (Academic)](https://dc.etsu.edu/cgi/viewcontent.cgi?article=1068&context=honors) 21 | - [D3 Force Graphs Documentation](https://github.com/d3/d3-force) 22 | - [Interactive Dynamic Force Graphs (Article)](https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811) 23 | 24 | ### Pluralsight Courses 25 | - [Getting Started with D3](https://app.pluralsight.com/library/courses/d3-getting-started/table-of-contents) 26 | - [D3 Data Visualization Fundamentals](https://app.pluralsight.com/library/courses/d3-data-visualization-fundamentals) 27 | - [Making Data into Something You Can See](https://app.pluralsight.com/library/courses/data-you-can-see/table-of-contents) 28 | 29 | #### Have a resource you'd like included? [Submit a PR directly!](https://github.com/danielstern/force-graph-example/compare) 30 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | /* 2 | Configuration file defining shared constants and standardized references, such as the svg target. 3 | */ 4 | 5 | import * as d3 from 'd3'; 6 | 7 | export const [width, height] = [600,600]; 8 | export const svg = d3.select("#Target"); 9 | export {data} from "./data"; 10 | 11 | -------------------------------------------------------------------------------- /data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes":[{ 3 | "id":1, 4 | "influence": 1 5 | },{ 6 | "id": 2, 7 | "influence": 2 8 | }], 9 | "links":[{ 10 | "source": 1, 11 | "target": 2, 12 | "weight": 3 13 | }] 14 | } 15 | -------------------------------------------------------------------------------- /data/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Contains a utility that converts our data from easy-to-read YAML to a JavaScript object 3 | */ 4 | 5 | const { offices, personnel, committees } = require("./org.yaml"); 6 | 7 | export const data = { 8 | nodes: [], 9 | links: [] 10 | }; 11 | 12 | const rawLinks = []; 13 | 14 | personnel.forEach((individual, index) => { 15 | 16 | data.nodes.push({... individual, influence: 1, sorting: index}); 17 | 18 | }); 19 | 20 | data.nodes.forEach((individual) => { 21 | 22 | if (individual.boss) { 23 | 24 | rawLinks.push({ 25 | 26 | source: individual.id, 27 | target: individual.boss, 28 | weight: 3, 29 | type: "SUPERVISORY", 30 | overlap: 0 31 | 32 | }); 33 | 34 | data.nodes.find(node => individual.boss === node.id).influence += individual.influence; 35 | 36 | } 37 | 38 | }); 39 | 40 | let linkId = 0; 41 | 42 | for (let key in offices) { 43 | let office = offices[key]; 44 | 45 | office.forEach((individual) => { 46 | 47 | data.nodes.find(node => individual === node.id).zone = key; 48 | 49 | office.forEach((individual2) => { 50 | if (individual2 !== individual) { 51 | rawLinks.push({ 52 | id: `link--${linkId++}`, 53 | source: individual, 54 | target: individual2, 55 | weight: 0.25, 56 | type: "COWORKER", 57 | overlap: 0 58 | 59 | }) 60 | } 61 | }) 62 | }) 63 | } 64 | 65 | for (let key in committees) { 66 | 67 | let committee = committees[key]; 68 | 69 | committee.forEach((individual) => { 70 | committee.forEach((individual2) => { 71 | if (individual2 !== individual) { 72 | rawLinks.push({ 73 | source: individual, 74 | target: individual2, 75 | weight: 0.1, 76 | type: "COMMITTEE", 77 | overlap: 0 78 | }) 79 | } 80 | }) 81 | }) 82 | } 83 | 84 | const linkVectorEquality = (link1, link2) => (link1.source === link2.source && link1.target === link2.target) || (link1.source === link2.target && link1.target === link2.source); 85 | 86 | rawLinks.forEach((rawLink) => { 87 | 88 | const existing = data.links.find(link => { 89 | 90 | if (link.type === rawLink.type) { 91 | 92 | if (linkVectorEquality(link, rawLink)) { 93 | return true; 94 | } 95 | 96 | } 97 | 98 | }); 99 | if (!existing) { 100 | 101 | data.links.push({...rawLink}); 102 | 103 | } else { 104 | 105 | existing.weight += rawLink.weight; 106 | 107 | } 108 | 109 | }); 110 | 111 | data.links.forEach((link1) => { 112 | 113 | data.links.forEach((link2) => { 114 | if (link1.id !== link2.id && link1.type !== link2.type && linkVectorEquality(link1, link2)) { 115 | 116 | if (link1.weight > link2.weight) link1.overlap += 1; 117 | if (link2.weight > link1.weight) link2.overlap += 1; 118 | 119 | 120 | // could be useful? 121 | // if (!link1.overlap.includes(link2.id)) link1.overlap.push(link2.id); 122 | // if (!link2.overlap.includes(link1.id)) link2.overlap.push(link1.id); 123 | 124 | } 125 | }) 126 | }); 127 | 128 | console.log(data); 129 | console.log(JSON.stringify(data, null, 2)); 130 | 131 | /* Want to add: feature that also outputs to a file. 132 | Difficult, because this script technically runs in the browser, where FS is not accessible. 133 | */ 134 | // fs.writeFile('./org.json', JSON.stringify(data, null, 2) , 'utf-8'); -------------------------------------------------------------------------------- /data/org.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { 4 | "id": 1, 5 | "name": "James Dawkins", 6 | "role": "CEO", 7 | "influence": 6, 8 | "sorting": 0 9 | }, 10 | { 11 | "id": 2, 12 | "name": "Teresa Jamison", 13 | "role": "CTO", 14 | "boss": 1, 15 | "influence": 3, 16 | "sorting": 1, 17 | "zone": "tech office" 18 | }, 19 | { 20 | "id": 3, 21 | "name": "Gary Jones", 22 | "role": "Lead Developer", 23 | "boss": 2, 24 | "influence": 2, 25 | "sorting": 2, 26 | "zone": "tech office" 27 | }, 28 | { 29 | "id": 4, 30 | "name": "Corey Smith", 31 | "role": "Junior Developer", 32 | "boss": 2, 33 | "influence": 1, 34 | "sorting": 3, 35 | "zone": "tech office" 36 | }, 37 | { 38 | "id": 5, 39 | "name": "Amanda Jameson", 40 | "role": "Development Intern", 41 | "boss": 3, 42 | "influence": 1, 43 | "sorting": 4, 44 | "zone": "tech office" 45 | }, 46 | { 47 | "id": 6, 48 | "name": "Kent Wu", 49 | "role": "CFO", 50 | "boss": 1, 51 | "influence": 3, 52 | "sorting": 5, 53 | "zone": "finance office" 54 | }, 55 | { 56 | "id": 7, 57 | "name": "James Tang", 58 | "role": "Treasurer", 59 | "boss": 6, 60 | "influence": 1, 61 | "sorting": 6, 62 | "zone": "finance office" 63 | }, 64 | { 65 | "id": 8, 66 | "name": "Mary Simmons", 67 | "role": "Chief Financial Analyst", 68 | "boss": 6, 69 | "influence": 2, 70 | "sorting": 7, 71 | "zone": "finance office" 72 | }, 73 | { 74 | "id": 9, 75 | "name": "Laura Stevens", 76 | "role": "Junior Financial Analyst", 77 | "boss": 8, 78 | "influence": 2, 79 | "sorting": 8, 80 | "zone": "finance office" 81 | }, 82 | { 83 | "id": 10, 84 | "name": "Trent Watts", 85 | "role": "Financial Analysis Intern", 86 | "boss": 9, 87 | "influence": 1, 88 | "sorting": 9, 89 | "zone": "finance office" 90 | }, 91 | { 92 | "id": 11, 93 | "name": "Roger McNamara", 94 | "role": "Chief of Sales", 95 | "boss": 1, 96 | "influence": 5, 97 | "sorting": 10, 98 | "zone": "sales office" 99 | }, 100 | { 101 | "id": 12, 102 | "name": "Colleen Wiggins", 103 | "role": "Senior Account Executive", 104 | "boss": 11, 105 | "influence": 1, 106 | "sorting": 11, 107 | "zone": "sales office" 108 | }, 109 | { 110 | "id": 13, 111 | "name": "Andre Zolovsky", 112 | "role": "Junior Account Executive", 113 | "boss": 11, 114 | "influence": 1, 115 | "sorting": 12, 116 | "zone": "sales office" 117 | }, 118 | { 119 | "id": 14, 120 | "name": "Andy Jones", 121 | "role": "Corporate Sales Rep", 122 | "boss": 11, 123 | "influence": 1, 124 | "sorting": 13, 125 | "zone": "sales office" 126 | }, 127 | { 128 | "id": 15, 129 | "name": "Randy Jones", 130 | "role": "Corporate Sales Rep", 131 | "boss": 11, 132 | "influence": 1, 133 | "sorting": 14, 134 | "zone": "sales office" 135 | }, 136 | { 137 | "id": 16, 138 | "name": "Ida Shivers", 139 | "role": "Director of Human Resources", 140 | "boss": 1, 141 | "influence": 4, 142 | "sorting": 15, 143 | "zone": "hr office" 144 | }, 145 | { 146 | "id": 17, 147 | "name": "John Grimmond", 148 | "role": "Senior Human Resources Manager", 149 | "boss": 16, 150 | "influence": 1, 151 | "sorting": 16, 152 | "zone": "hr office" 153 | }, 154 | { 155 | "id": 18, 156 | "name": "Rhoda Malvolio", 157 | "role": "Junior Human Resources Manager", 158 | "boss": 16, 159 | "influence": 1, 160 | "sorting": 17, 161 | "zone": "hr office" 162 | }, 163 | { 164 | "id": 19, 165 | "name": "Donny Sauerman", 166 | "role": "Junior Human Resources Manager", 167 | "boss": 16, 168 | "influence": 1, 169 | "sorting": 18, 170 | "zone": "hr office" 171 | }, 172 | { 173 | "id": 20, 174 | "name": "Gary Malvolio", 175 | "role": "CLO", 176 | "boss": 1, 177 | "influence": 4, 178 | "sorting": 19, 179 | "zone": "legal office" 180 | }, 181 | { 182 | "id": 21, 183 | "name": "Shaun Dimon", 184 | "role": "Senior Advisor, Corporate Law", 185 | "boss": 20, 186 | "influence": 1, 187 | "sorting": 20, 188 | "zone": "legal office" 189 | }, 190 | { 191 | "id": 22, 192 | "name": "Alton Duum", 193 | "role": "Advisor, Corporate Law", 194 | "boss": 20, 195 | "influence": 1, 196 | "sorting": 21, 197 | "zone": "legal office" 198 | }, 199 | { 200 | "id": 23, 201 | "name": "Grant Lovebad", 202 | "role": "Senior Litigator", 203 | "boss": 20, 204 | "influence": 3, 205 | "sorting": 22, 206 | "zone": "legal office" 207 | }, 208 | { 209 | "id": 24, 210 | "name": "Stacy Hinder", 211 | "role": "Litigation Assistant", 212 | "boss": 23, 213 | "influence": 1, 214 | "sorting": 23, 215 | "zone": "legal office" 216 | }, 217 | { 218 | "id": 25, 219 | "name": "Andrew Payne", 220 | "role": "Litigation Assistant", 221 | "boss": 23, 222 | "influence": 3, 223 | "sorting": 24, 224 | "zone": "legal office" 225 | }, 226 | { 227 | "id": 26, 228 | "name": "Morton Baffler", 229 | "role": "Legal Intern", 230 | "boss": 25, 231 | "influence": 1, 232 | "sorting": 25, 233 | "zone": "legal office" 234 | }, 235 | { 236 | "id": 27, 237 | "name": "Vikesh Harm", 238 | "role": "Legal Intern", 239 | "boss": 25, 240 | "influence": 1, 241 | "sorting": 26, 242 | "zone": "legal office" 243 | } 244 | ], 245 | "links": [ 246 | { 247 | "source": 2, 248 | "target": 1, 249 | "weight": 3, 250 | "type": "SUPERVISORY", 251 | "overlap": 0 252 | }, 253 | { 254 | "source": 3, 255 | "target": 2, 256 | "weight": 3, 257 | "type": "SUPERVISORY", 258 | "overlap": 2 259 | }, 260 | { 261 | "source": 4, 262 | "target": 2, 263 | "weight": 3, 264 | "type": "SUPERVISORY", 265 | "overlap": 2 266 | }, 267 | { 268 | "source": 5, 269 | "target": 3, 270 | "weight": 3, 271 | "type": "SUPERVISORY", 272 | "overlap": 2 273 | }, 274 | { 275 | "source": 6, 276 | "target": 1, 277 | "weight": 3, 278 | "type": "SUPERVISORY", 279 | "overlap": 0 280 | }, 281 | { 282 | "source": 7, 283 | "target": 6, 284 | "weight": 3, 285 | "type": "SUPERVISORY", 286 | "overlap": 2 287 | }, 288 | { 289 | "source": 8, 290 | "target": 6, 291 | "weight": 3, 292 | "type": "SUPERVISORY", 293 | "overlap": 2 294 | }, 295 | { 296 | "source": 9, 297 | "target": 8, 298 | "weight": 3, 299 | "type": "SUPERVISORY", 300 | "overlap": 2 301 | }, 302 | { 303 | "source": 10, 304 | "target": 9, 305 | "weight": 3, 306 | "type": "SUPERVISORY", 307 | "overlap": 2 308 | }, 309 | { 310 | "source": 11, 311 | "target": 1, 312 | "weight": 3, 313 | "type": "SUPERVISORY", 314 | "overlap": 0 315 | }, 316 | { 317 | "source": 12, 318 | "target": 11, 319 | "weight": 3, 320 | "type": "SUPERVISORY", 321 | "overlap": 2 322 | }, 323 | { 324 | "source": 13, 325 | "target": 11, 326 | "weight": 3, 327 | "type": "SUPERVISORY", 328 | "overlap": 2 329 | }, 330 | { 331 | "source": 14, 332 | "target": 11, 333 | "weight": 3, 334 | "type": "SUPERVISORY", 335 | "overlap": 2 336 | }, 337 | { 338 | "source": 15, 339 | "target": 11, 340 | "weight": 3, 341 | "type": "SUPERVISORY", 342 | "overlap": 2 343 | }, 344 | { 345 | "source": 16, 346 | "target": 1, 347 | "weight": 3, 348 | "type": "SUPERVISORY", 349 | "overlap": 0 350 | }, 351 | { 352 | "source": 17, 353 | "target": 16, 354 | "weight": 3, 355 | "type": "SUPERVISORY", 356 | "overlap": 2 357 | }, 358 | { 359 | "source": 18, 360 | "target": 16, 361 | "weight": 3, 362 | "type": "SUPERVISORY", 363 | "overlap": 2 364 | }, 365 | { 366 | "source": 19, 367 | "target": 16, 368 | "weight": 3, 369 | "type": "SUPERVISORY", 370 | "overlap": 2 371 | }, 372 | { 373 | "source": 20, 374 | "target": 1, 375 | "weight": 3, 376 | "type": "SUPERVISORY", 377 | "overlap": 0 378 | }, 379 | { 380 | "source": 21, 381 | "target": 20, 382 | "weight": 3, 383 | "type": "SUPERVISORY", 384 | "overlap": 2 385 | }, 386 | { 387 | "source": 22, 388 | "target": 20, 389 | "weight": 3, 390 | "type": "SUPERVISORY", 391 | "overlap": 2 392 | }, 393 | { 394 | "source": 23, 395 | "target": 20, 396 | "weight": 3, 397 | "type": "SUPERVISORY", 398 | "overlap": 2 399 | }, 400 | { 401 | "source": 24, 402 | "target": 23, 403 | "weight": 3, 404 | "type": "SUPERVISORY", 405 | "overlap": 2 406 | }, 407 | { 408 | "source": 25, 409 | "target": 23, 410 | "weight": 3, 411 | "type": "SUPERVISORY", 412 | "overlap": 2 413 | }, 414 | { 415 | "source": 26, 416 | "target": 25, 417 | "weight": 3, 418 | "type": "SUPERVISORY", 419 | "overlap": 2 420 | }, 421 | { 422 | "source": 27, 423 | "target": 25, 424 | "weight": 3, 425 | "type": "SUPERVISORY", 426 | "overlap": 2 427 | }, 428 | { 429 | "id": "link--0", 430 | "source": 2, 431 | "target": 3, 432 | "weight": 0.5, 433 | "type": "COWORKER", 434 | "overlap": 0 435 | }, 436 | { 437 | "id": "link--1", 438 | "source": 2, 439 | "target": 4, 440 | "weight": 0.5, 441 | "type": "COWORKER", 442 | "overlap": 0 443 | }, 444 | { 445 | "id": "link--2", 446 | "source": 2, 447 | "target": 5, 448 | "weight": 0.5, 449 | "type": "COWORKER", 450 | "overlap": 0 451 | }, 452 | { 453 | "id": "link--4", 454 | "source": 3, 455 | "target": 4, 456 | "weight": 0.5, 457 | "type": "COWORKER", 458 | "overlap": 0 459 | }, 460 | { 461 | "id": "link--5", 462 | "source": 3, 463 | "target": 5, 464 | "weight": 0.5, 465 | "type": "COWORKER", 466 | "overlap": 0 467 | }, 468 | { 469 | "id": "link--8", 470 | "source": 4, 471 | "target": 5, 472 | "weight": 0.5, 473 | "type": "COWORKER", 474 | "overlap": 0 475 | }, 476 | { 477 | "id": "link--12", 478 | "source": 6, 479 | "target": 7, 480 | "weight": 0.5, 481 | "type": "COWORKER", 482 | "overlap": 0 483 | }, 484 | { 485 | "id": "link--13", 486 | "source": 6, 487 | "target": 8, 488 | "weight": 0.5, 489 | "type": "COWORKER", 490 | "overlap": 0 491 | }, 492 | { 493 | "id": "link--14", 494 | "source": 6, 495 | "target": 9, 496 | "weight": 0.5, 497 | "type": "COWORKER", 498 | "overlap": 0 499 | }, 500 | { 501 | "id": "link--15", 502 | "source": 6, 503 | "target": 10, 504 | "weight": 0.5, 505 | "type": "COWORKER", 506 | "overlap": 0 507 | }, 508 | { 509 | "id": "link--17", 510 | "source": 7, 511 | "target": 8, 512 | "weight": 0.5, 513 | "type": "COWORKER", 514 | "overlap": 0 515 | }, 516 | { 517 | "id": "link--18", 518 | "source": 7, 519 | "target": 9, 520 | "weight": 0.5, 521 | "type": "COWORKER", 522 | "overlap": 0 523 | }, 524 | { 525 | "id": "link--19", 526 | "source": 7, 527 | "target": 10, 528 | "weight": 0.5, 529 | "type": "COWORKER", 530 | "overlap": 0 531 | }, 532 | { 533 | "id": "link--22", 534 | "source": 8, 535 | "target": 9, 536 | "weight": 0.5, 537 | "type": "COWORKER", 538 | "overlap": 0 539 | }, 540 | { 541 | "id": "link--23", 542 | "source": 8, 543 | "target": 10, 544 | "weight": 0.5, 545 | "type": "COWORKER", 546 | "overlap": 2 547 | }, 548 | { 549 | "id": "link--27", 550 | "source": 9, 551 | "target": 10, 552 | "weight": 0.5, 553 | "type": "COWORKER", 554 | "overlap": 0 555 | }, 556 | { 557 | "id": "link--32", 558 | "source": 11, 559 | "target": 12, 560 | "weight": 0.5, 561 | "type": "COWORKER", 562 | "overlap": 0 563 | }, 564 | { 565 | "id": "link--33", 566 | "source": 11, 567 | "target": 13, 568 | "weight": 0.5, 569 | "type": "COWORKER", 570 | "overlap": 0 571 | }, 572 | { 573 | "id": "link--34", 574 | "source": 11, 575 | "target": 14, 576 | "weight": 0.5, 577 | "type": "COWORKER", 578 | "overlap": 0 579 | }, 580 | { 581 | "id": "link--35", 582 | "source": 11, 583 | "target": 15, 584 | "weight": 0.5, 585 | "type": "COWORKER", 586 | "overlap": 0 587 | }, 588 | { 589 | "id": "link--37", 590 | "source": 12, 591 | "target": 13, 592 | "weight": 0.5, 593 | "type": "COWORKER", 594 | "overlap": 0 595 | }, 596 | { 597 | "id": "link--38", 598 | "source": 12, 599 | "target": 14, 600 | "weight": 0.5, 601 | "type": "COWORKER", 602 | "overlap": 0 603 | }, 604 | { 605 | "id": "link--39", 606 | "source": 12, 607 | "target": 15, 608 | "weight": 0.5, 609 | "type": "COWORKER", 610 | "overlap": 0 611 | }, 612 | { 613 | "id": "link--42", 614 | "source": 13, 615 | "target": 14, 616 | "weight": 0.5, 617 | "type": "COWORKER", 618 | "overlap": 0 619 | }, 620 | { 621 | "id": "link--43", 622 | "source": 13, 623 | "target": 15, 624 | "weight": 0.5, 625 | "type": "COWORKER", 626 | "overlap": 0 627 | }, 628 | { 629 | "id": "link--47", 630 | "source": 14, 631 | "target": 15, 632 | "weight": 0.5, 633 | "type": "COWORKER", 634 | "overlap": 0 635 | }, 636 | { 637 | "id": "link--52", 638 | "source": 16, 639 | "target": 17, 640 | "weight": 0.5, 641 | "type": "COWORKER", 642 | "overlap": 0 643 | }, 644 | { 645 | "id": "link--53", 646 | "source": 16, 647 | "target": 18, 648 | "weight": 0.5, 649 | "type": "COWORKER", 650 | "overlap": 0 651 | }, 652 | { 653 | "id": "link--54", 654 | "source": 16, 655 | "target": 19, 656 | "weight": 0.5, 657 | "type": "COWORKER", 658 | "overlap": 0 659 | }, 660 | { 661 | "id": "link--56", 662 | "source": 17, 663 | "target": 18, 664 | "weight": 0.5, 665 | "type": "COWORKER", 666 | "overlap": 0 667 | }, 668 | { 669 | "id": "link--57", 670 | "source": 17, 671 | "target": 19, 672 | "weight": 0.5, 673 | "type": "COWORKER", 674 | "overlap": 0 675 | }, 676 | { 677 | "id": "link--60", 678 | "source": 18, 679 | "target": 19, 680 | "weight": 0.5, 681 | "type": "COWORKER", 682 | "overlap": 0 683 | }, 684 | { 685 | "id": "link--64", 686 | "source": 20, 687 | "target": 21, 688 | "weight": 0.5, 689 | "type": "COWORKER", 690 | "overlap": 0 691 | }, 692 | { 693 | "id": "link--65", 694 | "source": 20, 695 | "target": 22, 696 | "weight": 0.5, 697 | "type": "COWORKER", 698 | "overlap": 0 699 | }, 700 | { 701 | "id": "link--66", 702 | "source": 20, 703 | "target": 23, 704 | "weight": 0.5, 705 | "type": "COWORKER", 706 | "overlap": 0 707 | }, 708 | { 709 | "id": "link--67", 710 | "source": 20, 711 | "target": 24, 712 | "weight": 0.5, 713 | "type": "COWORKER", 714 | "overlap": 0 715 | }, 716 | { 717 | "id": "link--68", 718 | "source": 20, 719 | "target": 25, 720 | "weight": 0.5, 721 | "type": "COWORKER", 722 | "overlap": 0 723 | }, 724 | { 725 | "id": "link--69", 726 | "source": 20, 727 | "target": 26, 728 | "weight": 0.5, 729 | "type": "COWORKER", 730 | "overlap": 0 731 | }, 732 | { 733 | "id": "link--70", 734 | "source": 20, 735 | "target": 27, 736 | "weight": 0.5, 737 | "type": "COWORKER", 738 | "overlap": 0 739 | }, 740 | { 741 | "id": "link--72", 742 | "source": 21, 743 | "target": 22, 744 | "weight": 0.5, 745 | "type": "COWORKER", 746 | "overlap": 0 747 | }, 748 | { 749 | "id": "link--73", 750 | "source": 21, 751 | "target": 23, 752 | "weight": 0.5, 753 | "type": "COWORKER", 754 | "overlap": 0 755 | }, 756 | { 757 | "id": "link--74", 758 | "source": 21, 759 | "target": 24, 760 | "weight": 0.5, 761 | "type": "COWORKER", 762 | "overlap": 0 763 | }, 764 | { 765 | "id": "link--75", 766 | "source": 21, 767 | "target": 25, 768 | "weight": 0.5, 769 | "type": "COWORKER", 770 | "overlap": 0 771 | }, 772 | { 773 | "id": "link--76", 774 | "source": 21, 775 | "target": 26, 776 | "weight": 0.5, 777 | "type": "COWORKER", 778 | "overlap": 0 779 | }, 780 | { 781 | "id": "link--77", 782 | "source": 21, 783 | "target": 27, 784 | "weight": 0.5, 785 | "type": "COWORKER", 786 | "overlap": 0 787 | }, 788 | { 789 | "id": "link--80", 790 | "source": 22, 791 | "target": 23, 792 | "weight": 0.5, 793 | "type": "COWORKER", 794 | "overlap": 0 795 | }, 796 | { 797 | "id": "link--81", 798 | "source": 22, 799 | "target": 24, 800 | "weight": 0.5, 801 | "type": "COWORKER", 802 | "overlap": 0 803 | }, 804 | { 805 | "id": "link--82", 806 | "source": 22, 807 | "target": 25, 808 | "weight": 0.5, 809 | "type": "COWORKER", 810 | "overlap": 0 811 | }, 812 | { 813 | "id": "link--83", 814 | "source": 22, 815 | "target": 26, 816 | "weight": 0.5, 817 | "type": "COWORKER", 818 | "overlap": 0 819 | }, 820 | { 821 | "id": "link--84", 822 | "source": 22, 823 | "target": 27, 824 | "weight": 0.5, 825 | "type": "COWORKER", 826 | "overlap": 0 827 | }, 828 | { 829 | "id": "link--88", 830 | "source": 23, 831 | "target": 24, 832 | "weight": 0.5, 833 | "type": "COWORKER", 834 | "overlap": 0 835 | }, 836 | { 837 | "id": "link--89", 838 | "source": 23, 839 | "target": 25, 840 | "weight": 0.5, 841 | "type": "COWORKER", 842 | "overlap": 0 843 | }, 844 | { 845 | "id": "link--90", 846 | "source": 23, 847 | "target": 26, 848 | "weight": 0.5, 849 | "type": "COWORKER", 850 | "overlap": 0 851 | }, 852 | { 853 | "id": "link--91", 854 | "source": 23, 855 | "target": 27, 856 | "weight": 0.5, 857 | "type": "COWORKER", 858 | "overlap": 0 859 | }, 860 | { 861 | "id": "link--96", 862 | "source": 24, 863 | "target": 25, 864 | "weight": 0.5, 865 | "type": "COWORKER", 866 | "overlap": 0 867 | }, 868 | { 869 | "id": "link--97", 870 | "source": 24, 871 | "target": 26, 872 | "weight": 0.5, 873 | "type": "COWORKER", 874 | "overlap": 0 875 | }, 876 | { 877 | "id": "link--98", 878 | "source": 24, 879 | "target": 27, 880 | "weight": 0.5, 881 | "type": "COWORKER", 882 | "overlap": 0 883 | }, 884 | { 885 | "id": "link--104", 886 | "source": 25, 887 | "target": 26, 888 | "weight": 0.5, 889 | "type": "COWORKER", 890 | "overlap": 0 891 | }, 892 | { 893 | "id": "link--105", 894 | "source": 25, 895 | "target": 27, 896 | "weight": 0.5, 897 | "type": "COWORKER", 898 | "overlap": 0 899 | }, 900 | { 901 | "id": "link--112", 902 | "source": 26, 903 | "target": 27, 904 | "weight": 0.5, 905 | "type": "COWORKER", 906 | "overlap": 0 907 | }, 908 | { 909 | "source": 8, 910 | "target": 10, 911 | "weight": 0.2, 912 | "type": "COMMITTEE", 913 | "overlap": 0 914 | }, 915 | { 916 | "source": 8, 917 | "target": 12, 918 | "weight": 0.2, 919 | "type": "COMMITTEE", 920 | "overlap": 0 921 | }, 922 | { 923 | "source": 10, 924 | "target": 12, 925 | "weight": 0.2, 926 | "type": "COMMITTEE", 927 | "overlap": 0 928 | }, 929 | { 930 | "source": 4, 931 | "target": 15, 932 | "weight": 0.2, 933 | "type": "COMMITTEE", 934 | "overlap": 0 935 | }, 936 | { 937 | "source": 4, 938 | "target": 23, 939 | "weight": 0.2, 940 | "type": "COMMITTEE", 941 | "overlap": 0 942 | }, 943 | { 944 | "source": 4, 945 | "target": 6, 946 | "weight": 0.2, 947 | "type": "COMMITTEE", 948 | "overlap": 0 949 | }, 950 | { 951 | "source": 15, 952 | "target": 23, 953 | "weight": 0.2, 954 | "type": "COMMITTEE", 955 | "overlap": 0 956 | }, 957 | { 958 | "source": 15, 959 | "target": 6, 960 | "weight": 0.2, 961 | "type": "COMMITTEE", 962 | "overlap": 0 963 | }, 964 | { 965 | "source": 23, 966 | "target": 6, 967 | "weight": 0.2, 968 | "type": "COMMITTEE", 969 | "overlap": 0 970 | }, 971 | { 972 | "source": 16, 973 | "target": 11, 974 | "weight": 0.2, 975 | "type": "COMMITTEE", 976 | "overlap": 0 977 | }, 978 | { 979 | "source": 16, 980 | "target": 3, 981 | "weight": 0.2, 982 | "type": "COMMITTEE", 983 | "overlap": 0 984 | }, 985 | { 986 | "source": 16, 987 | "target": 24, 988 | "weight": 0.2, 989 | "type": "COMMITTEE", 990 | "overlap": 0 991 | }, 992 | { 993 | "source": 11, 994 | "target": 3, 995 | "weight": 0.2, 996 | "type": "COMMITTEE", 997 | "overlap": 0 998 | }, 999 | { 1000 | "source": 11, 1001 | "target": 24, 1002 | "weight": 0.2, 1003 | "type": "COMMITTEE", 1004 | "overlap": 0 1005 | }, 1006 | { 1007 | "source": 3, 1008 | "target": 24, 1009 | "weight": 0.2, 1010 | "type": "COMMITTEE", 1011 | "overlap": 0 1012 | } 1013 | ] 1014 | } -------------------------------------------------------------------------------- /data/org.yaml: -------------------------------------------------------------------------------- 1 | # Various data regarding the people who work at a particular company. Can be displayed as a force directed graph. 2 | 3 | personnel: 4 | - id: 1 5 | name: James Dawkins 6 | role: CEO 7 | 8 | - id: 2 9 | name: Teresa Jamison 10 | role: CTO 11 | boss: 1 12 | 13 | - id: 3 14 | name: Gary Jones 15 | role: Lead Developer 16 | boss: 2 17 | 18 | - id: 4 19 | name: Corey Smith 20 | role: Junior Developer 21 | boss: 2 22 | 23 | - id: 5 24 | name: Amanda Jameson 25 | role: Development Intern 26 | boss: 3 27 | 28 | - id: 6 29 | name: Kent Wu 30 | role: CFO 31 | boss: 1 32 | 33 | - id: 7 34 | name: James Tang 35 | role: Treasurer 36 | boss: 6 37 | 38 | - id: 8 39 | name: Mary Simmons 40 | role: Chief Financial Analyst 41 | boss: 6 42 | 43 | - id: 9 44 | name: Laura Stevens 45 | role: Junior Financial Analyst 46 | boss: 8 47 | 48 | - id: 10 49 | name: Trent Watts 50 | role: Financial Analysis Intern 51 | boss: 9 52 | 53 | - id: 11 54 | name: Roger McNamara 55 | role: Chief of Sales 56 | boss: 1 57 | 58 | - id: 12 59 | name: Colleen Wiggins 60 | role: Senior Account Executive 61 | boss: 11 62 | 63 | - id: 13 64 | name: Andre Zolovsky 65 | role: Junior Account Executive 66 | boss: 11 67 | 68 | - id: 14 69 | name: Andy Jones 70 | role: Corporate Sales Rep 71 | boss: 11 72 | 73 | - id: 15 74 | name: Randy Jones 75 | role: Corporate Sales Rep 76 | boss: 11 77 | 78 | - id: 16 79 | name: Ida Shivers 80 | role: Director of Human Resources 81 | boss: 1 82 | 83 | - id: 17 84 | name: John Grimmond 85 | role: Senior Human Resources Manager 86 | boss: 16 87 | 88 | - id: 18 89 | name: Rhoda Malvolio 90 | role: Junior Human Resources Manager 91 | boss: 16 92 | 93 | - id: 19 94 | name: Donny Sauerman 95 | role: Junior Human Resources Manager 96 | boss: 16 97 | 98 | - id: 20 99 | name: Gary Malvolio 100 | role: CLO 101 | boss: 1 102 | 103 | - id: 21 104 | name: Shaun Dimon 105 | role: Senior Advisor, Corporate Law 106 | boss: 20 107 | 108 | - id: 22 109 | name: Alton Duum 110 | role: Advisor, Corporate Law 111 | boss: 20 112 | 113 | - id: 23 114 | name: Grant Lovebad 115 | role: Senior Litigator 116 | boss: 20 117 | 118 | - id: 24 119 | name: Stacy Hinder 120 | role: Litigation Assistant 121 | boss: 23 122 | 123 | - id: 25 124 | name: Andrew Payne 125 | role: Litigation Assistant 126 | boss: 23 127 | 128 | - id: 26 129 | name: Morton Baffler 130 | role: Legal Intern 131 | boss: 25 132 | 133 | - id: 27 134 | name: Vikesh Harm 135 | role: Legal Intern 136 | boss: 25 137 | 138 | 139 | offices: 140 | tech office: 141 | - 2 142 | - 3 143 | - 4 144 | - 5 145 | 146 | finance office: 147 | - 6 148 | - 7 149 | - 8 150 | - 9 151 | - 10 152 | 153 | sales office: 154 | - 11 155 | - 12 156 | - 13 157 | - 14 158 | - 15 159 | 160 | hr office: 161 | - 16 162 | - 17 163 | - 18 164 | - 19 165 | 166 | legal office: 167 | - 20 168 | - 21 169 | - 22 170 | - 23 171 | - 24 172 | - 25 173 | - 26 174 | - 27 175 | 176 | committees: 177 | compliance: 178 | - 8 179 | - 10 180 | - 12 181 | 182 | birthday: 183 | - 4 184 | - 15 185 | - 23 186 | - 6 187 | 188 | community: 189 | - 16 190 | - 11 191 | - 3 192 | - 24 -------------------------------------------------------------------------------- /data/simple-data.js: -------------------------------------------------------------------------------- 1 | export const data = { 2 | nodes:[{ 3 | id:1, 4 | influence: 1 5 | },{ 6 | id: 2, 7 | influence: 2 8 | }], 9 | links:[{ 10 | source: 1, 11 | target: 2, 12 | weight: 3 13 | }] 14 | }; -------------------------------------------------------------------------------- /image/img-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-0.png -------------------------------------------------------------------------------- /image/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-1.png -------------------------------------------------------------------------------- /image/img-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-10.png -------------------------------------------------------------------------------- /image/img-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-11.png -------------------------------------------------------------------------------- /image/img-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-12.png -------------------------------------------------------------------------------- /image/img-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-13.png -------------------------------------------------------------------------------- /image/img-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-14.png -------------------------------------------------------------------------------- /image/img-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-15.png -------------------------------------------------------------------------------- /image/img-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-16.png -------------------------------------------------------------------------------- /image/img-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-17.png -------------------------------------------------------------------------------- /image/img-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-18.png -------------------------------------------------------------------------------- /image/img-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-19.png -------------------------------------------------------------------------------- /image/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-2.png -------------------------------------------------------------------------------- /image/img-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-20.png -------------------------------------------------------------------------------- /image/img-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-21.png -------------------------------------------------------------------------------- /image/img-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-22.png -------------------------------------------------------------------------------- /image/img-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-23.png -------------------------------------------------------------------------------- /image/img-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-24.png -------------------------------------------------------------------------------- /image/img-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-25.png -------------------------------------------------------------------------------- /image/img-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-26.png -------------------------------------------------------------------------------- /image/img-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-27.png -------------------------------------------------------------------------------- /image/img-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-28.png -------------------------------------------------------------------------------- /image/img-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-29.png -------------------------------------------------------------------------------- /image/img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-3.png -------------------------------------------------------------------------------- /image/img-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-30.png -------------------------------------------------------------------------------- /image/img-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-4.png -------------------------------------------------------------------------------- /image/img-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-5.png -------------------------------------------------------------------------------- /image/img-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-6.png -------------------------------------------------------------------------------- /image/img-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-7.png -------------------------------------------------------------------------------- /image/img-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-8.png -------------------------------------------------------------------------------- /image/img-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielstern/force-graph-example/a89b334d4eda70baeb7d8271830325f213e7afa7/image/img-9.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | 22 | 23 |
24 |

25 | D3 Force-Directed Graph 26 |

27 |

28 | Heirarchy, Major Organization 29 |

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Application root. Imports animate.js, which imports all relevant files. 3 | */ 4 | import './src/animate'; 5 | -------------------------------------------------------------------------------- /notes.yaml: -------------------------------------------------------------------------------- 1 | example: 2 | - https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03 3 | 4 | homework: 5 | - add a static legend mapping color to the appropriate department -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3-force-graph", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "test": "eslint src/*.js", 9 | "build": "webpack", 10 | "json-output": "yaml2json data/org.yaml" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "d3": "^5.9.2", 17 | "d3-force": "^2.0.1" 18 | }, 19 | "devDependencies": { 20 | "babel-eslint": "^10.0.1", 21 | "chance": "^1.0.18", 22 | "eslint": "^5.16.0", 23 | "js-yaml-loader": "^1.2.0", 24 | "pngjs": "^3.4.0", 25 | "require-yml": "^1.3.2", 26 | "webpack": "^4.30.0", 27 | "webpack-cli": "^3.3.1", 28 | "webpack-dev-server": "^3.3.1", 29 | "yaml-loader": "^0.5.0", 30 | "yamljs": "^0.3.0" 31 | }, 32 | "eslintConfig": { 33 | "parser": "babel-eslint", 34 | "extends": "eslint:all", 35 | "rules": { 36 | "linebreak-style": "off", 37 | "id-length": "off", 38 | "dot-location": "off", 39 | "no-magic-numbers": "off", 40 | "one-var": "off", 41 | "array-element-newline": "off", 42 | "no-warning-comments": "off", 43 | "eol-last": "off", 44 | "no-mixed-operators": "off", 45 | "function-paren-newline": "off" 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/animate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Since simulation.on("tick") can only be called once, 3 | * it is convenient to localize all the animation updates in one file like so. 4 | */ 5 | 6 | import {animate as animateLink} from "./link"; 7 | import {animate as animateLabel} from "./label"; 8 | import {animate as animateImage} from "./image"; 9 | import {animate as animateHovercard} from "./hovercard"; 10 | import {animate as animateEllipseNode} from "./node"; 11 | import {simulation} from "./simulation"; 12 | 13 | simulation.on("tick", () => { 14 | 15 | /** 16 | * Calls all the animation subroutines defined by any number of graph elements. 17 | */ 18 | 19 | animateEllipseNode(); 20 | animateLink(); 21 | animateHovercard(); 22 | animateLabel(); 23 | animateImage(); 24 | 25 | }); -------------------------------------------------------------------------------- /src/drag.js: -------------------------------------------------------------------------------- 1 | import * as d3 from "d3"; 2 | 3 | /** 4 | * Defines standard subroutines for when a node is dragged. 5 | * Basically, if a node is dragged, keep moving it to where the mouse is going. 6 | */ 7 | 8 | export const drag = (simulation) => { 9 | 10 | const dragstarted = (d) => { 11 | 12 | if (!d3.event.active) { 13 | 14 | simulation.alphaTarget(0.3).restart(); 15 | 16 | } 17 | 18 | d.fx = d.x; 19 | d.fy = d.y; 20 | 21 | }; 22 | 23 | const dragged = (d) => { 24 | 25 | d.fx = d3.event.x; 26 | d.fy = d3.event.y; 27 | 28 | }; 29 | 30 | const dragended = (d) => { 31 | 32 | if (!d3.event.active) { 33 | 34 | simulation.alphaTarget(0); 35 | 36 | } 37 | 38 | d.fx = null; 39 | d.fy = null; 40 | 41 | }; 42 | 43 | return d3.drag() 44 | .on("start", dragstarted) 45 | .on("drag", dragged) 46 | .on("end", dragended); 47 | 48 | }; 49 | -------------------------------------------------------------------------------- /src/hovercard.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Defines independent hovercard component for force directed graph. 3 | * Whenever Node is hovered over, as defined in different file, hovercard is moved to that location and updated with relevant text. 4 | */ 5 | 6 | import * as d3 from "d3"; 7 | import {node} from "./node"; 8 | import {simulation} from "./simulation"; 9 | import {svg} from "../config"; 10 | 11 | let currentTarget = null; 12 | 13 | const card = svg 14 | .append("g") 15 | .attr("pointer-events", "none") 16 | .attr("display", "none"); 17 | 18 | const cardBackground = card.append("rect") 19 | .attr("width", 180) 20 | .attr("height", 45) 21 | .attr("fill", "#eee") 22 | .attr("stroke", "#333") 23 | .attr("rx", 4); 24 | 25 | const cardTextName = card 26 | .append("text") 27 | .attr("transform", "translate(8, 20)"); 28 | 29 | const cardTextPosition = card 30 | .append("text") 31 | .attr("font-size", "10") 32 | .attr("transform", "translate(8, 35)"); 33 | 34 | node.on("mouseover", (datum) => { 35 | /** 36 | * On mouse over any node, draw the tooltip in that place. 37 | */ 38 | 39 | currentTarget = d3.event.target; 40 | card.attr("display", "block"); 41 | 42 | cardTextName.text(datum.name); 43 | cardTextPosition.text(datum.role); 44 | 45 | /** 46 | * Automatically size the card to the widest of: the personnel name, personnel role. 47 | */ 48 | 49 | const nameWidth = cardTextName.node().getBBox().width; 50 | const positionWidth = cardTextPosition.node().getBBox().width; 51 | const cardWidth = Math.max(nameWidth, positionWidth); 52 | 53 | cardBackground.attr("width", cardWidth + 16); 54 | 55 | simulation.alphaTarget(0).restart(); 56 | 57 | }); 58 | 59 | node.on("mouseout", () => { 60 | 61 | /** 62 | * When the mouse is moved off a node, hide the card. 63 | */ 64 | card.attr("display", "none"); 65 | currentTarget = null; 66 | 67 | }); 68 | 69 | export const animate = () => { 70 | 71 | if (currentTarget) { 72 | 73 | /** 74 | * Determine the position of whatever is being hovered over, and if it's a Node, move a hovercard there. 75 | */ 76 | 77 | const dist = currentTarget.r.baseVal.value + 3; 78 | 79 | const xPos = currentTarget.cx.baseVal.value + dist; 80 | const yPos = currentTarget.cy.baseVal.value - dist; 81 | 82 | card.attr("transform", `translate(${xPos}, ${yPos})`); 83 | 84 | } 85 | 86 | }; 87 | 88 | -------------------------------------------------------------------------------- /src/image.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simple force directed graph component which displays a specific image for each Node in the 3 | * place where that Node is arranged by the force directed graph. 4 | */ 5 | import {data, svg} from "../config"; 6 | import {nodeScale} from './node'; 7 | 8 | const {nodes} = data; 9 | 10 | export const imageContainer = 11 | svg 12 | .selectAll("g.imageContainer") 13 | .data(nodes) 14 | .enter() 15 | .append("g"); 16 | 17 | export const image = imageContainer 18 | .append("image") 19 | .attr("height", (d) => nodeScale(d.influence)) 20 | .attr("width", (d) => nodeScale(d.influence)) 21 | .attr("transform", (d) =>`translate(${-nodeScale(d.influence)/2}, ${-nodeScale(d.influence)/2})`) 22 | .attr("href", (d, i) => `image/img-${i}.png`); 23 | 24 | export const animate = () => { 25 | 26 | imageContainer 27 | .attr("transform", (d) => `translate(${d.x}, ${d.y})`); 28 | 29 | }; 30 | -------------------------------------------------------------------------------- /src/label.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Force directed graph component which displays the name associated with any Node at the place 3 | * that the Node is arranged by the force directed graph. 4 | */ 5 | import * as d3 from "d3"; 6 | import {data, svg} from "../config"; 7 | import {nodeScale} from "./node"; 8 | 9 | const {nodes} = data; 10 | 11 | const fontSizeScale = d3.scaleLinear() 12 | .domain([0, d3.max(nodes.map((node) => node.influence))]) 13 | .range([7, 12]); 14 | 15 | const textContainer = svg 16 | .selectAll("g.label") 17 | .data(nodes) 18 | .enter() 19 | .append("g"); 20 | 21 | textContainer 22 | .append("text") 23 | .text((d) => d.name) 24 | .attr("font-size", (d) => fontSizeScale(d.influence)) 25 | .attr("transform", (d) => { 26 | 27 | const scale = nodeScale(d.influence); 28 | const x = scale + 2; 29 | const y = scale + 4; 30 | return `translate(${x}, ${y})`; 31 | 32 | }); 33 | 34 | 35 | export const animate = () => { 36 | 37 | textContainer 38 | .attr("transform", (d) => `translate(${d.x}, ${d.y})`); 39 | 40 | }; -------------------------------------------------------------------------------- /src/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Component of force directed graph that vizualises links between Nodes. 3 | */ 4 | 5 | import * as d3 from "d3"; 6 | import {data, svg} from "../config"; 7 | 8 | /** 9 | * Define a width scale for the lines. Higher weight means thicker links. 10 | */ 11 | const linkWidthScale = d3 12 | .scaleLinear() 13 | .domain([0, d3.max(data.links.map((link) => link.weight))]) 14 | .range([0.5, 1.5]); 15 | 16 | /** 17 | * Define how the dashes will work. Extra light and light weight lines get dashes, anything heavier is solid. 18 | */ 19 | const linkDashScale = d3 20 | .scaleOrdinal() 21 | .domain([0, 2, 3]) 22 | .range(["4 2", "2 2", null]); 23 | 24 | export const link = svg 25 | .selectAll("path.link") 26 | .data(data.links) 27 | .enter() 28 | .append("path") 29 | .attr("stroke", "#999") 30 | .attr("stroke-opacity", 0.6) 31 | .attr("stroke-dasharray", (d) => linkDashScale(d.weight)) 32 | .attr("stroke-width", (d) => linkWidthScale(d.weight)) 33 | .attr("marker-mid", (d) => { 34 | 35 | /** 36 | * Define a marker to indicate what kind of line it is. 37 | * Currently defined: arrow for subordinate / supervisory relationship. 38 | */ 39 | 40 | switch (d.type) { 41 | 42 | case "SUPERVISORY": 43 | return "url(#markerArrow)"; 44 | 45 | default: 46 | return "none"; 47 | 48 | } 49 | 50 | }) 51 | .attr("fill", "none"); 52 | 53 | const lineGenerator = d3.line() 54 | .curve(d3.curveCardinal); 55 | 56 | export const animate = () => { 57 | 58 | link.attr("d", (d) => { 59 | 60 | const mid = [ 61 | (d.source.x + d.target.x) / 2, 62 | (d.source.y + d.target.y) / 2 63 | ]; 64 | 65 | 66 | /** 67 | * If two lines overlap with each other, curve one of the lines. 68 | */ 69 | 70 | if (d.overlap > 0) { 71 | 72 | const index = d.overlap; 73 | 74 | // console.log("Index?", index); 75 | // const index = d.overlap.filter((ol) => ol.weight > d.weight).length; 76 | 77 | const distance = Math.sqrt( 78 | Math.pow(d.target.x - d.source.x, 2) + 79 | Math.pow(d.target.y - d.source.y, 2) 80 | ); 81 | 82 | /** 83 | * The math below finds a point just off the center of the line. 84 | */ 85 | 86 | const slopeX = (d.target.x - d.source.x) / distance; 87 | const slopeY = (d.target.y - d.source.y) / distance; 88 | 89 | const curveSharpness = 3.5 * index; 90 | mid[0] += curveSharpness * slopeY; 91 | mid[1] -= curveSharpness * slopeX; 92 | 93 | } 94 | 95 | return lineGenerator([ 96 | [d.source.x, d.source.y], 97 | mid, 98 | [d.target.x, d.target.y] 99 | ]); 100 | 101 | }); 102 | 103 | }; -------------------------------------------------------------------------------- /src/node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simple component which draws a circle for each node wherever it is arranged by the simulation. 3 | */ 4 | import * as d3 from "d3"; 5 | import {data, svg} from "../config"; 6 | import {drag} from "./drag"; 7 | import {simulation} from "./simulation"; 8 | 9 | const {nodes} = data; 10 | const colorScale = d3.scaleOrdinal(d3.schemeCategory10); 11 | 12 | export const nodeScale = d3.scaleLinear() 13 | .domain([0, d3.max(nodes.map((node) => node.influence))]) 14 | .range([8, 20]); 15 | 16 | export const node = svg 17 | .selectAll("circle") 18 | .data(nodes) 19 | .enter() 20 | .append("circle") 21 | .attr("r", (d) => nodeScale(d.influence)) 22 | .attr("stroke", "#ccc") 23 | .attr("stroke-width", 0.5) 24 | .style("fill", (d) => colorScale(d.zone)); 25 | 26 | export const animate = () => { 27 | 28 | node 29 | .attr("cx", (d) => d.x) 30 | .attr("cy", (d) => d.y); 31 | 32 | }; 33 | 34 | node.call(drag(simulation)); -------------------------------------------------------------------------------- /src/simulation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Defines the simulation, which is what determines where each Node should be arranged. Uses math. 3 | */ 4 | import * as d3 from "d3"; 5 | import {data, height, width} from "../config"; 6 | 7 | const {nodes, links} = data; 8 | 9 | /** 10 | * Gravity determines how strongly the nodes push / pull eachother. 11 | * In effect, the lower the number goes, the more spread out the graph will be. 12 | */ 13 | 14 | const gravity = -100; 15 | 16 | const forceManyBody = d3.forceManyBody() 17 | .strength(gravity); 18 | 19 | const forceLink = d3.forceLink(links) 20 | .id((d) => d.id) 21 | .distance(50); 22 | 23 | export const simulation = d3.forceSimulation(nodes) 24 | .force("link", forceLink) 25 | .force("charge", forceManyBody) 26 | .force("center", d3.forceCenter(width / 2, height / 2)); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | module.exports = { 3 | mode: "development", 4 | entry:"./index.js", 5 | output: { 6 | filename: 'bundle.js' 7 | }, 8 | resolve: { 9 | extensions: ['.js','.json'] 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.yaml$/, 14 | use: 'js-yaml-loader', 15 | }] 16 | } 17 | }; --------------------------------------------------------------------------------