Template:Greece/collabs js
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: , title: 'Cologne-Dusseldorf', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/c/c9/GreeKom_collabs_graph_dusseldorf.png', size: 75},
{id: 2, label: , title: 'Aalto-Helsinki', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/5/52/GreeKom_collabs_graph_aalto.png'},
{id: 3, label: , title: 'NYU Abu Dhabi', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/8/8e/GreeKom_collabs_graph_abudahbi.png'},
{id: 4, label: , title: 'Aix-Marseille', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/2/2d/GreeKom_collabs_graph_aix.png'},
{id: 5, label: , title: 'Bielefeld-CeBiTec', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/5/53/GreeKom_collabs_graph_bielefeld.png'},
{id: 6, label: , title: 'Bonn', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/d/d6/GreeKom_collabs_graph_bonn.png'},
{id: 7, label: , title: 'Columbia NYC', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/0/0f/GreeKom_collabs_graph_columbia.png'},
{id: 8, label: , title: 'TU Darmstadt', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/9/9a/GreeKom_collabs_graph_darmstadt.png'},
{id: 9, label: , title: 'ECUST', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/7/7a/GreeKom_collabs_graph_ecust.png'},
{id: 10, label: , title: 'TU Eindhoven', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/8/88/GreeKom_collabs_graph_eindhoven.png'},
{id: 11, label: , title: 'Franconia', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/e/e0/GreeKom_collabs_graph_franconia.png'},
{id: 12, label: , title: 'Groningen', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/5/55/GreeKom_collabs_graph_groningen.png'},
{id: 13, label: , title: 'Hamburg', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/7/74/GreeKom_collabs_graph_hamburg.png'},
{id: 14, label: , title: 'Heidelberg', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/1/12/GreeKom_collabs_graph_heidelberg.png'},
{id: 15, label: , title: 'Northwestern', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/8/82/GreeKom_collabs_graph_northwestern.png'},
{id: 16, label: , title: 'Potsdam', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/3/3f/GreeKom_collabs_graph_postdam.png'},
{id: 17, label: , title: 'RPI Troy NY', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/c/c2/GreeKom_collabs_graph_rpi.png'},
{id: 18, label: , title: 'Sydney', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/e/e0/GreeKom_collabs_graph_sydney.png'},
{id: 19, label: , title: 'INSA-UPS Toulouse', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/4/4e/GreeKom_collabs_graph_toulouse.png'},
{id: 20, label: , title: 'Tübingen', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/6/6c/GreeKom_collabs_graph_tubingen.png'},
{id: 21, label: , title: 'Uppsala', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/a/a0/GreeKom_collabs_graph_uppsala.png'},
{id: 22, label: , title: 'Utrecht', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/a/a3/GreeKom_collabs_graph_utrecht.png'},
{id: 23, label: , title: 'UPV Valencia', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/8/85/GreeKom_collabs_graph_valencia.png'},
{id: 24, label: , title: 'Wageningen UR', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/3/39/GreeKom_collabs_graph_wageningen.png'},
{id: 25, label: , title: 'UNIFI', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/0/08/GreeKom_collabs_graph_unifi.png'},
{id: 26, label: , title: 'Aachen', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/1/17/GreeKom_collabs_graph_aachen.png'},
{id: 31, label: , title: 'TU Dresden', group: 'groupA', image: 'https://static.igem.org/mediawiki/2017/9/92/GreeKom_collabs_graph_dresden.png'},
{id: 27, label: 'Postcard', group: 'groupD', shape: 'box', size: 50},
{id: 28, label: , title: 'Greece', group: 'groupE', image: 'https://static.igem.org/mediawiki/2017/c/c0/GreeKom_collabs_graph_greece.png', size: 75},
{id: 29, label: 'Human Practices', group: 'groupD', shape: 'box'},
{id: 30, label: 'Quorum Sensing', group: 'groupD', shape: 'box'},
{id: 32, label: , title: 'Epiphany NYC', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/0/0b/Greekom_collabs_nyc.png', size: 75},
{id: 33, label: , title: 'Freiburg', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/3/35/Greekom_collabs_freiburg.png', size: 75},
{id: 34, label: , title: 'Columbia NYC', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/0/0f/GreeKom_collabs_graph_columbia.png', size: 75},
{id: 35, label: , title: 'UPV Valencia', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/8/85/GreeKom_collabs_graph_valencia.png', size: 75},
{id: 36, label: , title: 'INSA-UPS Toulouse', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/4/4e/GreeKom_collabs_graph_toulouse.png', size: 75},
{id: 37, label: , title: 'IONIS-PARIS', group: 'groupD', image: 'https://static.igem.org/mediawiki/2017/8/8a/Greekom_collabs_ionis.png', size: 75}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 1, to: 5},
{from: 1, to: 6},
{from: 1, to: 7},
{from: 1, to: 8},
{from: 1, to: 9},
{from: 1, to: 10},
{from: 1, to: 11},
{from: 1, to: 12},
{from: 1, to: 13},
{from: 1, to: 14},
{from: 1, to: 15},
{from: 1, to: 16},
{from: 1, to: 17},
{from: 1, to: 18},
{from: 1, to: 19},
{from: 1, to: 20},
{from: 1, to: 21}, {from: 1, to: 22}, {from: 1, to: 23}, {from: 1, to: 24}, {from: 1, to: 25}, {from: 1, to: 26},
{from: 1, to: 31},
{from: 1, to: 27, length: 1000},
{from: 28, to: 27, length: 600},
{from: 28, to: 29, length: 600},
{from: 28, to: 30, length: 300},
{from: 29, to: 32},
{from: 29, to: 33},
{from: 29, to: 34},
{from: 29, to: 35},
{from: 29, to: 36},
{from: 29, to: 37},
{from: 30, to: 34}
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
//Options for each thing in network (styles etc)
var options = {
nodes:{ borderWidth: 1, borderWidthSelected: 2, brokenImage:'https://static.igem.org/mediawiki/2017/0/06/Greekom_footer.png', chosen: true, color: { border: '#2B7CE9', background: '#ffffff', highlight: { border: '#2B7CE9', background: '#D2E5FF' }, hover: { border: '#2B7CE9', background: '#D2E5FF' } }, fixed: { x:false, y:false }, font: { color: '#343434', size: 14, // px face: 'Century Gothic', background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', align: 'center', multi: false, vadjust: 0, bold: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold' }, ital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'italic', }, boldital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold italic' }, mono: { color: '#343434', size: 15, // px face: 'courier new', vadjust: 2, mod: } }, group: undefined, heightConstraint: false, hidden: false, icon: { face: 'FontAwesome', size: 50, color:'#2B7CE9' }, image: 'https://cldup.com/0IRxBwvTKJ.png', label: undefined, labelHighlightBold: true, level: undefined, mass: 1, physics: true, scaling: { min: 10, max: 30, label: { enabled: false, min: 14, max: 30, maxVisible: 30, drawThreshold: 5 }, customScalingFunction: function (min,max,total,value) { if (max === min) { return 0.5; } else { let scale = 1 / (max - min); return Math.max(0,(value - min)*scale); } } }, shadow:{ enabled: false, color: 'rgba(0,0,0,0.5)', size:10, x:5, y:5 }, shape: 'image', //'circularImage', shapeProperties: { borderDashes: false, // only for borders borderRadius: 6, // only for box shape interpolation: false, // only for image and circularImage shapes useImageSize: false, // only for image and circularImage shapes useBorderWithImage: false // only for image shape }, size: 40, title: undefined, value: undefined, widthConstraint: false }, interaction: { hover: true, selectConnectedEdges: false, zoomView: false }, groups: { 'groupA': { color: '#FF9900' // orange }, 'groupB': { color: "#2B7CE9" // blue }, 'groupC': { color: "#5A1E5C" // purple }, 'groupD': { color: "#ffffff", // red
scaling: {
label: {enabled: true }
},
font: { size: 40 }
},
'groupE' : {
borderWidth: 1,
color: { border: '#2B7CE9'
},
font: {
strokeWidth: 10, strokeColor: '#000000'
}
}
},
edges: {
length: 450
}
};
// initialize your network! var network = new vis.Network(container, data, options);
network.fit();
network.once('stabilized', function() {
var coords = sessionStorage.getItem('LINK') != 'Achievements' ? { x: 0, y: 60 } : {x: 0, y: 60 };
if(window.location.href == 'https://2017.igem.org/Team:Greece/Achievements') coords = { x: -1700, y: -890 };
var scaleOption = { position: coords, scale : 0.45 }; network.moveTo(scaleOption);
//x: -1700, y: -890 })
network.on("click", function (properties) {
properties.event = "[original event]";
//document.getElementById('eventSpan').innerHTML = 'Click event:
' + JSON.stringify(properties, null, 4); //JSON.stringify(obj, replacer, white_space_for_readability_purposes) console.log('click event, getNodeAt returns: ' + this.getNodeAt(properties.pointer.DOM));
displayDetails(properties.nodes); });
//On mouse over network.on("hoverNode", function (properties) { properties.event = "[original event]"; if( ([27, 29, 30].includes(( + properties.node)*1 )) ){ network.canvas.body.container.style.cursor = 'pointer'; } }); //On mouse leave network.on("blurNode", function (properties) { properties.event = "[original event]"; if( ([27, 29, 30].includes(( + properties.node)*1 )) ){ network.canvas.body.container.style.cursor = 'default'; }
});
function displayDetails(nodeId){
if( ([27, 29, 30].includes((+nodeId)*1 )) ){
$('#title').html( $('#Node_' + nodeId + '_title').html() );
$('#subtitle').html( $('#Node_' + nodeId + '_subtitle').html() );
$('#description').html( $('#Node_' + nodeId + '_description').html() );
$('#details_box').css('opacity', '1');
$('#mynetwork').animate({width:'55%'}, 500);
$('#details_box').css('display','block');
//Set functionality to side box collapsable sectors
var acd = document.getElementById('description').getElementsByClassName("accordion");
var j;
for (j = 0; j < acd.length; j++) {
acd[j].onclick = function() {
this.classList.toggle("active");
var paneld = this.nextElementSibling;
if (paneld.style.maxHeight){
paneld.style.maxHeight = null;
} else {
paneld.style.maxHeight = paneld.scrollHeight + "px";
}
}
}
} }
function hideDetails(){
$('#mynetwork').animate({width:'100%'}, 500);
$('#details_box').animate({opacity:'0'}, 500);
$('#details_box').css('display','none');
} network.fit();
