improve cluster view
This commit is contained in:
parent
00fd8301b2
commit
5a472dc25c
|
@ -5,27 +5,15 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head runat="server">
|
||||
<title>CS-EHEC-II</title>
|
||||
<%--<script src="https://d3js.org/d3.v4.min.js"></script>--%>
|
||||
<%--<script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>--%>
|
||||
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.css" />--%>
|
||||
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.min.css" />--%>
|
||||
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/styles/vendor.css" />--%>
|
||||
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script> --%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/lodash/lodash.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.min.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/d3/d3.min.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/d3/d3.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.min.js"></script>--%>
|
||||
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/scripts/vendor.js"></script>--%>
|
||||
<script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />
|
||||
<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="text/javascript" src="cluster_dependencies/visjs/dist/vis.js"></script>
|
||||
<link href="cluster_dependencies/visjs/dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<%--<link href="cluster_dependencies/visjs/dist/vis-network.min.css" rel="stylesheet" type="text/css" />--%>
|
||||
<link href="cluster_dependencies/visjs/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 1500px;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
background-color: black
|
||||
|
@ -70,16 +58,76 @@
|
|||
// provide data in the normal fashion
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
//var options = {};
|
||||
var options = {
|
||||
autoResize: true,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
physics: {
|
||||
enabled: true,
|
||||
forceAtlas2Based: {
|
||||
gravitationalConstant: -50,
|
||||
centralGravity: 0.01,
|
||||
springConstant: 0.08,
|
||||
springLength: 100,
|
||||
damping: 0.4,
|
||||
avoidOverlap: 0.2
|
||||
},
|
||||
maxVelocity: 50,
|
||||
minVelocity: 0.1,
|
||||
solver: 'forceAtlas2Based',
|
||||
stabilization: {
|
||||
enabled: true,
|
||||
iterations: 1000,
|
||||
updateInterval: 100,
|
||||
onlyDynamicEdges: false,
|
||||
fit: true
|
||||
},
|
||||
timestep: 0.5,
|
||||
adaptiveTimestep: true
|
||||
},
|
||||
layout: {
|
||||
//randomSeed: undefined,
|
||||
improvedLayout: true,
|
||||
hierarchical: {
|
||||
enabled: false,
|
||||
levelSeparation: 150,
|
||||
nodeSpacing: 500,
|
||||
treeSpacing: 100,
|
||||
blockShifting: true,
|
||||
edgeMinimization: true,
|
||||
parentCentralization: true,
|
||||
direction: 'UD', // UD, DU, LR, RL
|
||||
sortMethod: 'directed' // hubsize, directed
|
||||
}
|
||||
},
|
||||
groups: {
|
||||
result: {
|
||||
size: 40,
|
||||
color: {
|
||||
background: 'red'
|
||||
}, borderWidth: 3
|
||||
},
|
||||
origin: {
|
||||
size: 30,
|
||||
color: {
|
||||
background: 'green'
|
||||
}, borderWidth: 3
|
||||
},
|
||||
patient: {
|
||||
size: 60,
|
||||
color: {
|
||||
background: 'yellow'
|
||||
}, borderWidth: 3
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// initialize your network!
|
||||
var network = new vis.Network(container, data, options);
|
||||
var clusterIndex = 0;
|
||||
var options = {};
|
||||
|
||||
// initialize your network!
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
@ -10,6 +10,7 @@ namespace EHEC_Server
|
|||
public string Id { get; set; }
|
||||
public string Label { get; set; }
|
||||
public string Title { get; set; }
|
||||
public string Group { get; set; }
|
||||
public Node() { }
|
||||
public List<Node> GetNodes()
|
||||
{
|
||||
|
@ -31,6 +32,7 @@ namespace EHEC_Server
|
|||
{
|
||||
Id = cityElement.CityUid,
|
||||
Title = "origin",
|
||||
Group = "origin",
|
||||
Label = cityElement.CityName,
|
||||
};
|
||||
clusterCities.Add(clusterCity);
|
||||
|
@ -49,6 +51,7 @@ namespace EHEC_Server
|
|||
{
|
||||
Id = element.PatientUid,
|
||||
Title = "patient",
|
||||
Group = "patient",
|
||||
Label = element.FirstName + " " + element.LastName
|
||||
};
|
||||
clusterPatients.Add(clusterPatient);
|
||||
|
@ -67,6 +70,7 @@ namespace EHEC_Server
|
|||
{
|
||||
Id = element.ResultUid,
|
||||
Title = "result",
|
||||
Group = "result",
|
||||
Label = element.Name
|
||||
};
|
||||
clusterResults.Add(clusterResult);
|
||||
|
|
Loading…
Reference in New Issue