Skip to main content

Size Glyphs

Rather than rotating or translating equally-sized shapes to avoid overlaps, we can instead use different sizes of concentric shapes.

The type can be changed from circle to square or diamond.

This requires only a small change to the specification.


{

    "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 color.


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

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"},

Define scale for the area of each shape.

Defining it here, rather than at the top-level, allows it to be scaled relative to the width of the table cell.


            "scales": [
                {
                "name": "area",
                "type": "ordinal",
                "range": [1, 4, 9, 16 ],
                "rangeMapFunction": "datum * bounds.width * bounds.height / 20",
                "domain": ["B", "Y", "G", "P"]
            }
            ],

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 circle, scaled and colored based on the link type.


                    "mark": {
                        "type": "circle",

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

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

                        "fill": "none",

                        "stroke": {"scale": "color", "field": "type"},
                        "strokeWidth": 10
                }

            ]
        }
    ]

}