ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
245 lines (232 loc) • 7.84 kB
HTML
<html>
<head>
<title>Advanced Node Plugin</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="../lib/plugins/ccNetViz-node-plugin.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Advanced Node Plugin</h3>
<canvas id="canvas"></canvas>
<div class="description">
Advanced node plugin allows you to add different node styles to your
ccNetViz library.
</div>
</div>
<div class="canvas-container">
<h3 class="title">Statistical Nodes</h3>
<canvas id="canvas-2"></canvas>
<div class="description">
Advanced node plugin have supported the built-in statistical node
styles.
</div>
</div>
<div class="canvas-container">
<h3 class="title">Animated Nodes</h3>
<canvas id="canvas-3"></canvas>
<div class="description">
More detailed information please visit the
<a
href="https://github.com/HelikarLab/ccNetViz/tree/master/src/plugins/node"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
window.addEventListener('DOMContentLoaded', event => {
var canvas = document.getElementById('canvas');
var graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
triangle: { textureColor: 'red' },
pentagon: {
textureColor: '#fff',
stroke: { size: 5, color: 'blue' },
},
circle: {
textureColor: '#cf0101',
stroke: { size: 5, color: '#ccc' },
},
'star-8': { textureColor: '#fbba02', inset: 1.3, size: 30 },
'new polygon': {
type: 'Polygon',
edges: 5,
textureGradient: [
{ x: 0, color: '#222' },
{ x: 0.7, color: '#cf0101' },
],
},
'rounded triangle': {
type: 'Polygon',
stroke: {
round: true,
color: '#2257a4',
size: 10,
},
},
},
});
var nodes = [
{ label: 'Triangle', style: 'triangle' },
{ label: 'Quadrilateral', style: 'quadrilateral' },
{ label: 'Pentagon', style: 'pentagon' },
{ label: 'Hexagon', style: 'hexagon' },
{ label: 'Heptagon', style: 'heptagon' },
{ label: 'Octagon', style: 'octagon' },
{ label: 'Nonagon', style: 'nonagon' },
{ label: 'Circle', style: 'circle' },
{ label: 'Ellipse', style: 'ellipse' },
{ label: 'Star', style: 'star' },
{ label: 'Star 3', style: 'star-3' },
{ label: 'Star 4', style: 'star-4' },
{ label: 'Star 5', style: 'star-5' },
{ label: 'Star 6', style: 'star-6' },
{ label: 'Star 7', style: 'star-7' },
{ label: 'Star 8', style: 'star-8' },
{ label: 'Star 9', style: 'star-9' },
{ label: 'Star 10', style: 'star-10' },
{ label: 'Custom polygon', style: 'new polygon' },
{ label: 'Rounded triangle', style: 'rounded triangle' },
{ label: 'Vee', style: 'vee' },
{ label: 'Square', style: 'square' },
{ label: 'Tag', style: 'tag' },
];
var edges = [];
for (let i = 0; i < nodes.length - 1; i++) {
edges.push({ source: nodes[i], target: nodes[i + 1] });
}
graph.set(nodes, edges, 'circular').then(() => {
graph.draw();
});
graph.draw();
// Statistical nodes
canvas = document.getElementById('canvas-2');
graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
'Doughnut Chart': {
type: 'DoughnutChart',
textureColor: '#ccc',
chart: [
{ color: '#fcb25c', ratio: 5 },
{ color: '#ef7762', ratio: 15 },
{ color: '#d2584a', ratio: 20 },
{ color: '#e28735', ratio: 25 },
{ color: '#49b483', ratio: 35 },
],
size: 50,
},
'Pie Chart': {
type: 'PieChart',
textureColor: '#ccc',
chart: [
{ color: '#fcb25c', ratio: 5 },
{ color: '#ef7762', ratio: 15 },
{ color: '#d2584a', ratio: 20 },
{ color: '#e28735', ratio: 25 },
{ color: '#49b483', ratio: 35 },
],
size: 50,
},
'Radial Histogram': {
type: 'RadialHistogram',
textureColor: '#ccc',
chart: [
{ color: '#fcb25c', ratio: 10 },
{ color: '#ef7762', ratio: 30 },
{ color: '#d2584a', ratio: 60 },
{ color: '#e28735', ratio: 80 },
{ color: '#49b483', ratio: 100 },
],
size: 50,
},
'Gauge Chart': {
type: 'GaugeChart',
textureColor: '#ccc',
size: 50,
chart: [{ color: '#222', ratio: 33 }],
},
},
});
nodes = [
{ style: 'Doughnut Chart' },
{ style: 'Pie Chart' },
{ style: 'Radial Histogram' },
{ style: 'Gauge Chart' },
];
edges = [];
for (let i = 0; i < nodes.length - 1; i++) {
edges.push({ source: nodes[i], target: nodes[i + 1] });
}
graph.set(nodes, edges, 'circular').then(() => {
graph.draw();
});
// Animation
canvas = document.getElementById('canvas-3');
graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
tag: {
textureColor: '#0000ff',
stroke: {
size: 4,
color: '#333',
},
animation: {
type: 'color',
color: '#00ff00',
},
size: 34,
},
triangle: {
textureColor: '#ff0000',
animation: {
type: 'color',
color: '#00ff00',
},
size: 34,
},
pentagon: {
textureColor: '#fff',
stroke: { size: 5, color: 'blue' },
animation: { type: 'size' },
size: 35,
},
'star-8': {
textureColor: '#fbba02',
inset: 1.3,
size: 48,
animation: {
type: 'stroke',
color: '#cf0101',
},
},
},
});
nodes = [
{ style: 'triangle' },
{ style: 'pentagon' },
{ style: 'star-8' },
{ style: 'tag' },
];
edges = [];
for (let i = 0; i < nodes.length - 1; i++) {
edges.push({ source: nodes[i], target: nodes[i + 1] });
}
graph.set(nodes, edges, 'circular').then(() => {
graph.draw();
});
});
</script>
</body>
</html>