ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
156 lines (140 loc) • 3.93 kB
HTML
<html>
<head>
<title>ccNetViz example of different styling</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="./libs/jquery.min.js"></script>
<style type="text/css">
#container {
width: 600px;
height: 600px;
}
#container2 {
width: 550px;
height: 200px;
}
#container3 {
width: 200px;
height: 550px;
margin-top: 40px;
}
#container4 {
width: 250px;
height: 250px;
margin-top: 40px;
}
#body {
display: inline-block;
}
</style>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Different sizes example</h3>
<h2>1:1 aspect</h2>
<canvas id="container"></canvas>
<br />
<canvas id="container4"></canvas>
<br />
<h2>non 1:1 aspect</h2>
<canvas id="container2"></canvas>
<br />
<canvas id="container3"></canvas>
<div class="description">
Example to show how graph would be rendered in different sizes with
different aspects.
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
var data = {};
function init() {
$.ajax({ url: 'data/graph-10-2.json', dataType: 'json' }).done(
dataLoaded
);
}
function dataLoaded(d) {
data = d;
showGraph();
}
function showGraph() {
var startTime = new Date();
var conf = {
styles: {
background: {
color: 'rgb(255, 255, 255)',
},
node: {
minSize: 6,
maxSize: 16,
color: 'rgb(255, 0, 0)',
texture: 'images/circle.png',
label: {
hideSize: 16,
color: 'rgb(120, 120, 120)',
},
},
edge: {
width: 1,
color: 'rgb(204, 204, 204)',
arrow: {
minSize: 6,
maxSize: 16,
aspect: 1,
texture: 'images/arrow.png',
hideSize: 1,
},
type: 'dashed',
},
edgeDotted: {
width: 1,
color: 'rgb(204, 204, 204)',
arrow: {
minSize: 6,
maxSize: 16,
aspect: 1,
texture: 'images/arrow.png',
hideSize: 1,
},
type: 'dotted',
},
},
};
var n = data.nodes[0];
data.edges.push({ source: n, target: n, style: 'edgeDotted' });
for (var i = 0; i < data.edges.length / 2; i++) {
data.edges[i].style = 'edgeDotted';
}
var el = document.getElementById('container');
var graph = new ccNetViz(el, conf);
graph.set(data.nodes, data.edges, 'force').then(() => {
graph.draw();
});
for (var i = 2; ; i++) {
var el2 = document.getElementById('container' + i);
if (!el2) return;
var graph2 = new ccNetViz(el2, conf);
graph2.set(data.nodes, data.edges, 'force').then(() => {
graph2.draw();
});
}
$('#nodesCnt').text(data.nodes.length);
$('#edgesCnt').text(data.edges.length);
$('#renderedIn').text(
Math.round((new Date().getTime() - startTime.getTime()) * 10) / 10
);
}
$(init);
</script>
</body>
</html>