Vis Network | Node Styles | Images with Borders

by downedcrane

HTML

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

CSS

body {
  font: 10pt arial;
}
#mynetwork {
  width: 800px;
  height: 800px;
  border: 1px solid lightgray;
  background-color: #333333;
}

JavaScript

var DIR = "img/soft-scraps-icons/";

var nodes = null;
var edges = null;
var network = null;

// Called when the Visualization API is loaded.
function draw() {
  // create people.
  // value corresponds with the age of the person
  var DIR = "../img/indonesia/";
  nodes = [
    { id: 1, shape: "image", image: "https://sun9-2.userapi.com/c848524/v848524775/8249b/u7czxpksecA.jpg?ava=1", label: "Vladimir Zhuravlev" },
    { id: 2, shape: "image", image: DIR + "2.png" },
    { id: 3, shape: "image", image: DIR + "3.png" },
    {
      id: 4,
      shape: "image",
      image: DIR + "4.png",
      label: "pictures by this guy!"
    },
    { id: 5, shape: "image", image: DIR + "5.png" },
    { id: 6, shape: "image", image: DIR + "6.png" },
    { id: 7, shape: "image", image: DIR + "7.png" },
    { id: 8, shape: "image", image: DIR + "8.png" },
    { id: 9, shape: "image", image: DIR + "9.png" },
    { id: 10, shape: "image", image: DIR + "10.png" },
    { id: 11, shape: "image", image: DIR + "11.png" },
    { id: 12, shape: "image", image: DIR + "12.png" },
    { id: 13, shape: "image", image: DIR + "13.png" },
    { id: 14, shape: "image", image: DIR + "14.png" },
    {
      id: 15,
      shape: "image",
      image: DIR + "missing.png",
      brokenImage: DIR + "missingBrokenImage.png",
      label: "when images\nfail\nto load"
    },
    {
      id: 16,
      shape: "image",
      image: DIR + "anotherMissing.png",
      brokenImage: DIR + "9.png",
      label: "fallback image in action"
    }
  ];

  // create connections between people
  // value corresponds with the amount of contact between two people
  edges = [
    { from: 1, to: 2 },
    { from: 2, to: 3 },
    { from: 2, to: 4 },
    { from: 4, to: 5 },
    { from: 4, to: 10 },
    { from: 4, to: 6 },
    { from: 6, to: 7 },
    { from: 7, to: 8 },
    { from: 8, to: 9 },
    { from: 8, to: 10 },
    { from: 10, to: 11 },
    { from: 11, to: 12 },
    { from: 12, to: 13 },
    { from: 13, to: 14 },
    {...