netjsongraph.js

Leverage the power of d3.js to visualize network topology using the NetJSON NetworkGraph format.

Build powerful and interoperable visualizations without losing flexibility!

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

Examples:

Install

# 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 NetworkGraph metadata or not, defaults to true
- defaultStyle: whether to use the default style or not, defaults to true
- scaleExtent: see d3 Zoom scaleExtent, defaults to [0.25, 5]
- charge: see d3 Zoom charge, defaults to -130
- linkDistance: see d3 Zoom linkDistance, defaults to 50,
- linkStrength: see d3 Zoom linkStrength, defaults to 0.2,
- friction: see d3 Zoom friction, defaults to 0.9
- chargeDistance: see d3 Zoom chargeDistance, defaults to Infinity
- theta: see d3 Zoom theta, defaults to 0.8
- gravity: see d3 Zoom 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:

<!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:

<!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:

<!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.

mwarning / netjsongraph.js