Calendar glyphs

Here each entry in the adjacency matrix contains a glyph with one square per week, colored according to the weight at that 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", "domain": [0, 16] "scheme": "blues" }, { "name": "t", "type": "linear", "range": [0, 13], "domain": [0, 13] } ], "vis": [ { "table": "adjacencyMatrix", "rowLabels": { "field": "source.id", "align": "right", "dx": -10 }, "colLabels": { "field": "target.id", "dx": 20 }, "rowLines": {"stroke": "black"}, "colLines": {"stroke": "black"}, /* "data": [ { "name": "weights", "source": "entry.data.weights", "transform": [ {"type": "addIndex"} ] } ], */ "layouts": [ { "name": "innerLayout", "pattern": "row-by-row", "data": "entry.data.weights", "scale": "t", /* TODO: make not required */ "field": "time" // the field we aggregated on (i.e., decade) "numRows": 4, "numCols": 4 // if not explicitly set, each cell will scale differently } ], "vis": [ { "entries": "entry.data.weights", "layout": "innerLayout", "mark": { "type": "rect", // should be able to change to lie "area": 20, "width": {"expression": "bounds.width/4"}, "height": {"expression": "bounds.height/4"}, "fill": {"field": "weight", "scale": "color"} "tooltip": {"expression": "datum.weight + ' at t=' + datum.time"} } }, } ] } ] }