JSFiddle - React, Tailwind, and code Playground

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrap">
  <div id="network"></div>
  <div class="card node-info animated hidden">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Node <span id="nodeNumber"></span><i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Node Info<i class="material-icons right">close</i></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
</div>

CSS

body,
html {
  height: 100%;
}

.wrap {
  height: 100%;
  position: relative;
}

#network {
  height: 100%;
  background: #282A36;
}

.node-info {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 10;
  width: 200px;
  height: auto;
}

.hidden {
  display: none;
}

JavaScript

// create a network
var container = document.getElementById('network');
var data = getScaleFreeNetwork(3);
var nodeInfoCard = $('.node-info');
var nodeNumber = $("#nodeNumber");

var options = {
  height: '100%',
  width: '100%',
  interaction: {
    tooltipDelay: 100,
    hover: true
  }
};

var network = new vis.Network(container, data, options);

network.on('selectNode', showInfoCard);
network.on('deselectNode', hideInfoCard);

function setNodeInfo(nodeNum) {
  nodeNumber.html(nodeNum);
}

function unsetNodeInfo() {
  nodeNumber.html('');
}

function showInfoCard(params) {
  setNodeInfo(params.nodes[0]);

  nodeInfoCard.removeClass('hidden fadeOutDown');
  nodeInfoCard.addClass('fadeInUp');
}

function hideInfoCard() {
  nodeInfoCard.removeClass('hidden fadeInUp');
  nodeInfoCard.addClass('fadeOutDown');

  unsetNodeInfo()
}

function getScaleFreeNetwork(nodeCount) {
  var nodes = [];
  var edges = [];
  var connectionCount = [];

  // randomly create some nodes and edges
  for (var i = 0; i < nodeCount; i++) {
    nodes.push({
      id: i,
      title: 'Node ' + i,
      label: String(i),
      font: {
        face: 'Roboto',
        size: 16
      },
      borderWidth: 5,
      color: {
        color: '#FFFFFF',
        background: '#282A36',
        border: 'rgba(255,255,255, .85)'
      }
    });

    connectionCount[i] = 0;

    // create edges in a scale-free-network way
    if (i == 1) {
      var from = i;
      var to = 0;
      edges.push({
        from: from,
        to: to
      });
      connectionCount[from]++;
      connectionCount[to]++;
    } else if (i > 1) {
      var conn = edges.length * 2;
      var rand = Math.floor(Math.random() * conn);
      var cumul = 0;
      var j = 0;
      while (j < connectionCount.length && cumul < rand) {
        cumul += connectionCount[j];
        j++;
      }
      var from = i;
      var to = j;
      edges.push({
        from: from,
        to: to,
        title: 'Edge ' + i,
        width: 2,
       ...