Skip to content

Instantly share code, notes, and snippets.

@dianaow

dianaow/.block

Last active June 12, 2019 12:13
Show Gist options
  • Save dianaow/5b3b2eb80da679dd1f8e32026556d45f to your computer and use it in GitHub Desktop.
Save dianaow/5b3b2eb80da679dd1f8e32026556d45f to your computer and use it in GitHub Desktop.
Download ZIP
D3 V4: Network Visualization
Raw
.block
license: mit
Raw
README.md

Simple network visualized with D3's forces, but with a focus on the aesthetic and data-driven force strength to pull nodes apart for clarity.

Click 'morph' to see how this network will look like using the default simulation parameters.

Open on a new browser page to view in full

Built with blockbuilder.org

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="http://d3js.org/d3.v4.min.js"></script>
<style>
#wrapper {
background-image:
radial-gradient(
circle closest-side,
white,
lightgray
);
text-align: center;
}
.btn {
color: mediumblue;
background: transparent;
border: 2px solid mediumblue;
border-radius: 6px;
padding: 8px 16px;
text-align: center;
display: inline-block;
font-size: 0.8em;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}
.btn:hover {
background-color: mediumblue;
color: white;
}
.btn:focus {
background-color: mediumblue;
color: white;
}
</style>
</head>
<body>
<div id='wrapper'>
<input name="type"
type="button"
class="btn morph"
value="Morph"/>
<div id="chart"></div>
</div>
<script>
var network = function () {
///////////////////////////////////////////////////////////////////////////
///////////////////////////////// Globals /////////////////////////////////
///////////////////////////////////////////////////////////////////////////
var simulation, circle, path, g, pathG, circleG
var canvasDim = { width: screen.width, height: screen.height}
var margin = {top: 0, right: 0, bottom: 0, left: 0}
var width = canvasDim.width - margin.left - margin.right;
var height = canvasDim.height - margin.top - margin.bottom;
var modal = d3.select("#chart")
// set node, link and text colors
var nodeFillColor = 'mediumblue'
var nodeStrokeColor = 'mediumblue'
var linkStrokeColor = 'mediumblue'
// set node, link and text dimenstions
var nodeRadius = 6
var nodeStrokeWidth = 1
var linkStrokeWidth = 0.6
var linkOpacity = 1
var clicked = 1
///////////////////////////////////////////////////////////////////////////
/////////////////////////////////// CORE //////////////////////////////////
///////////////////////////////////////////////////////////////////////////
return {
clear : function () {
modal.select("svg").remove()
},
run : function () {
//////////////////// Set up and initiate containers ///////////////////////
var svg = modal.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
g = svg.append("g")
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
pathG = g.append("g")
.attr("class", "pathG")
circleG = g.append("g")
.attr("class", "circleG")
////////////////////////// Run animation sequence /////////////////////////
getData()
}
}
///////////////////////////////////////////////////////////////////////////
/////////////////////////////// Data Processing ///////////////////////////
///////////////////////////////////////////////////////////////////////////
function getData() {
d3.queue()
.defer(d3.csv, 'nodes_dummy.csv') // there are more nodes than links
.defer(d3.csv, 'links_dummy.csv')
.await(initialize);
}
function initialize(error, entity, edges){
var nodes = entity.map((d,i) => {
return {
id: +d.index,
type: d.type,
root: d.root
}
})
var links = edges.map((d,i) => {
return {
id: i,
source: +d.start_index,
target: +d.end_index,
relationship_distance: +d.relationship_distance
}
})
var links_nested = d3.nest()
.key(function(d) { return d.source; })
.rollup(function(leaves) { return leaves.length; })
.entries(links)
var linkStrengths = [] // create custom link strength scale based on number of connected nodes to each source
links_nested.map(function(d,i) {
linkStrengths.push(d.value)
})
var strengthScale = d3.scaleLinear()
.domain([d3.min(linkStrengths), d3.max(linkStrengths)])
.range([0.25, 0.7])
var nodeRadiusScale = d3.scaleLinear()
.domain([d3.min(linkStrengths), d3.max(linkStrengths)])
.range([nodeRadius, nodeRadius*4])
var opacityScale = d3.scaleLinear()
.domain([1, 3])
.range([1, 0.3])
// Match relationship distance to nodes
nodes.forEach((d,i) => {
var e = links.find(b=>b.source == d.id) || links.find(b=>b.target == d.id)
d.relationship_distance = e ? e.relationship_distance : 0
d.connected = e ? 'yes' : 'no'
})
nodes = nodes.filter(d=>d.connected=='yes') // Match links to nodes (prevent stray nodes not connected to other entities from being rendered)
nodes.forEach((d,i) => {
d.color = nodeFillColor
d.strokeColor = d.score==1 ? 'black' : nodeStrokeColor
d.strokeWidth = d.root=='root' ? nodeStrokeWidth+3 : nodeStrokeWidth
d.opacity = opacityScale(d.relationship_distance)
d.radius = links_nested.find(l=>l.key==d.id) ? nodeRadiusScale(links_nested.find(l=>l.key==d.id).value) : nodeRadius
})
links.forEach((d,i) => {
var conn = links_nested.find(l=>l.key==d.source).value
//d.strength = 0.3
//d.strength = (conn> 1 & conn>4) ? 0.8 : strengthScale(conn)
d.strength = strengthScale(conn)
d.strokeColor = linkStrokeColor
d.strokeWidth = linkStrokeWidth
d.opacity = opacityScale(d.relationship_distance)
})
simulateNetwork(nodes, links)
d3.select('.morph').on("click", function () { clicked==1 ? simulateNetwork(nodes, links) : morph(nodes, links) })
}
///////////////////////////////////////////////////////////////////////////
/////////// Initialize force simulation and set its params ////////////////
///////////////////////////////////////////////////////////////////////////
function simulateNetwork(nodes, links) {
let startTime = +Date.now();
var linkDistance = function(d) { return d.source.radius*3 + d.target.radius*9 }
simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links)
.id(function(d) { return d.id; })
.distance(linkDistance)
.strength(function(d) {return d.strength})
)
.force("charge", d3.forceManyBody())
.force("collide", d3.forceCollide(function(d){ return d.radius * 1.4 }))
.force('center', d3.forceCenter(width/2, height*(2/5)))
//.force("x", d3.forceX(function (d) { return d.x }).strength(0.2))
//.force("y", d3.forceY(function (d) { return d.y }).strength(0.2))
//.force("x", d3.forceX(function (d) { return width/2 }).strength(0.2))
//.force("y", d3.forceY(function (d) { return height/2 }).strength(0.2))
simulateStatic(nodes, links, simulation, startTime)
clicked=2
}
///////////////////////////////////////////////////////////////////////////
//////////////////////////// Graph Network plot ///////////////////////////
///////////////////////////////////////////////////////////////////////////
function simulateStatic(nodes, links, simulation, startTime) {
simulation.stop();
while (simulation.alpha() > simulation.alphaMin()) {
simulation.tick();
}
// The simulation has been completed. Draw the final product and update the timer.
drawNodes(nodes)
if(links){
drawLinks(links)
}
}
//////////////////////// Create node and link elements ////////////////////
function drawNodes(nodes) {
circle = circleG.selectAll('circle').data(nodes, d=>d.id)
circle.exit().remove()
var entered_circles = circle
.enter().append('circle')
.attr('id', function(d) {return d.id})
.attr('r', function(d) {return d.radius})
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr('stroke-width', function(d) {return d.strokeWidth})
.attr('stroke', function(d) {return d.strokeColor})
.attr('stroke-opacity', function(d) { return d.opacity})
.attr('fill-opacity', function(d) { return d.opacity})
.attr('fill', function(d) {return d.color})
circle = circle.merge(entered_circles)
circle.transition().duration(2000).ease(d3.easeQuadOut)
.attr('r', function(d) {return d.radius})
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr('fill-opacity', function(d) { return d.opacity})
.attr('fill', function(d) {return d.color})
}
function drawLinks(links) {
path = pathG.selectAll('line').data(links, d=>d.id)
path.exit().remove()
var entered_path = path
.enter().append('line')
.attr('id', function(d) { return d.source.id.toString() + "-" + d.target.id.toString()})
.attr('stroke-width', function(d) {return d.strokeWidth})
.attr('stroke', function(d) {return d.strokeColor})
.attr('stroke-opacity', function(d) {return d.opacity})
.attr('x1', function(d) {return d.source.x})
.attr('y1', function(d) {return d.source.y})
.attr('x2', function(d) {return d.target.x})
.attr('y2', function(d) {return d.target.y})
path = path.merge(entered_path)
path.transition().duration(2000).ease(d3.easeQuadOut)
.attr('stroke-opacity', function(d) {return d.opacity})
.attr('x1', function(d) {return d.source.x})
.attr('y1', function(d) {return d.source.y})
.attr('x2', function(d) {return d.target.x})
.attr('y2', function(d) {return d.target.y})
}
function morph(nodes, links) {
let startTime = +Date.now();
var simulation1 = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links)
.id(function(d) { return d.id; })
)
.force("charge", d3.forceManyBody())
.force('center', d3.forceCenter(width/2, height*(2/5)))
.force('collision', d3.forceCollide().radius(function(d) { return d.radius }))
simulateStatic(nodes, links, simulation1, startTime)
clicked=1
}
}()
</script>
<script>
network.run()
</script>
</body>
</html>
Raw
nodes_dummy.csv
index type root
0 0 Organization children
1 1 Organization children
2 2 Organization children
3 3 Organization children
4 4 Organization children
5 5 root
6 6 Person children
7 7 Person children
8 8 Person children
9 9 Person children
10 10 Person children
11 11 Person children
12 12 Person children
13 13 Person children
14 14 Person children
15 15 children
16 16 Person children
17 17 Person children
18 18 Person children
19 19 Person children
20 20 Person children
21 21 Person children
22 22 Person children
23 23 Person children
24 24 Person children
25 25 Person children
26 26 Person children
27 27 Person children
28 28 Person children
29 29 Person children
30 30 Person children
31 31 Person children
32 32 Person children
33 33 Person children
34 34 Person children
35 35 Person children
36 36 Person children
37 37 Person children
38 38 Person children
39 39 Person children
40 40 Person children
41 41 Person children
42 42 Person children
43 43 Person children
44 44 Person children
45 45 Person children
46 46 Person children
47 47 Person children
48 48 Person children
49 49 Person children
50 50 Person children
51 51 Person children
52 52 Person children
53 53 Person children
54 54 Person children
55 55 Person children
56 56 Person children
57 57 Person children
58 58 Person children
59 59 Person children
60 60 Person children
61 61 Person children
62 62 Person children
63 63 Person children
64 64 Person children
65 65 Person children
66 66 Person children
67 67 Person children
68 68 Person children
69 69 Person children
70 70 Person children
71 71 Person children
72 72 Person children
73 73 Person children
74 74 Person children
75 75 Person children
76 76 Person children
77 77 Person children
78 78 Person children
79 79 Person children
80 80 Person children
81 81 Person children
82 82 Person children
83 83 Person children
84 84 Organization children
85 85 Organization children
86 86 Organization children
87 87 Organization children
88 88 Organization root
89 89 Organization children
90 90 Organization children
91 91 Organization children
92 92 Organization children
93 93 Organization children
94 94 Organization children
95 95 Organization children
96 96 Organization children
97 97 Organization children
98 98 Organization children
99 99 Organization children
100 100 Organization children
101 101 Organization children
102 102 Organization children
103 103 Organization children
104 104 Organization children
105 105 Organization children
106 106 Organization children
107 107 Organization children
108 108 Organization children
109 109 Organization children
110 110 Organization children
111 111 Organization children
112 112 Organization children
113 113 Organization children
114 114 Organization children
115 115 Organization children
116 116 Organization children
117 117 Organization children
118 118 Organization children
119 119 Organization children
120 120 Organization children
121 121 Organization children
122 122 Organization children
123 123 Organization children
124 124 Organization children
125 125 Organization children
126 126 Organization children
127 127 Person children
128 128 Person children
129 129 Person children
130 130 Person children
131 131 Person children
132 132 Person children
133 133 Person children
134 134 Person children
135 135 Person children
136 136 Person children
137 137 Person children
138 138 Person children
139 139 Person children
140 140 Person children
141 141 Person children
142 142 Person children
143 143 Person children
144 144 Person children
145 145 Person children
146 146 Person children
147 147 Person children
148 148 Person children
149 149 Person children
150 150 Person children
151 151 Person children
152 152 Person children
153 153 Person children
154 154 Person children
155 155 Person children
156 156 Person children
157 157 Person children
158 158 Person children
159 159 Person children
160 160 Person children
161 161 Person children
162 162 Person children
163 163 Person children
164 164 Person children
165 165 Person children
166 166 Person children
167 167 Person children
168 168 Person children
169 169 Person children
170 170 Person children
171 171 Person children
172 172 Person children
173 173 Person children
174 174 Person children
175 175 Person children
176 176 Person children
177 177 Person children
178 178 Person children
179 179 Person children
180 180 Person children
181 181 Person children
182 182 Person children
183 183 Person children
184 184 Person children
185 185 Person children
186 186 Person children
187 187 Person children
188 188 Person children
189 189 Person children
190 190 Person children
191 191 Person children
192 192 Person children
193 193 Person children
194 194 Person children
195 195 Person children
196 196 Person children
197 197 Person children
198 198 Person children
199 199 Person children
200 200 Person children
201 201 Person children
202 202 Person children
203 203 Person children
204 204 Person children
205 205 Person children
206 206 Person children
207 207 Person children
208 208 Person children
209 209 Person children
210 210 Person children
211 211 Person children
212 212 Person children
213 213 Person children
214 214 Person children
215 215 Person children
216 216 Person children
217 217 Person children
218 218 Person children
219 219 Person children
220 220 Person children
221 221 Person children
222 222 Person children
223 223 Person children
224 224 Person children
225 225 Organization root
226 226 Organization children
227 227 Organization children
228 228 Organization children
229 229 Organization children
230 230 Organization children
231 231 Organization children
232 232 Organization children
233 233 Organization children
234 234 Organization children
235 235 Organization children
236 236 Organization children
237 237 Organization children
238 238 Organization children
239 239 Organization children
240 240 Organization children
241 241 Organization children
242 242 Organization children
243 243 Organization children
244 244 Organization children
245 245 Organization children
246 246 Organization children
247 247 Organization children
248 248 Organization children
249 249 Organization children
250 250 Organization children
251 251 Organization children
252 252 Organization children
253 253 Organization children
254 254 Organization children
255 255 Organization children
256 256 Organization children
257 257 Organization children
258 258 Organization children
259 259 Organization children
260 260 Organization children
261 261 Organization children
262 262 Organization children
263 263 Organization children
264 264 Person children
265 265 Organization children
266 266 Organization children
267 267 Organization children
268 268 Organization children
269 269 Organization children
270 270 Organization children
271 271 Organization children
272 272 Organization children
273 273 Organization children
274 274 Organization children
275 275 Organization children
276 276 Organization children
277 277 Organization children
278 278 Organization children
279 279 Organization children
280 280 Organization children
281 281 Organization children
282 282 Organization children
283 283 Organization children
284 284 Organization children
285 285 Organization children
286 286 Organization children
287 287 Organization children
288 288 Organization children
289 289 Organization children
290 290 Organization children
291 291 Organization children
292 292 Organization children
293 293 Organization children
294 294 Organization children
295 295 Organization children
296 296 Organization children
297 297 Organization children
298 298 Organization children
299 299 Organization children
300 300 Organization children
301 301 Organization children
302 302 Organization children
303 303 Organization children
304 304 Organization children
305 305 Organization children
306 306 Organization children
307 307 Organization children
308 308 Organization children
309 309 Organization children
310 310 Organization children
311 311 Organization children
312 312 Organization children
313 313 Organization children
314 314 Organization children
315 315 Organization children
316 316 Organization children
317 317 Organization children
318 318 Organization children
319 319 Organization children
320 320 Organization children
321 321 Organization children
322 322 Organization children
323 323 Organization children
324 324 Organization children
325 325 Organization children
326 326 Organization children
327 327 Organization children
328 328 Organization children
329 329 Organization children
330 330 Organization children
331 331 Organization children
332 332 Organization children
333 333 Organization children
334 334 Organization children
335 335 Organization children
336 336 Organization children
337 337 Organization children
338 338 Organization children
339 339 Organization children
340 340 Organization children
341 341 Organization children
342 342 Organization children
343 343 Organization children
344 344 Organization children
345 345 Organization children
346 346 Organization children
347 347 Organization children
348 348 Organization children
349 349 Organization children
350 350 Organization children
351 351 Organization children
352 352 Organization children
353 353 children
354 354 Person children
355 355 Person children
356 356 Person children
357 357 Person children
358 358 Person children
359 359 Person children
360 360 Person children
361 361 Person children
362 362 Person children
363 363 Person children
364 364 Person children
365 365 Person children
366 366 Person children
367 367 Person children
368 368 Person children
369 369 Person children
370 370 Person children
371 371 Person children
372 372 Person children
373 373 Person children
374 374 Person children
375 375 Person children
376 376 Person children
377 377 Person children
378 378 Person children
379 379 Person children
380 380 Person children
381 381 Person children
382 382 Person children
383 383 Person children
384 384 Person children
385 385 Person children
386 386 Person children
387 387 Person children
388 388 Person children
389 389 Person children
390 390 Person children
391 391 Person children
392 392 Person children
393 393 Person children
394 394 Person children
395 395 Person children
396 396 Person children
397 397 Person children
398 398 Person children
399 399 Person children
400 400 Person children
401 401 Person children
402 402 Person children
403 403 Person children
404 404 Person children
405 405 Person children
406 406 Person children
407 407 Person children
408 408 Person children
409 409 Person children
410 410 Person children
411 411 Person children
412 412 Person children
413 413 Person children
414 414 Person children
415 415 Person children
416 416 Person children
417 417 Person children
418 418 Person children
419 419 Person children
420 420 Person children
421 421 Person children
422 422 Person children
423 423 Person children
424 424 Person children
425 425 Person children
426 426 Person children
427 427 Person children
428 428 Person children
429 429 Organization children
430 430 Organization children
431 431 Organization children
432 432 Organization root
433 433 Organization children
434 434 Organization children
435 435 Organization children
436 436 Organization children
437 437 Organization children
438 438 Organization children
439 439 Organization children
440 440 Organization children
441 441 Organization children
442 442 Organization children
443 443 Organization children
444 444 Organization children
445 445 Organization children
446 446 Organization children
447 447 Organization children
448 448 Organization children
449 449 Organization children
450 450 Organization children
451 451 Organization children
452 452 Organization children
453 453 Organization children
454 454 Organization children
455 455 Organization children
456 456 Organization children
457 457 Organization children
458 458 Organization children
459 459 Organization children
460 460 Organization children
461 461 Organization children
462 462 Organization children
463 463 Organization children
464 464 Organization children
465 465 Organization children
466 466 Organization children
467 467 Organization children
468 468 Organization children
469 469 Organization children
470 470 Organization children
471 471 Organization children
472 472 Organization children
473 473 Organization children
474 474 Organization children
475 475 Organization children
476 476 Organization children
477 477 Organization children
478 478 Organization children
479 479 Organization children
480 480 Organization children
481 481 Organization children
482 482 Organization children
483 483 Organization children
484 484 Person children
485 485 Person children
486 486 Person children
487 487 children
488 488 Person children
489 489 Person children
490 490 Person children
491 491 Person children
492 492 Person children
493 493 children
494 494 Person children
495 495 Person children
496 496 Person children
497 497 Person children
498 498 Person children
499 499 Person children
500 500 Person children
501 501 Person children
502 502 Person children
503 503 Person children
504 504 Person children
505 505 Person children
506 506 Person children
507 507 Person children
508 508 Person children
509 509 Person children
510 510 Person children
511 511 Person children
512 512 Person children
513 513 Person children
514 514 Person children
515 515 Person children
516 516 Person children
517 517 Person children
518 518 Person children
519 519 Person children
520 520 Person children
521 521 Person children
522 522 Person children
523 523 Person children
524 524 Person children
525 525 Person children
526 526 Person children
527 527 Person children
528 528 Person children
529 529 Person children
530 530 Person children
531 531 Person children
532 532 Person children
533 533 Person children
534 534 Person children
535 535 Person children
536 536 Person children
537 537 Person children
538 538 Person children
539 539 Person children
540 540 Person children
541 541 Person children
542 542 Person children
543 543 Person children
544 544 Person children
545 545 Person children
546 546 Person children
547 547 Person children
548 548 Person children
549 549 Person children
550 550 Person children
551 551 Person children
552 552 Person children
553 553 Person children
554 554 Person children
555 555 Person children
556 556 Person children
557 557 Person children
558 558 Person children
559 559 Person children
560 560 Person children
561 561 Person children
562 562 Person children
563 563 Person children
564 564 Person children
565 565 Person children
566 566 Person children
567 567 Person children
568 568 Person children
569 569 Person children
570 570 Person children
571 571 Person children
572 572 Person children
573 573 Person children
574 574 Person children
575 575 Person children
576 576 Person children
577 577 Person children
578 578 Person children
579 579 Person children
580 580 Person children
581 581 Person children
582 582 Person children
583 583 Person children
584 584 Person children
585 585 Person children
586 586 Person children
587 587 Person children
588 588 Person children
589 589 Person children
590 590 Person children
591 591 Person children
592 592 Person children
593 593 Person children
594 594 Person children
595 595 Person children
596 596 Person children
597 597 Person children
598 598 Person children
599 599 Person children
600 600 Person children
601 601 Person children
602 602 Person children
603 603 Person children
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment