ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
95 lines (93 loc) • 3.1 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>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Using SDF font</h3>
<canvas id="canvas"></canvas>
<div class="description">
Example with Signed distance field fonts utilizing the browser-based
font generation.
<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);
// $.ajax({ url: 'data/line-1000.json', dataType: 'json' }).done(dataLoaded);
// $.ajax({ url: 'data/graph-1000.json', dataType: 'json' }).done(dataLoaded);
// $.ajax({ url: 'data/graph-10-3.json', dataType: 'json' }).done(dataLoaded);
// $.ajax({ url: 'data/tree1.json', dataType: 'json' }).done(dataLoaded);
// $.ajax({ url: 'data/star-1000.json', dataType: 'json' }).done(dataLoaded);
$.ajax({ url: 'data/Bronchiseptica.json', dataType: 'json' }).done(
dataLoaded
);
// $.ajax({ url: 'data/CD4.json', dataType: 'json' }).done(dataLoaded);
// $.ajax({ url: 'data/circle-100.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: {
color: 'rgb(120, 120, 120)',
font: {
type: 'sdf',
},
},
},
edge: {
width: 1,
color: 'rgb(204, 204, 204)',
arrow: {
minSize: 6,
maxSize: 16,
aspect: 1,
texture: 'images/arrow.png',
hideSize: 1,
},
},
},
};
var el = document.getElementById('canvas');
var graph = new ccNetViz(el, conf);
graph.set(data.nodes, data.edges, 'force').then(() => {
graph.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>