Slope Glyphs

The bar chart is cluttered, and disrupts the grid structure of the matrix.

Let's replace the pair of bars with a line-chart/slope chart.

Note that this is a different encoding to the gestalt-lines: here the y-positions directly encode weights, whereas in the gestaltlines the horizontal enter of each line encoded the measurements, and the angle encoded the degree fo asymmetry in the two directions for weights.

{ "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": "redyellowgreen", // or redblue "domain": [-14, 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"] }, { "name": "y2", "type": "linear", "domain": [0, 16] "rangeExpressions": ["bounds.height", "0"] } ], "vis": [ { "entries": "entry.data", "mark": { "type": "rule", "x": {"expression": "bounds.width/4"}, "x2": {"expression": "3 * bounds.width/4"}, "y": {"field": "weights[0].weight", "scale": "y2"}, "y2": {"field": "weights[0].reverse_weight", "scale": "y2"}, "stroke": {"expression": "datum.weights[0].weight - datum.weights[0].reverse_weight", "scale": "color" }, "tooltip": {"field": "weights[0].weight"} } }, { "entries": "entry.data", "mark": { "type": "circle", "x": {"expression": "bounds.width/4"}, "y": {"field": "weights[0].weight", "scale": "y2"}, "fill": "lightgrey", "area": 40, } }, { "entries": "entry.data", "mark": { "type": "circle", "x": {"expression": "3 * bounds.width/4"}, "y": {"field": "weights[0].reverse_weight", "scale": "y2"}, "fill": "lightgrey", "area": 40, } } ] } ] }