Skip to main content

Bar-Chart Glyphs

Next, we examined color-coded bar charts shown within the cell to show the absolute weight from each graph. We eliminated this approach due to the horizontal line patterns it produced and also complicated focusing on weights from one graph at a time.


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


    ],


    "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": "y",
                    "type": "linear",
                    "domain": [0, 16]
                    "rangeExpressions": ["0","bounds.height"]
                }
            ],



            "vis": [

                {
                    "entries": "entry.data",

                     "mark": {
                        "type": "rect",

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

                        "y2": {"expression": "+bounds.height"},
                        "height": {"field": "weights[0].weight", "scale": "y"} // {"expression": "bounds.width/2"},

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

                        "tooltip": {"field": "weights[0].weight"}
                    }
                },


    {
                    "entries": "entry.data",

                     "mark": {
                        "type": "rect",

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

                        "y2": {"expression": "+bounds.height"},
                        "height": {"field": "weights[0].reverse_weight", "scale": "y"} // {"expression": "bounds.width/2"},

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


            ]
        }
    ]
}