Skip to main content

Concentric Area

Here the radius of the inner circle is the smaller value, the radius of the larger circle is the larger value, and the color of the larger circle indicates which of the two values are larger.

This compares the forward and reverse weights for links at the initial timepoint.


{
    "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": [-14, 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"},


            "scales": [
                {
                    "name": "area",
                    "type": "sqrt",
                    "domain": [0, 14],

                    "rangeExpressions": ["0", "bounds.width * bounds.height"]
                }
            ],

            "vis": [

                {
                    "entries": "entry.data",


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

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

                        "area": {"expression": "max(datum.weights[0].weight, datum.weights[0].reverse_weight)", "scale": "area"},

                        "fill": {"expression": "(datum.weights[0].weight < datum.weights[0].reverse_weight) ? '#f98656' : '#4a97c9' "  }

                        "stroke": "none"
                    }

                },

                {
                    "entries": "entry.data",

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

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

                        "area": {"expression": "min(datum.weights[0].weight, datum.weights[0].reverse_weight)", "scale": "area"},

                      "fill": "grey",
                        "stroke": "none"
                    }


                }

            ]
        }
    ]
}