updated style
This commit is contained in:
parent
bc86609305
commit
efcf8a950e
BIN
google.png
BIN
google.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 2.3 MiB |
108
mygraph.html
108
mygraph.html
|
|
@ -1,108 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
|
||||
<center>
|
||||
<h1></h1>
|
||||
</center>
|
||||
|
||||
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
|
||||
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#mynetwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
border: 1px solid lightgray;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id = "mynetwork"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// initialize global variables.
|
||||
var edges;
|
||||
var nodes;
|
||||
var network;
|
||||
var container;
|
||||
var options, data;
|
||||
|
||||
|
||||
// This method is responsible for drawing the graph, returns the drawn network
|
||||
function drawGraph() {
|
||||
var container = document.getElementById('mynetwork');
|
||||
|
||||
|
||||
|
||||
// parsing and collecting nodes and edges from the python
|
||||
nodes = new vis.DataSet([{"font": {"color": "white"}, "id": "https://www.patricematz.de/", "label": "https://www.patricematz.de/", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "mailto:mail@patricematz.de", "label": "mailto:mail@patricematz.de", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://www.linkedin.com/in/patrice-matz-b73b6814a/", "label": "https://www.linkedin.com/in/patrice-matz-b73b6814a/", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://github.com/Askill", "label": "https://github.com/Askill", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://www.patricematz.de/images/praktikum.pdf", "label": "https://www.patricematz.de/images/praktikum.pdf", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://www.patricematz.de/images/bachelor.pdf", "label": "https://www.patricematz.de/images/bachelor.pdf", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://www.patricematz.de/images/21-Master-Thesis-Matz.pdf", "label": "https://www.patricematz.de/images/21-Master-Thesis-Matz.pdf", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://fs.jpmatz.de", "label": "https://fs.jpmatz.de", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://github.com/Askill/Inverse-Rezeptsuche", "label": "https://github.com/Askill/Inverse-Rezeptsuche", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://irs.projects.patricematz.de/", "label": "https://irs.projects.patricematz.de/", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://github.com/Askill/Video-Synopsis", "label": "https://github.com/Askill/Video-Synopsis", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://github.com/Askill/UI", "label": "https://github.com/Askill/UI", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://github.com/Askill/Photo-Wall", "label": "https://github.com/Askill/Photo-Wall", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "https://www.jpmatz.de/blog.html", "label": "https://www.jpmatz.de/blog.html", "shape": "dot", "size": 10}]);
|
||||
edges = new vis.DataSet([{"arrows": "to", "from": "https://www.patricematz.de/", "to": "mailto:mail@patricematz.de", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://www.linkedin.com/in/patrice-matz-b73b6814a/", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://github.com/Askill", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://www.patricematz.de/images/praktikum.pdf", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://www.patricematz.de/images/bachelor.pdf", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://www.patricematz.de/images/21-Master-Thesis-Matz.pdf", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://fs.jpmatz.de", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://github.com/Askill/Inverse-Rezeptsuche", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://irs.projects.patricematz.de/", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://github.com/Askill/Video-Synopsis", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://github.com/Askill/UI", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://github.com/Askill/Photo-Wall", "weight": 1}, {"arrows": "to", "from": "https://www.patricematz.de/", "to": "https://www.jpmatz.de/blog.html", "weight": 1}]);
|
||||
|
||||
// adding nodes and edges to the graph
|
||||
data = {nodes: nodes, edges: edges};
|
||||
|
||||
var options = {
|
||||
"configure": {
|
||||
"enabled": false
|
||||
},
|
||||
"edges": {
|
||||
"color": {
|
||||
"inherit": true
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": false,
|
||||
"type": "continuous"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"stabilization": {
|
||||
"enabled": true,
|
||||
"fit": true,
|
||||
"iterations": 1000,
|
||||
"onlyDynamicEdges": false,
|
||||
"updateInterval": 50
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
|
||||
drawGraph();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,56 +1,167 @@
|
|||
<html>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
|
||||
<div id="mynetwork" style = "background-color: rgb(39, 39, 39);"></div>
|
||||
<script type="text/javascript">
|
||||
var color = 'gray';
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#mynetwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
border: 1px solid lightgray;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
var nodes = {{ nodes | safe }} ;
|
||||
#loadingBar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:rgba(200,200,200,0.8);
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-ms-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#bar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin:auto auto auto auto;
|
||||
border-radius:11px;
|
||||
border:2px solid rgba(30,30,30,0.05);
|
||||
background: rgb(0, 173, 246); /* Old browsers */
|
||||
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
#border {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:10px;
|
||||
width:500px;
|
||||
height:23px;
|
||||
margin:auto auto auto auto;
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
#text {
|
||||
position:absolute;
|
||||
top:8px;
|
||||
left:530px;
|
||||
width:30px;
|
||||
height:50px;
|
||||
margin:auto auto auto auto;
|
||||
font-size:22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.outerBorder {
|
||||
position:relative;
|
||||
top:400px;
|
||||
width:600px;
|
||||
height:44px;
|
||||
margin:auto auto auto auto;
|
||||
border:8px solid rgba(0,0,0,0.1);
|
||||
background: rgb(252,252,252); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
|
||||
border-radius:72px;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="mynetwork" style = "background-color: #0f0f0e;"></div>
|
||||
<div id="loadingBar">
|
||||
<div class="outerBorder">
|
||||
<div id="text">0%</div>
|
||||
<div id="border">
|
||||
<div id="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
var color = 'gray';
|
||||
|
||||
var edges = {{ edges | safe }} ;
|
||||
console.log(nodes, edges);
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
autoResize: true,
|
||||
layout: {
|
||||
improvedLayout:true,
|
||||
randomSeed: 10,
|
||||
|
||||
},
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 8,
|
||||
font: {
|
||||
size: 5,
|
||||
color: '#ffffff'
|
||||
var nodes = {{ nodes | safe }} ;
|
||||
|
||||
var edges = {{ edges | safe }} ;
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
autoResize: true,
|
||||
layout: {
|
||||
improvedLayout:false,
|
||||
},
|
||||
borderWidth: 1
|
||||
},
|
||||
edges: {
|
||||
width: 1,
|
||||
color: {
|
||||
color:'#356b6b',
|
||||
highlight:'#4286f4',
|
||||
hover: '#41f4f4',
|
||||
inherit: 'from',
|
||||
opacity:1.0
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 8,
|
||||
font: {
|
||||
size: 5,
|
||||
color: '#ffffff'
|
||||
},
|
||||
borderWidth: 1
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
hoverConnectedEdges: true,
|
||||
tooltipDelay: 200
|
||||
}
|
||||
};
|
||||
edges: {
|
||||
width: 1,
|
||||
color: {
|
||||
color:'#356b6b',
|
||||
highlight:'#4286f4',
|
||||
hover: '#41f4f4',
|
||||
inherit: 'from',
|
||||
opacity:1.0
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
hoverConnectedEdges: true,
|
||||
tooltipDelay: 200
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
network.on("stabilizationIterationsDone", function () {
|
||||
network.on("stabilizationProgress", function(params) {
|
||||
document.getElementById('loadingBar').removeAttribute("style");
|
||||
var maxWidth = 496;
|
||||
var minWidth = 20;
|
||||
var widthFactor = params.iterations/params.total;
|
||||
var width = Math.max(minWidth,maxWidth * widthFactor);
|
||||
|
||||
document.getElementById('bar').style.width = width + 'px';
|
||||
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
|
||||
});
|
||||
network.once("stabilizationIterationsDone", function() {
|
||||
document.getElementById('text').innerHTML = '100%';
|
||||
document.getElementById('bar').style.width = '496px';
|
||||
document.getElementById('loadingBar').style.opacity = 0;
|
||||
// really clean the dom element
|
||||
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
|
||||
network.setOptions( { physics: false } );
|
||||
});
|
||||
return network;
|
||||
};
|
||||
draw();
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue