Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → openwisp → Netjsongraph.js

openwisp / Netjsongraph.js

Licence: bsd-3-clause

NetJSON NetworkGraph visualizer based on d3.js

Programming Languages

javascript

184084 projects - #8 most used programming language

Labels

networking d3 mesh wireless mesh-networks

Projects that are alternatives of or similar to Netjsongraph.js

Django Netjsongraph

Network Topology Visualizer & Network Topology Collector

Stars: ✭ 131 (-39.35%)

Mutual labels: mesh, networking, mesh-networks, d3

Cjdns

An encrypted IPv6 network using public-key cryptography for address allocation and a distributed hash table for routing.

Stars: ✭ 4,766 (+2106.48%)

Mutual labels: mesh, networking, mesh-networks

Ansible Openwisp2

Ansible role that installs and upgrades OpenWISP.

Stars: ✭ 403 (+86.57%)

Mutual labels: mesh, wireless, mesh-networks

Drago

A flexible configuration manager for Wireguard networks

Stars: ✭ 204 (-5.56%)

Mutual labels: networking, mesh-networks

Spruce Network

Decentralized peer-to-peer mesh network.

Stars: ✭ 61 (-71.76%)

Mutual labels: mesh, mesh-networks

Openthread

OpenThread released by Google is an open-source implementation of the Thread networking protocol

Stars: ✭ 2,643 (+1123.61%)

Mutual labels: wireless, mesh-networks

Wifimeshraspberrypi

Workshop to create a sensor application over a WiFi Mesh network

Stars: ✭ 99 (-54.17%)

Mutual labels: mesh, mesh-networks

Quantumgate

QuantumGate is a peer-to-peer (P2P) communications protocol, library and API written in C++.

Stars: ✭ 62 (-71.3%)

Mutual labels: networking, mesh-networks

Ansible Openwisp2 Imagegenerator

Automatically build several openwisp2 firmware images for different organizations while keeping track of their differences

Stars: ✭ 122 (-43.52%)

Mutual labels: networking, wireless

Medium

Independent telecommunication environment

Stars: ✭ 171 (-20.83%)

Mutual labels: mesh, networking

Netjson

NetJSON is a data interchange format for encoding the basic building blocks of networks.

Stars: ✭ 171 (-20.83%)

Mutual labels: networking, wireless

Prototype Cjdns Pi

Prototype system for mesh networks on single board computers

Stars: ✭ 205 (-5.09%)

Mutual labels: mesh, mesh-networks

Yggdrasil Go

An experiment in scalable routing as an encrypted IPv6 overlay network

Stars: ✭ 1,007 (+366.2%)

Mutual labels: mesh, mesh-networks

Lime Packages

OpenWrt packages composing LibreMesh meta-firmware for wireless mesh networking

Stars: ✭ 204 (-5.56%)

Mutual labels: mesh, mesh-networks

Flatend

Quickly build microservices using p2p networking in NodeJS/Go.

Stars: ✭ 600 (+177.78%)

Mutual labels: networking, mesh-networks

Ot Rtos

OpenThread RTOS, an integration of OpenThread, LwIP, and FreeRTOS.

Stars: ✭ 90 (-58.33%)

Mutual labels: wireless, mesh-networks

Simple Vpn

A simple VPN allowing mesh-like communication between nodes, over websockets

Stars: ✭ 201 (-6.94%)

Mutual labels: mesh, networking

Wesher

wireguard overlay mesh network manager

Stars: ✭ 461 (+113.43%)

Mutual labels: networking, mesh-networks

Wireguard Private Networking

Build your own multi server private network using wireguard and ansible

Stars: ✭ 124 (-42.59%)

Mutual labels: mesh, mesh-networks

Inlets Pro

Secure TCP and HTTP tunnels that work anywhere

Stars: ✭ 179 (-17.13%)

Mutual labels: mesh, networking

View All Similar Projects ➔

netjsongraph.js

.. image:: https://raw.githubusercontent.com/interop-dev/netjsongraph.js/master/docs/netjsongraph-default.png

Leverage the power of d3.js <http://d3js.org/>__ to visualize network topology using the NetJSON <http://netjson.org>__ NetworkGraph format.

Build powerful and interoperable visualizations without losing flexibility!

This library is still in early stages, feedback and contributions are very welcome.

Examples:

default style <https://nodeshot.org/netjsongraph/examples/index.html>__
dark green example <https://nodeshot.org/netjsongraph/examples/dark.html>__
light green example <https://nodeshot.org/netjsongraph/examples/green.html>__
custom attributes example <https://nodeshot.org/netjsongraph/examples/custom-attributes.html>__
NetJSON NetworkCollection example <https://nodeshot.org/netjsongraph/examples/network-collection.html>__
callbacks example <https://nodeshot.org/netjsongraph/examples/callbacks.html>__

Install

.. code-block:: bash

# install via yarn
yarn add netjsongraph.js --save

# or install via npm
npm install netjsongraph.js --save

Arguments

netjsongraph.js accepts two arguments:

url (required, string): URL to fetch the JSON data from
options (optional, object): custom options described below
- el: container element, defaults to "body"
- metadata: whether to show NetJSON <http://netjson.org>__ NetworkGraph metadata or not, defaults to true
- defaultStyle: whether to use the default style or not, defaults to true
- scaleExtent: see d3 Zoom scaleExtent <https://github.com/mbostock/d3/wiki/Zoom-Behavior#scaleExtent>__, defaults to [0.25, 5]
- charge: see d3 Zoom charge <https://github.com/mbostock/d3/wiki/Force-Layout#charge>__, defaults to -130
- linkDistance: see d3 Zoom linkDistance <https://github.com/mbostock/d3/wiki/Force-Layout#linkDistance>__, defaults to 50,
- linkStrength: see d3 Zoom linkStrength <https://github.com/mbostock/d3/wiki/Force-Layout#linkStrength>__, defaults to 0.2,
- friction: see d3 Zoom friction <https://github.com/mbostock/d3/wiki/Force-Layout#friction>__, defaults to 0.9
- chargeDistance: see d3 Zoom chargeDistance <https://github.com/mbostock/d3/wiki/Force-Layout#chargeDistance>__, defaults to Infinity
- theta: see d3 Zoom theta <https://github.com/mbostock/d3/wiki/Force-Layout#theta>__, defaults to 0.8
- gravity: see d3 Zoom gravity <https://github.com/mbostock/d3/wiki/Force-Layout#gravity>__, defaults to 0.1
- nodeClassProperty: if specified, nodes will have an additional CSS class that depends on the value of a specific NetJSON node property
- linkClassProperty: if specified, links will have an additional CSS class that depends on the value of a specific NetJSON link property
- circleRadius: radius of circles (nodes) in pixel, defalts to 8
- labelDx: SVG dx (distance on x axis) attribute of node labels in graph 0
- labelDy: SVG dy (distance on y axis) attribute of node labels in graph -1.3em
- onInit: callback function executed on initialization, params: url and options
- onLoad: callback function executed after data has been loaded, params: url and options
- onEnd: callback function executed when initial animation is complete, params: url and options
- linkDistanceFunc: by default high density areas have longer links, you can tweak this behaviour if you need
- redraw: function called when panning and zooming, you can tweak it if you need
- prepareData: function used to convert NetJSON NetworkGraph to the javascript data structured used internally, you won't need to modify it in most cases
- onClickNode: function called when a node is clicked, you can customize it if you need
- onClickLink: function called when a link is clicked, you can customize it if you need

Example Usage

Very basic:

.. code-block:: html

<!DOCTYPE html>
<html>
    <head>
        <link href="src/netjsongraph.css" rel="stylesheet">
        <!-- theme can be easily customized via css -->
        <link href="src/netjsongraph-theme.css" rel="stylesheet">
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="src/netjsongraph.js"></script>
        <script>d3.netJsonGraph("netjson.json");</script>
    </body>
</html>

Show the graph in a container:

.. code-block:: html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="src/netjsongraph.css" rel="stylesheet">
    <!-- theme can be easily customized via css -->
    <link href="src/netjsongraph-theme.css" rel="stylesheet">
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            font-size: 13px;
        }

        #network-graph{
            width: 1000px;
            height: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="network-graph"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="src/netjsongraph.js"></script>
    <script>
        d3.netJsonGraph("netjson.json", {
            el: "#network-graph"
        });
    </script>
</body>
</html>

Styling

The library comes with a default theme and a default style (color) for nodes, you can disable this by passing the option defaultStyle: false and define your own CSS rules.

Here's a fulle example of how to show green links and dark green nodes:

.. code-block:: html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="src/netjsongraph.css" rel="stylesheet">
    <!-- custom theme example -->
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            font-size: 13px;
        }

        .njg-overlay{
            width: auto;
            height: auto;
            min-width: 200px;
            max-width: 400px;
            border: 1px solid #000;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.7);
            top: 10px;
            right: 10px;
            padding: 0 15px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #fff
        }

        .njg-node {
            fill: #008000;
            fill-opacity: 0.8;
            stroke: #008000;
            stroke-width: 1px;
            cursor: pointer;
        }
        .njg-node:hover,
        .njg-node.njg-open{
            fill-opacity: 1;
        }

        .njg-link {
            stroke: #00ff00;
            stroke-width: 2;
            stroke-opacity: .5;
            cursor: pointer;
        }
        .njg-link:hover,
        .njg-link.njg-open{
            stroke-width: 3;
            stroke-opacity: 1
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
    <script src="src/netjsongraph.js"></script>
    <script>d3.netJsonGraph("netjson.json", { defaultStyle: false });</script>
</body>
</html>

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

BSD 3-Clause License <https://github.com/interop-dev/netjsongraph.js/blob/master/LICENSE>__.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 216

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (44) 🔗