Brendon Page
11 years ago
2 changed files with 88 additions and 0 deletions
Unified View
Diff Options
+ 87
- 0
examples/network/34_circular_images.html
View File
| @ -0,0 +1,87 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Network | Scalable images</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt arial; | |||||
| } | |||||
| #mynetwork { | |||||
| width: 600px; | |||||
| height: 600px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||||
| <link href="../../dist/vis.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/soft-scraps-icons/'; | |||||
| nodes = [ | |||||
| {id: 3, shape: 'circularImage', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'}, | |||||
| {id: 4, shape: 'circularImage', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'}, | |||||
| {id: 5, shape: 'circularImage', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'}, | |||||
| {id: 6, shape: 'circularImage', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'}, | |||||
| {id: 7, shape: 'circularImage', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'}, | |||||
| {id: 9, shape: 'circularImage', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'}, | |||||
| {id: 10, shape: 'circularImage', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'} | |||||
| ]; | |||||
| // create connetions between people | |||||
| // value corresponds with the amount of contact between two people | |||||
| edges = [ | |||||
| {from: 4, to: 6, title: '8 emails per week'}, | |||||
| {from: 5, to: 7, title: '2 emails per week'}, | |||||
| {from: 4, to: 5, title: '1 emails per week'}, | |||||
| {from: 9, to: 10, title: '2 emails per week'}, | |||||
| {from: 2, to: 3, title: '6 emails per week'}, | |||||
| {from: 3, to: 9, title: '4 emails per week'}, | |||||
| {from: 5, to: 3, title: '1 emails per week'}, | |||||
| {from: 2, to: 7, title: '4 emails per week'} | |||||
| ]; | |||||
| // create a network | |||||
| var container = document.getElementById('mynetwork'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = { | |||||
| nodes: { | |||||
| shape: 'circle', | |||||
| color: { | |||||
| border: 'orange', | |||||
| background: 'yellow', | |||||
| highlight: { | |||||
| border: 'darkorange', | |||||
| background: 'gold' | |||||
| } | |||||
| } | |||||
| }, | |||||
| edges: { | |||||
| color: 'lightgray' | |||||
| } | |||||
| }; | |||||
| network = new vis.Network(container, data, options); | |||||
| } | |||||
| </script> | |||||
| </head> | |||||
| <body onload="draw()"> | |||||
| <div id="mynetwork"></div> | |||||
| <div id="info"></div> | |||||
| </body> | |||||
| </html> | |||||