vis-network
Version:
A dynamic, browser-based visualization library.
120 lines (100 loc) • 8.18 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Network Examples</title>
<link rel="icon" HREF="favicon.ico">
</head>
<body>
<div class="contentWrapper">
<div id="networkContainer"></div>
<div id="contentContainer">
<h1>Network Examples</h1>
<div>This page contains examples which show how to use Network. For the documentation, please click the button below:</div>
<br>
<a class="btn btn-primary" href="../docs/network" role="button">View docs »</a>
<h3>basic usage</h3>
<a class='exampleLink' href="network/basicUsage.html">basic usage</a><br />
<h3>node styles</h3>
<a class='exampleLink' href="network/nodeStyles/circularImages.html">circular images</a><br />
<a class='exampleLink' href="network/nodeStyles/colors.html">colors</a><br />
<a class='exampleLink' href="network/nodeStyles/customGroups.html">custom groups</a><br />
<a class='exampleLink' href="network/nodeStyles/groups.html">groups</a><br />
<a class='exampleLink' href="network/nodeStyles/HTMLInNodes.html">HTML in nodes</a><br />
<a class='exampleLink' href="network/nodeStyles/icons.html">icons (Fontawesome and Ionicons)</a><br />
<a class='exampleLink' href="network/nodeStyles/images.html">images</a><br />
<a class='exampleLink' href="network/nodeStyles/imagesWithBorders.html">images with borders</a><br />
<a class='exampleLink' href="network/nodeStyles/shadows.html">node shadows</a><br />
<a class='exampleLink' href="network/nodeStyles/shapes.html">node shapes</a><br />
<a class='exampleLink' href="network/nodeStyles/shapesWithDashedBorders.html">dashed borders</a><br />
<a class='exampleLink' href="network/nodeStyles/widthHeight.html">width height</a><br />
<h3>edge styles</h3>
<a class='exampleLink' href="network/edgeStyles/arrows.html">arrows (also combined with dashes)</a><br />
<a class='exampleLink' href="network/edgeStyles/arrowTypes.html">arrow types</a><br />
<a class='exampleLink' href="network/edgeStyles/colors.html">different colors</a><br />
<a class='exampleLink' href="network/edgeStyles/dashes.html">dashes</a><br />
<a class='exampleLink' href="network/edgeStyles/smooth.html">smooth curves</a><br />
<a class='exampleLink' href="network/edgeStyles/smoothWorldCup.html">smooth curves in action</a><br />
<h3>labels</h3>
<a class='exampleLink' href="network/labels/labelAlignment.html">label alignment (for edges only)</a><br />
<a class='exampleLink' href="network/labels/labelBackground.html">label background</a><br />
<a class='exampleLink' href="network/labels/labelColorAndSize.html">colors and sizes</a><br />
<a class='exampleLink' href="network/labels/labelMargins.html">label margins</a><br />
<a class='exampleLink' href="network/labels/labelMultifont.html">label multiple fonts</a><br />
<a class='exampleLink' href="network/labels/labelStroke.html">label stroke</a><br />
<a class='exampleLink' href="network/labels/multilineText.html">multiline text</a><br />
<h3>layout</h3>
<a class='exampleLink' href="network/layout/hierarchicalLayout.html">hierarchical layout</a><br />
<a class='exampleLink' href="network/layout/hierarchicalLayoutMethods.html">hierarchical layout - different methods</a><br />
<a class='exampleLink' href="network/layout/hierarchicalLayoutUserdefined.html">hierarchical layout - user defined</a><br />
<a class='exampleLink' href="network/layout/hierarchicalLayoutWithoutPhysics.html">hierarchical layout - without physics</a><br />
<a class='exampleLink' href="network/layout/randomSeed.html">set the random seed so every network will be the same</a><br />
<h3>events</h3>
<a class='exampleLink' href="network/events/interactionEvents.html">interaction events, click, rightclick, drag etc.</a><br />
<a class='exampleLink' href="network/events/physicsEvents.html">physics events, stabilization etc.</a><br />
<a class='exampleLink' href="network/events/renderEvents.html">rendering events, use to draw custom items on the canvas.</a><br />
<h3>dynamic data - dot language</h3>
<a class='exampleLink' href="network/data/dotLanguage/dotEdgeStyles.html">DOT edge styles</a><br />
<a class='exampleLink' href="network/data/dotLanguage/dotLanguage.html">DOT Language</a><br />
<a class='exampleLink' href="network/data/dotLanguage/dotPlayground.html">DOT language playground</a><br />
<h3>dynamic data</h3>
<a class='exampleLink' href="network/data/datasets.html">dataset for dynamic data</a><br />
<a class='exampleLink' href="network/data/dynamicData.html">dynamic data, playground</a><br />
<a class='exampleLink' href="network/data/importingFromGephi.html">importing data from gephi</a><br />
<a class='exampleLink' href="network/data/scalingCustom.html">scaling the nodes with the value.</a><br />
<a class='exampleLink' href="network/data/scalingNodesEdges.html">scaling the nodes and edges with the value.</a><br />
<a class='exampleLink' href="network/data/scalingNodesEdgesLabels.html">scaling the nodes, edges and labels with the value.</a><br />
<h3>animation</h3>
<a class='exampleLink' href="network/other/animationShowcase.html">animation showcase</a><br />
<h3>clustering</h3>
<a class='exampleLink' href="network/other/changingClusteredEdgesNodes.html">changing clustered edges nodes</a><br />
<a class='exampleLink' href="network/other/clustering.html">clustering possibilities</a><br />
<a class='exampleLink' href="network/other/clusteringByZoom.html">clustering by zoom</a><br />
<a class='exampleLink' href="network/other/clustersOfclusters.html">clusters of clusters</a><br />
<h3>dynamic configuration interface</h3>
<a class='exampleLink' href="network/other/configuration.html">dynamic configuration</a><br />
<h3>physics</h3>
<a class='exampleLink' href="network/physics/physicsConfiguration.html">physics configuration</a><br />
<h3>data manipulation interface</h3>
<a class='exampleLink' href="network/other/manipulation.html">manipulation interface and localization</a><br />
<a class='exampleLink' href="network/other/manipulationEditEdgeNoDrag.html">manipulation edit edge no drag</a><br />
<h3>navigation buttons</h3>
<a class='exampleLink' href="network/other/navigation.html">navigation buttons and keyboard shortcuts</a><br />
<h3>misc</h3>
<a class='exampleLink' href="network/other/chosen.html">chosen</a><br />
<a class='exampleLink' href="network/other/cursorChange.html">cursor change</a><br />
<a class='exampleLink' href="network/other/onLoadAnimation.html">onLoad animation</a><br />
<a class='exampleLink' href="network/other/performance.html">performance test with scale free network</a><br />
<a class='exampleLink' href="network/other/saveAndLoad.html">save and load</a><br />
<h3>example applications</h3>
<a class='exampleLink' href="network/exampleApplications/disassemblerExample.html">disassembler example</a><br />
<a class='exampleLink' href="network/exampleApplications/lesMiserables.html">les miserables cast</a><br />
<a class='exampleLink' href="network/exampleApplications/loadingBar.html">loading bar during stabilization</a><br />
<a class='exampleLink' href="network/exampleApplications/neighbourhoodHighlight.html">neighbourhood highlight</a><br />
<a class='exampleLink' href="network/exampleApplications/nodeLegend.html">using nodes as a legend</a><br />
<a class='exampleLink' href="network/exampleApplications/worldCupPerformance.html">performance test with the worldcup data</a><br />
</div>
</body>
</html>