538 Twitter Graph, Annotated

a mashup of the 538 twitter network from @xaranke with the Network Annotation with Collision Detection block from @elijah_meeks

Using collision detection with network visualization labels

This demonstrates how to use d3-annotation() with bboxCollide to procedurally place node labels. After using the nodes data to create a network visualization of the Les Miserables play, we filter the nodes to leave out the side characters and pass that array to d3-annotation. We then create a second forceSimulation, this time using the size of the notes as the property in our bounding box collision detection, to move the labels out of each others' way.

d3-annotation by Susie Lu.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

<style>

:root {
      --annotation-color: #e91e56;
    }
     body{
        background-color: white;
     }

svg {
        background-color: white;
        font-family: 'Lato';
        overflow: visible;
     }

line {
       stroke:#e3e3e3;
     }

.editable .annotation-subject, .editable .annotation-textbox {
       cursor: move;
     }

.line {
        fill: none;
        stroke: black;
        stroke-width: 1px;
      }

.annotation path {
        stroke: var(--annotation-color);
        fill: rgba(0,0,0,0);
      }

.annotation path.connector-arrow{
        fill: var(--annotation-color);
      }

.annotation text {
        fill: var(--annotation-color);
      }

.annotation-title {
        font-weight: bold;
      }

.annotation .annotation-subject circle.handle {
        display: none;
      }

.annotation-note-bg {
        fill: rgba(255, 255, 255, 0);
      }

circle.handle {
        stroke-dasharray: 5;
        stroke: grey;
        fill: rgba(255, 255, 255, 0);
        cursor: move;

stroke-opacity: .4;
      }

circle.handle.highlight {
        stroke-opacity: 1;
      }

.annotation.major {
        font-weight: 900;
        font-size: 1em;
      }

.annotation-note-label tspan {
        text-anchor: middle;
      }

</style>
</head>
<body>
<svg width=960 height=500></svg>
<script src='https://d3js.org/d3.v4.js'></script>
<script src='bboxCollide.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.js'></script> 
<script src='vis.js'></script>
</body>
</html>

Updated missing url https://cdn.rawgit.com/susielu/d3-annotation/master/d3-annotation.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.js

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js

https://cdn.rawgit.com/susielu/d3-annotation/master/d3-annotation.js