0

netjsongraph.js

NetJSON NetworkGraph visualizer based on d3.js

Official Site
Github repo
Main metrics

Github stars Tracking Chart

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:

  1. url (required, string): URL to fetch the JSON data from
  2. 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

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

License

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

Overview

Name With Owneropenwisp/netjsongraph.js
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 4)
Platform
License:BSD 3-Clause "New" or "Revised" License
Release Count3
Last Release Namev0.1.3 (Posted on 2017-08-19 10:29:27)
First Release Name0.1 (Posted on 2015-08-14 17:10:59)
Created At2015-08-13 16:42:02
Pushed At2024-05-01 12:44:19
Last Commit At2024-03-26 08:48:48
Stargazers Count263
Watchers Count22
Fork Count77
Commits Count304
Has Issues Enabled
Issues Count100
Issue Open Count12
Pull Requests Count94
Pull Requests Open Count14
Pull Requests Close Count54
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top