function selectCompany(event) { var nodeId = event.value; network.selectNodes([nodeId]); highlightConnections({nodes:[nodeId]}) network.focusOnNode(nodeId,{animation:false, scale:0.2}) } function selectYear(year) { selectedYear = year console.log(year) populateYearDiv(); recursiveClearDOM(document.getElementById("projectsDropdown")); populateProjectsDropdown(); recursiveClearDOM(document.getElementById("companyDropdown")); } function selectProject(event) { if (event.value != "none") { selectedProject = event.value; } if (selectedType != "") { if (network) { network.destroy() network = null; } loadJSON('./data/combined/' + selectedYear + "_" + selectedProject + ".json", drawAll); document.getElementById("FILENAME").innerHTML = selectedYear + "_" + selectedProject + ".json"; } } function selectType(type) { if (selectedType != type) { selectedType = type; totalValue = 0; populateTypeDiv(); var allNodes = nodes.get(); if (allNodes.length > 0) { if (selectedType == "connections") { for (var i = 0; i < allNodes.length; i++) { var node = allNodes[i]; node.title = node.id + ": " + node.euData[selectedType]; node.value = Math.max(1,Math.pow(Number(node.euData[selectedType]),1.05)); totalValue += node.value; } network.setOptions({nodes:{radiusMax: nodeRadius, customScalingFunction:function (min,max,total,value) { if (max == min) { return 0.5; } else { var scale = 1 / (max - min); return Math.max(0,(value - min)*scale); } }}}); } else { // by funding for (var i = 0; i < allNodes.length; i++) { var node = allNodes[i]; node.title = node.id + ": " + Math.round(Number(node.euData[selectedType])) + " Euro"; node.value = Number(node.euData[selectedType]); totalValue += node.value; } network.setOptions({nodes:{radiusMax: 80*nodeRadius, customScalingFunction:function (min,max,total,value) { var scale = value / total; return scale; }}}); } nodes.update(allNodes); } } } function recursiveClearDOM(DOMobject) { while (DOMobject.hasChildNodes() == true) { recursiveClearDOM(DOMobject.firstChild); DOMobject.removeChild(DOMobject.firstChild); } } function viewAllNeighbours() { network.zoomExtent({nodes:connectedNodes, duration:0}) } function doSteps(amount) { network.setFreezeSimulation(false); network.setOptions({stabilizationIterations:amount}) network._stabilize() network.setFreezeSimulation(true); } var network; var nodes; var edges; var edgeOpacity = 0.15; var totalValue = 0; function drawAll(dataJSON, file) { // create an array with nodes nodes = new vis.DataSet(dataJSON.nodes); // create an array with edges edges = new vis.DataSet(dataJSON.edges); var totalMass = 0; totalValue = 0; for (var i = 0; i < dataJSON.nodes.length; i++) { totalMass += dataJSON.nodes[i].mass; totalValue += dataJSON.nodes[i].value; } var gravityConstant = -20000; if (totalMass < 2000) { gravityConstant = -2000; } var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length); var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length); var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio)); var amountOfNodes = dataJSON.nodes.length; edgeOpacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio*2)); nodeRadius = amountOfNodes * 0.8; var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { stabilize: false, stabilizationIterations: 15000, smoothCurves: { enabled: true, dynamic: false }, configurePhysics: false, physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}}, //physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}}, nodes: { shape: 'dot', radiusMax: nodeRadius, fontColor: '#ffffff', fontDrawThreshold: 8, scaleFontWithValue: true, fontSizeMin: 8, fontSizeMax: amountOfNodes * 0.25, fontSizeMaxVisible: 20, fontStrokeWidth: 1, // px fontStrokeColor: '#222222' }, edges: { opacity: edgeOpacity }, hideEdgesOnDrag: true, maxVelocity: 100, tooltip: { delay: 200, fontSize: 12, color: { background: "#fff" } } }; network = new vis.Network(container, data, options); network.setFreezeSimulation(true); network.on("click",highlightConnections); populateCompanyDropdown(); window.onresize = function () {network.redraw();}; } // marked is used so we don't do heavy stuff on each click var marked = false; var connectedNodes = []; function highlightConnections(selectedItems) { if (selectedItems.nodes[0] == 'none') { return; } var nodeId; var requireUpdate = false; // we get all data from the dataset once to avoid updating multiple times. if (selectedItems.nodes.length == 0 && marked === true) { connectedNodes = []; requireUpdate = true; var allNodes = nodes.get({returnType:"Object"}); // restore on unselect for (nodeId in allNodes) { allNodes[nodeId].color = undefined; if (allNodes[nodeId].oldLabel !== undefined) { allNodes[nodeId].label = allNodes[nodeId].oldLabel; allNodes[nodeId].oldLabel = undefined; } } marked = false; network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:edgeOpacity}}) } else if (selectedItems.nodes.length > 0) { var allNodes = nodes.get({returnType:"Object"}); marked = true; requireUpdate = true; var mainNode = selectedItems.nodes[0]; // this is an ID connectedNodes = network.getConnectedNodes(mainNode); connectedNodes.push(mainNode); for (nodeId in allNodes) { allNodes[nodeId].color = 'rgba(150,150,150,0.1)'; if (allNodes[nodeId].oldLabel === undefined) { allNodes[nodeId].oldLabel = allNodes[nodeId].label; allNodes[nodeId].label = ""; } } for (var i = 0; i < connectedNodes.length; i++) { allNodes[connectedNodes[i]].color = undefined; if (allNodes[connectedNodes[i]].oldLabel !== undefined) { allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel; allNodes[connectedNodes[i]].oldLabel = undefined; } } // we want to set the fontSizeMin just so that the node we're looking at has a good fontsize at the zoomLevel console.log(totalValue, allNodes[mainNode].value) network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}}) } if (requireUpdate === true) { var updateArray = []; for (nodeId in allNodes) { updateArray.push(allNodes[nodeId]); } nodes.update(updateArray); } } function loadJSON(path, success, error) { selectedFile = path; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { success(JSON.parse(xhr.responseText), path); } else { error(); } } }; xhr.open("GET", path, true); xhr.send(); } function populateCompanyDropdown() { var nodesAr = nodes.get(); var nodeIds = []; for (var i = 0; i < nodesAr.length;i++) { nodeIds.push(nodesAr[i].id); } nodeIds.sort() var dropdown = document.getElementById("companyDropdown"); var option = document.createElement('option'); option.text = '-- pick a company to focus on.'; option.value = 'none'; dropdown.add(option); for (i = 0; i < nodeIds.length; i++) { option = document.createElement('option'); option.text = option.value = nodeIds[i]; dropdown.add(option); } } function populateTypeDiv() { var container = document.getElementById("typeContainer"); recursiveClearDOM(container); var types = ['funding', 'connections']; var typeLabels = ['size by funding', 'size by connections']; for (i = 0; i < types.length; i++) { var div = document.createElement('div'); div.className = 'type'; if (types[i] == selectedType) { div.className += ' selected' } div.innerHTML = typeLabels[i]; div.onclick = selectType.bind(this,types[i]) container.appendChild(div); } } function populateYearDiv() { var container = document.getElementById("yearContainer"); recursiveClearDOM(container); for (i = 0; i < years.length; i++) { var div = document.createElement('div'); div.className = 'year'; if (years[i] == selectedYear) { div.className += ' selected' } div.innerHTML = years[i]; div.onclick = selectYear.bind(this,years[i]) container.appendChild(div); } } function populateProjectsDropdown() { var dropdown = document.getElementById("projectsDropdown"); var option = document.createElement('option'); option.text = '-- pick project to see the connections'; option.value = 'none'; dropdown.add(option); for (i = 0; i < yearlyProjects[selectedYear].length; i++) { option = document.createElement('option'); option.text = option.value = yearlyProjects[selectedYear][i]; dropdown.add(option); } } function download() { var file = selectedFile.replace("./data/combined/",""); var nodesAr = nodes.get(); var edgesAr = edges.get(); var obj = {nodes: nodesAr, edges: edgesAr}; var json = JSON.stringify(obj); var blob = new Blob([json], {type: "text/plain;charset=utf-8"}); saveAs(blob, file); } var filesList = [ //'2010_FP7-ENERGY.json', //'2010_FP7-ENVIRONMENT.json', //'2010_FP7-EURATOM-FISSION.json', //'2010_FP7-HEALTH.json', //'2010_FP7-ICT.json', //'2010_FP7-IDEAS-ERC.json', //'2010_FP7-INCO.json', //'2010_FP7-INFRASTRUCTURES.json', //'2010_FP7-JTI.json', //'2010_FP7-KBBE.json', //'2010_FP7-NMP.json', //'2010_FP7-PEOPLE.json', //'2010_FP7-REGIONS.json', //'2010_FP7-REGPOT.json', //'2010_FP7-SIS.json', //'2010_FP7-SME.json', //'2010_FP7-SPACE.json', //'2010_FP7-SSH.json', //'2010_FP7-TRANSPORT.json', //'2010_Other.json', //'2011_FP7-COH.json', //'2011_FP7-ENERGY.json', //'2011_FP7-ENVIRONMENT.json', //'2011_FP7-EURATOM-FISSION.json', //'2011_FP7-GA.json', //'2011_FP7-HEALTH.json', //'2011_FP7-ICT,FP7-JTI.json', //'2011_FP7-ICT.json', //'2011_FP7-IDEAS-ERC.json', //'2011_FP7-INCO.json', //'2011_FP7-INFRASTRUCTURES.json', //'2011_FP7-JTI.json', //'2011_FP7-KBBE.json', //'2011_FP7-NMP,FP7-INFRASTRUCTURES.json', //'2011_FP7-NMP,FP7-TRANSPORT.json', //'2011_FP7-NMP.json', //'2011_FP7-PEOPLE.json', //'2011_FP7-REGIONS.json', //'2011_FP7-REGPOT.json', //'2011_FP7-SECURITY.json', //'2011_FP7-SIS.json', //'2011_FP7-SME.json', //'2011_FP7-SPACE.json', //'2011_FP7-SSH.json', //'2011_FP7-TRANSPORT.json', //'2012_CIP.json', //'2012_FP7-ENERGY.json', //'2012_FP7-ENVIRONMENT.json', //'2012_FP7-EURATOM-FISSION.json', //'2012_FP7-HEALTH.json', //'2012_FP7-ICT.json', //'2012_FP7-IDEAS-ERC.json', //'2012_FP7-INCO.json', //'2012_FP7-INFRASTRUCTURES.json', //'2012_FP7-JTI.json', //'2012_FP7-KBBE.json', //'2012_FP7-NMP.json', //'2012_FP7-PEOPLE.json', //'2012_FP7-REGIONS.json', //'2012_FP7-REGPOT.json', //'2012_FP7-SECURITY.json', //'2012_FP7-SIS.json', //'2012_FP7-SME.json', //'2012_FP7-SPACE.json', //'2012_FP7-SSH.json', //'2012_FP7-TRANSPORT.json', //'2012_Other.json', //'2013_CIP.json', //'2013_FP7-COH.json', //'2013_FP7-ENERGY.json', //'2013_FP7-ENVIRONMENT.json', '2013_FP7-EURATOM-FISSION.json', //'2013_FP7-HEALTH.json', '2013_FP7-ICT.json', //'2013_FP7-IDEAS-ERC.json', //'2013_FP7-INCO.json', //'2013_FP7-INFRASTRUCTURES,FP7-SME.json', //'2013_FP7-INFRASTRUCTURES.json', //'2013_FP7-JTI.json', //'2013_FP7-KBBE.json', //'2013_FP7-NMP.json', //'2013_FP7-PEOPLE.json', //'2013_FP7-REGIONS.json', //'2013_FP7-REGPOT.json', //'2013_FP7-SECURITY.json', //'2013_FP7-SIS.json', //'2013_FP7-SME.json', //'2013_FP7-SPACE.json', //'2013_FP7-SSH.json', //'2013_FP7-TRANSPORT.json', ] filesList.sort(); var fileIndex = -1; function next() { if (network) { network.destroy() network = null; } fileIndex++; document.getElementById("FILENAME").innerHTML = filesList[fileIndex]; loadJSON('./data/combined/' + filesList[fileIndex], drawAll) } var years = []; var yearlyProjects = {}; var selectedFile = ""; for (var i = 0; i < filesList.length; i++) { var filename = filesList[i]; var filenameArray = filename.split("_"); var year = filenameArray[0]; var project = filenameArray[1].replace(".json", ""); if (years.indexOf(year) == -1) { years.push(year); yearlyProjects[year] = []; } yearlyProjects[year].push(project); } var selectedYear = years[years.length-1]; var selectedType = "connections"; var selectedProject = ""; var nodeRadius = 1000; populateYearDiv(); populateTypeDiv(); populateProjectsDropdown(); //next()