Assets/vega.dsm.matrix.json
|
{ "data": [ { "name": "nodes", "transform": [{"type": "formula", "as": "order", "expr": "datum.index"}], "values": [] }, { "name": "edges", "transform": [ { "type": "lookup", "from": "nodes", "key": "index", "fields": ["source"], "as": ["sourceNode"] }, { "type": "lookup", "from": "nodes", "key": "index", "fields": ["target"], "as": ["targetNode"] }, { "type": "formula", "as": "sourceCluster", "expr": "datum.sourceNode.group" }, { "type": "formula", "as": "targetCluster", "expr": "datum.targetNode.group" }, { "type": "formula", "as": "clusterKey", "expr": "datum.sourceCluster * groupBase + datum.targetCluster" }, { "type": "formula", "as": "clusterLabel", "expr": "toString(datum.sourceCluster) + '-' + toString(datum.targetCluster)" } ], "values": [] }, { "name": "children", "transform": [ { "type": "filter", "expr": "datum.sourceNode.index === rowClick.index || datum.targetNode.index === columnClick.index" }, { "type": "formula", "as": "targetNodeName", "expr": "datum.targetNode.name" }, { "type": "formula", "as": "sourceNodeName", "expr": "datum.sourceNode.name" } ], "source": "edges" }, { "name": "groupStats", "source": "nodes", "transform": [ { "type": "aggregate", "ops": ["max"], "fields": ["group"], "as": ["groupMax"] } ] }, { "name": "pairs", "source": "edges", "transform": [{"type": "aggregate", "groupby": ["clusterKey"]}] } ], "marks": [ { "from": {"data": "nodes"}, "type": "rect", "encode": { "update": { "fill": {"value": "#cccccc"}, "fillOpacity": {"value": 0.45}, "height": {"band": 1, "offset": -1, "scale": "position"}, "width": {"band": 1, "offset": -1, "scale": "position"}, "x": {"scale": "position", "field": "order"}, "y": {"scale": "position", "field": "order"} } }, "zindex": 0 }, { "from": {"data": "edges"}, "type": "rect", "encode": { "update": { "fill": [ { "test": "rowClick && rowClick.index != null && datum.sourceNode.index === rowClick.index", "value": "red" }, { "test": "columnClick && columnClick.index != null && datum.targetNode.index === columnClick.index", "value": "red" }, {"scale": "color", "field": "clusterKey"} ], "height": {"band": 1, "offset": -1, "scale": "position"}, "width": {"band": 1, "offset": -1, "scale": "position"}, "x": {"mult": {"signal": "cellSize"}, "field": "y"}, "y": {"mult": {"signal": "cellSize"}, "field": "x"} } }, "zindex": 10 }, { "from": {"data": "nodes"}, "type": "rect", "encode": { "update": { "fill": [ { "test": "rowClick && rowClick.index != null && datum.index === rowClick.index", "value": "lightsteelblue" } ], "fillOpacity": {"value": 0.3}, "height": {"band": 1, "scale": "position"}, "width": {"signal": "width"}, "x": {"value": 0}, "y": {"scale": "position", "field": "order"} } }, "name": "rowHighlight" }, { "from": {"data": "nodes"}, "type": "rect", "encode": { "update": { "fill": [ { "test": "rowClick && rowClick.index != null && indata('children', 'target', datum.index)", "value": "lightsteelblue" } ], "fillOpacity": {"value": 0.3}, "height": {"signal": "height"}, "width": {"band": 1, "scale": "position"}, "x": {"scale": "position", "field": "order"}, "y": {"value": 0} } }, "name": "colHighlight" }, { "from": {"data": "nodes"}, "type": "rect", "encode": { "update": { "fill": [ { "test": "columnClick && columnClick.index != null && datum.index === columnClick.index", "value": "lightsteelblue" } ], "fillOpacity": {"value": 0.3}, "height": {"signal": "width"}, "width": {"band": 1, "scale": "position"}, "x": {"scale": "position", "field": "order"}, "y": {"value": 0} } }, "name": "colHighlightOnColumnClick" }, { "from": {"data": "nodes"}, "type": "rect", "encode": { "update": { "fill": [ { "test": "columnClick && indata('children', 'source', datum.index)", "value": "lightsteelblue" } ], "fillOpacity": {"value": 0.3}, "height": {"band": 1, "scale": "position"}, "width": {"signal": "height"}, "x": {"value": 0}, "y": {"scale": "position", "field": "order"} } }, "name": "rowHighlightOnColumnClick" }, { "from": {"data": "nodes"}, "type": "text", "encode": { "update": { "align": {"value": "left"}, "angle": {"value": -90}, "baseline": {"value": "middle"}, "fill": [ { "test": "rowClick && indata('children', 'targetNodeName', datum.name)", "value": "red" }, {"value": "black"} ], "fontSize": {"value": 10}, "text": {"field": "name"}, "x": {"band": 0.5, "scale": "position", "field": "order"}, "y": {"offset": -2} } }, "name": "columns" }, { "from": {"data": "nodes"}, "type": "text", "encode": { "update": { "align": {"value": "right"}, "baseline": {"value": "middle"}, "fill": [ {"test": "datum === rowClick", "value": "steelblue"}, { "test": "columnClick && indata('children', 'sourceNodeName', datum.name)", "value": "red" }, {"value": "black"} ], "fontSize": {"value": 10}, "text": {"field": "name"}, "x": {"offset": -2}, "y": {"band": 0.5, "scale": "position", "field": "order"} } }, "name": "rows" } ], "scales": [ { "domain": {"data": "nodes", "field": "order", "sort": true}, "name": "position", "type": "band", "range": {"step": {"signal": "cellSize"}} }, { "name": "color", "type": "ordinal", "domain": {"data": "edges", "field": "clusterKey", "sort": true}, "range": { "scheme": {"signal": "colorSchemeName"}, "count": {"signal": "schemeCount"} } } ], "signals": [ { "name": "columnClick", "on": [ { "events": {"markname": "columns", "type": "mouseover"}, "update": "datum" }, {"events": "mouseout", "update": "{}"} ], "value": {} }, { "name": "rowClick", "on": [ { "events": {"markname": "rows", "type": "mouseover"}, "update": "datum" }, {"events": "mouseout", "update": "{}"} ], "value": {} }, {"name": "pairsCount", "update": "length(data('pairs'))"}, { "name": "colorSchemeName", "update": "pairsCount <= 10 ? 'tableau10' : (pairsCount <= 12 ? 'set3' : 'category20')" }, {"name": "schemeCount", "update": "min(pairsCount, 20)"}, {"name": "groupBase", "update": "data('groupStats')[0].groupMax + 1"}, {"name": "cellSize", "value": 10}, {"name": "count", "update": "length(data('nodes'))"}, {"name": "width", "update": "span(range('position'))"}, {"name": "height", "update": "width"} ], "legends": [ { "fill": "color", "title": "Cluster pairs (src→dst)", "encode": { "labels": { "update": { "text": { "signal": "floor(datum.value / groupBase) + '-' + (datum.value % groupBase)" } } } } } ], "$schema": "https://vega.github.io/schema/vega/v6.json", "description": "A re-orderable DSM matrix.", "height": 1000, "padding": 2, "width": 1000 } |