Skip to main content

Intro

NetPanorama is a declarative language for defining visualizations of network datasets.

The easiest way to get started using NetPanorama is to use the interactive online editor. This has auto-completion, and tooltips providing documentation.

Specifications are broken down into a series of blocks. The tutorial will discuss each of these in turn.

Example​

// const MyComponentSource = require("../../editor/public/examples/attribute-layout.json"); // this loads as object, stripping out comments


{

Populate two data arrays by loading JSON files


  "data": [
    {
      "name": "nodes",
      "url": "./data/les-mis-nodes.json"
    },
    {
      "name": "links",
      "url": "./data/les-mis-links.json"
    }
  ],

Construct a network using these data arrays. For each entry in the "links" array, the "source" field is equal to the "id" field of the source node in the "nodes" array. Similarly, the "target" field is equal to the "id" field of the target node in the "nodes" array. After creating the network, the degree is calculated for each node.


  "networks": [
    {
      "name": "le-mis-network",
      "nodes": "nodes",
      "links": "links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],
      "metrics": [
        { "metric": "degree" }
      ]
    }
  ],

Assign each node a position by applying a force-directed layout


  "layouts": [
    {
      "name": "le-mis-layout",
      "network": "le-mis-network",
      "type": "d3-force"
    }
  ],


  "scales": [

Define a linear scale called "radius" that maps values to a number


    {
      "name": "radius",
      "type": "linear",
      "range": [1, 500],
      "domain": [0, 40]
    },

Define a color scale called "color" that maps values to different levels of red


    {
      "name": "color",
      "type": "linear",
      "scheme": "reds",
      "domain": [0, 40]
    }


  ],


  "vis": [

Represent each node by a circle, with position determined by the force-directed layout, size determined by the radius scale and the node degree, and fill color determined by the color scale and the node degree.


   {
      "entries": "le-mis-network.nodes",
      "layout": "le-mis-layout",
      "mark": {
        "type": "circle",
        "area": { "field": "degree", "scale": "radius" },
        "fill": { "field": "degree", "scale": "color" }
      }
    }

Represent each link by a line joining the source and target nodes (assuming that they are positioned using the force-directed "le-mis-layout" layout)


    {
      "entries": "le-mis-network.links",
      "layout": "le-mis-layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
      }
    }


  ]
}