Skip to main content

Concentric Colors

Finally, we adopted an inner and outer squares division where the edge weight from each graph is mapped to the color density of the corresponding region. We considered this approach useful since it did not obscure the matrix's grid structure. It also allowed us to use brightness alone to encode weight since it was possible to differentiate graphs based on the spatial encoding (inner vs. outer)—freeing up hue to encode other data attributes. As a natural outcome of this encoding, the amount of change is mapped to the contrast between inner and outer regions of a cell, easily enabling viewers to differentiate regions with high and low change.


{
    "x": 300,
    "y": 300,

    "width": 1000,
    "height": 1000,

    "data": [
        {
            "name": "data",
            "url": "/data/fraternity_network.json"
        }
    ],

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


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

    "tables": [
        {
            "name": "adjacencyMatrix",
            "data": "network.links",
            "rowOrder": {
                "order": "nodeOrder",
                "field": "source" //.id is implicit
            },
            "colOrder": {
                "order": "nodeOrder",
                "field": "target" // .id is implicit
            }
        }
    ],

    "scales": [
        {
      "name": "color",
      "type": "linear",
      "scheme": "blues",
      "domain": [0, 14]
    },

    {
      "name": "y",
      "type": "linear",
      "domain": [0, 14],
      "range": [10, 40]
    },

    ],


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

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

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



            "vis": [

                {
                    "entries": "entry.data",

                     "mark": {
                        "type": "square",

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

                        "area": {"expression": "(bounds.width * bounds.height)"},

                        "fill": {"field": "weights[0].weight", "scale": "color"},
                        "stroke": "none"
                    }
                },
                {
                    "entries": "entry.data",

                     "mark": {
                        "type": "square",

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

                        "area": {"expression": "(bounds.width * bounds.height) / 4"},

                        "fill": {"field": "weights[0].reverse_weight", "scale": "color"},
                        "stroke": "none"
                    }
                }

            ]
        }
    ]
}