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">
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||||
<head runat="server">
|
<head runat="server">
|
||||||
<title>CS-EHEC-II</title>
|
<title>CS-EHEC-II</title>
|
||||||
<%--<script src="https://d3js.org/d3.v4.min.js"></script>--%>
|
<script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script>
|
||||||
<%--<script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>--%>
|
<link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />
|
||||||
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.css" />--%>
|
<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
<%--<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/visjs/dist/vis.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.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">
|
<style type="text/css">
|
||||||
#mynetwork {
|
#mynetwork {
|
||||||
width: 1500px;
|
width: 800px;
|
||||||
height: 800px;
|
height: 800px;
|
||||||
border: 1px solid lightgray;
|
border: 1px solid lightgray;
|
||||||
background-color: black
|
background-color: black
|
||||||
|
@ -70,16 +58,76 @@
|
||||||
// provide data in the normal fashion
|
// provide data in the normal fashion
|
||||||
var data = {
|
var data = {
|
||||||
nodes: nodes,
|
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!
|
// initialize your network!
|
||||||
var network = new vis.Network(container, data, options);
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -10,6 +10,7 @@ namespace EHEC_Server
|
||||||
public string Id { get; set; }
|
public string Id { get; set; }
|
||||||
public string Label { get; set; }
|
public string Label { get; set; }
|
||||||
public string Title { get; set; }
|
public string Title { get; set; }
|
||||||
|
public string Group { get; set; }
|
||||||
public Node() { }
|
public Node() { }
|
||||||
public List<Node> GetNodes()
|
public List<Node> GetNodes()
|
||||||
{
|
{
|
||||||
|
@ -31,6 +32,7 @@ namespace EHEC_Server
|
||||||
{
|
{
|
||||||
Id = cityElement.CityUid,
|
Id = cityElement.CityUid,
|
||||||
Title = "origin",
|
Title = "origin",
|
||||||
|
Group = "origin",
|
||||||
Label = cityElement.CityName,
|
Label = cityElement.CityName,
|
||||||
};
|
};
|
||||||
clusterCities.Add(clusterCity);
|
clusterCities.Add(clusterCity);
|
||||||
|
@ -49,6 +51,7 @@ namespace EHEC_Server
|
||||||
{
|
{
|
||||||
Id = element.PatientUid,
|
Id = element.PatientUid,
|
||||||
Title = "patient",
|
Title = "patient",
|
||||||
|
Group = "patient",
|
||||||
Label = element.FirstName + " " + element.LastName
|
Label = element.FirstName + " " + element.LastName
|
||||||
};
|
};
|
||||||
clusterPatients.Add(clusterPatient);
|
clusterPatients.Add(clusterPatient);
|
||||||
|
@ -67,6 +70,7 @@ namespace EHEC_Server
|
||||||
{
|
{
|
||||||
Id = element.ResultUid,
|
Id = element.ResultUid,
|
||||||
Title = "result",
|
Title = "result",
|
||||||
|
Group = "result",
|
||||||
Label = element.Name
|
Label = element.Name
|
||||||
};
|
};
|
||||||
clusterResults.Add(clusterResult);
|
clusterResults.Add(clusterResult);
|
||||||
|
|
Loading…
Reference in New Issue