Skip to main content

Orientation Glyphs

One option is to represent each link type by a colored bar, and to separate these by rotation, so that link type is redundantly encoded by orientation and color.


{

    "x": 50,
    "y": 50,

Construct the network from a hard-coded link-table.


  "data": [
    {
      "name": "links",
      "values": [
            {"source": 0, "target": 5, "type": "B"},
            {"source": 1, "target": 4, "type": "B"},
            {"source": 3, "target": 2, "type": "B"},

            {"source": 1, "target": 0, "type": "Y"},
            {"source": 1, "target": 4, "type": "Y"},
            {"source": 3, "target": 2, "type": "Y"},
            {"source": 4, "target": 0, "type": "Y"},
            {"source": 5, "target": 4, "type": "Y"},

            {"source": 1, "target": 0, "type": "G"},
            {"source": 1, "target": 3, "type": "G"},
            {"source": 3, "target": 2, "type": "G"},
            {"source": 3, "target": 5, "type": "G"},
            {"source": 5, "target": 4, "type": "G"},

            {"source": 3, "target": 2, "type": "P"},
            {"source": 3, "target": 5, "type": "P"},
            {"source": 5, "target": 1, "type": "P"},
            {"source": 5, "target": 4, "type": "P"}
        ]
    }
  ],

  "networks": [
    {
      "name": "network",
      "links": "links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id", "target" ],

    }
  ],


Define an ordering that orders the nodes based on their id...


   "orderings": [
        {
            "name": "nodeOrder",
            "data": "network.nodes",
            "orderBy": [{"field": "id"}],
            "allowTies": false
        }
    ],

...and use this ordering to create a table.


    "tables": [
        {
            "name": "adjacencyMatrix",
            "data": "network.links",
            "rowOrder": { "order": "nodeOrder",  "field": "source" },
            "colOrder": { "order": "nodeOrder", "field": "target" },
            "symmetric": true
        }
    ],

Define scale to map from edge type to angle and color.


    "scales": [
        {
            "name": "color",
            "type": "ordinal",
            "domain": ["B", "Y", "G", "P"]
            "range": ["#0000ff","#ffc300","#4daf4a","#ff00ff"],
        },

        {
            "name": "angle",
            "type": "ordinal",
            "domain": ["B", "Y", "G", "P"]
            "range": [315, 45, 90, 0 ],
        }
    ],

This block defines what we want to draw for each element of the table.


     "vis": [
        {
            "table": "adjacencyMatrix",

Label the rows and columns...


             "rowLabels": { "field": "source.id", "align": "right", "dx": -10  },
             "colLabels": { "field": "target.id", "dx": 20  },

...and draw lines between each cell.


            "rowLines": {"stroke": "black"},
            "colLines": {"stroke": "black"},

This block defines what to draw for each data element inside the parent block:

i.e., for each edge in this table cell.


            "vis": [
                {
                    "entries": "entry.data",

We draw a bar, sized relative to the table cell, with a color and rotation determined by the link type.


                    "mark": {
                        "type": "path",
                        "path": "M-75,-25 L75,-25 L75,25 L-75,25 Z",

                        "angle": { "scale": "angle", "field": "type" },

                        "y": {"expression": "bounds.height/2"},
                        "x": {"expression": "bounds.width/2"},

                        "width":  {"expression": "bounds.width/4"},
                        "height": {"expression": "bounds.height"},
                        "stroke": "white",

                        "fill": {"scale": "color", "field": "type"},
                    }
                }

            ]
        }
    ]

}