diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/network/nodeStyles/circularImages.html | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/examples/network/nodeStyles/circularImages.html')
| -rw-r--r-- | www/lib/vis/examples/network/nodeStyles/circularImages.html | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/nodeStyles/circularImages.html b/www/lib/vis/examples/network/nodeStyles/circularImages.html new file mode 100644 index 00000000..b0f144c5 --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/circularImages.html @@ -0,0 +1,102 @@ +<!doctype html> +<html> +<head> + <title>Network | Circular images</title> + + <style type="text/css"> + body { + font: 10pt arial; + } + #mynetwork { + width: 800px; + height: 800px; + border: 1px solid lightgray; + background-color:#333333; + } + </style> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <script type="text/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: 'circularImage', image: DIR + '1.png'}, + {id: 2, shape: 'circularImage', image: DIR + '2.png'}, + {id: 3, shape: 'circularImage', image: DIR + '3.png'}, + {id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!"}, + {id: 5, shape: 'circularImage', image: DIR + '5.png'}, + {id: 6, shape: 'circularImage', image: DIR + '6.png'}, + {id: 7, shape: 'circularImage', image: DIR + '7.png'}, + {id: 8, shape: 'circularImage', image: DIR + '8.png'}, + {id: 9, shape: 'circularImage', image: DIR + '9.png'}, + {id: 10, shape: 'circularImage', image: DIR + '10.png'}, + {id: 11, shape: 'circularImage', image: DIR + '11.png'}, + {id: 12, shape: 'circularImage', image: DIR + '12.png'}, + {id: 13, shape: 'circularImage', image: DIR + '13.png'}, + {id: 14, shape: 'circularImage', image: DIR + '14.png'}, + {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}, + {id: 16, shape: 'circularImage', 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}, + {from: 9, to: 16} + ]; + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = { + nodes: { + borderWidth:4, + size:30, + color: { + border: '#222222', + background: '#666666' + }, + font:{color:'#eeeeee'} + }, + edges: { + color: 'lightgray' + } + }; + network = new vis.Network(container, data, options); + } + </script> + <script src="../../googleAnalytics.js"></script> +</head> + +<body onload="draw()"> + +<div id="mynetwork"></div> +</body> +</html> |