<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.23.0"></script> </head> <body> <div id="vis"/> <script> const spec = { "usermeta": { "preamble": "This chart was created by https://microdata.no. Edit the `config` section to alter appearance." }, "axes": [ { "orient": "bottom", "labelAngle": 0, "scale": "x", "encode": { "labels": { "update": {"text": {"scale": "stackNames", "field": "value"}} } } }, {"orient": "left", "scale": "y"} ], "width": 500, "scales": [ { "name": "x", "type": "band", "range": "width", "domain": ["from", "to"], "paddingInner": 0.95 }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "nodes", "field": "y1"} }, { "name": "color", "type": "ordinal", "range": "category", "domain": {"data": "sankeyData", "fields": ["from", "to"]} }, { "name": "stackNames", "type": "ordinal", "range": [ "owned_vehicle_green_per_household20", "owned_vehicle_green_per_household22" ], "domain": ["from", "to"] } ], "$schema": "https://vega.github.io/schema/vega/v5.json", "marks": [ { "type": "path", "name": "edgeMark", "from": {"data": "edges"}, "clip": true, "encode": { "update": { "stroke": [{"scale": "color", "field": "from"}], "strokeWidth": {"field": "strokeWidth"}, "path": {"field": "path"}, "strokeOpacity": { "signal": "(groupHover.from== datum.from|| groupHover.to== datum.to) ? 0.9 : 0.3" }, "zindex": { "signal": "(groupHover.from== datum.from|| groupHover.to== datum.to) ? 1 : 0" }, "tooltip": { "signal": "datum.from+ ' → ' + datum.to+ ' ' + format(datum.size, ',.0f') + ' (' + format(datum.percentage, '.1%') + ')'" } }, "hover": {"strokeOpacity": {"value": 1}} } }, { "type": "rect", "name": "groupMark", "from": {"data": "groups"}, "encode": { "enter": { "fill": {"scale": "color", "field": "grpId"}, "width": {"scale": "x", "band": 1} }, "update": { "x": {"scale": "x", "field": "stack"}, "y": {"field": "scaledY0"}, "y2": {"field": "scaledY1"}, "tooltip": { "signal": "datum.grpId + ' ' + format(datum.total, ',.0f') + ' (' + format(datum.percentage, '.1%') + ')'" } }, "hover": {"fillOpacity": {"value": 1}} } }, { "type": "text", "from": {"data": "groups"}, "interactive": false, "encode": { "update": { "x": { "signal": "scale('x', datum.stack) + (datum.rightLabel ? bandwidth('x') + 8 : -8)" }, "yc": {"signal": "(datum.scaledY0 + datum.scaledY1)/2"}, "align": {"signal": "datum.rightLabel ? 'left' : 'right'"}, "baseline": {"value": "middle"}, "text": { "signal": "abs(datum.scaledY0-datum.scaledY1) > 13 ? datum.grpId : ''" } } } } ], "signals": [ { "name": "groupHover", "value": {}, "on": [ { "events": "@groupMark:mouseover", "update": "{from:datum.stack=='from' && datum.grpId, to:datum.stack=='to' && datum.grpId}" }, {"events": "mouseout", "update": "{}"} ] } ], "height": 950, "data": [ { "name": "sankeyData", "values": { "aggregations": [ { "key": {"from": "0", "to": "0"}, "doc_count": 17467, "from": "0", "to": "0", "size": 17467 }, { "key": {"from": "0", "to": "1"}, "doc_count": 25325, "from": "0", "to": "1", "size": 25325 }, { "key": {"from": "0", "to": "2"}, "doc_count": 43481, "from": "0", "to": "2", "size": 43481 }, { "key": {"from": "0", "to": "3"}, "doc_count": 22055, "from": "0", "to": "3", "size": 22055 }, { "key": {"from": "0", "to": "4"}, "doc_count": 27497, "from": "0", "to": "4", "size": 27497 }, { "key": {"from": "0", "to": "5"}, "doc_count": 9021, "from": "0", "to": "5", "size": 9021 }, { "key": {"from": "0", "to": "6"}, "doc_count": 2137, "from": "0", "to": "6", "size": 2137 }, { "key": {"from": "0", "to": "7"}, "doc_count": 252, "from": "0", "to": "7", "size": 252 }, { "key": {"from": "0", "to": "8"}, "doc_count": 1364, "from": "0", "to": "8", "size": 1364 }, { "key": {"from": "0", "to": "9"}, "doc_count": 36, "from": "0", "to": "9", "size": 36 }, { "key": {"from": "0", "to": "10"}, "doc_count": 517, "from": "0", "to": "10", "size": 517 }, { "key": {"from": "0", "to": "12"}, "doc_count": 108, "from": "0", "to": "12", "size": 108 }, { "key": {"from": "0", "to": "14"}, "doc_count": 21, "from": "0", "to": "14", "size": 21 }, { "key": {"from": "0", "to": "15"}, "doc_count": 15, "from": "0", "to": "15", "size": 15 }, { "key": {"from": "0", "to": "18"}, "doc_count": 6, "from": "0", "to": "18", "size": 6 }, { "key": {"from": "1", "to": "0"}, "doc_count": 2930, "from": "1", "to": "0", "size": 2930 }, { "key": {"from": "1", "to": "1"}, "doc_count": 18598, "from": "1", "to": "1", "size": 18598 }, { "key": {"from": "1", "to": "2"}, "doc_count": 3219, "from": "1", "to": "2", "size": 3219 }, { "key": {"from": "1", "to": "3"}, "doc_count": 820, "from": "1", "to": "3", "size": 820 }, { "key": {"from": "1", "to": "4"}, "doc_count": 393, "from": "1", "to": "4", "size": 393 }, { "key": {"from": "1", "to": "5"}, "doc_count": 65, "from": "1", "to": "5", "size": 65 }, { "key": {"from": "1", "to": "6"}, "doc_count": 82, "from": "1", "to": "6", "size": 82 }, { "key": {"from": "1", "to": "8"}, "doc_count": 21, "from": "1", "to": "8", "size": 21 }, { "key": {"from": "1", "to": "10"}, "doc_count": 15, "from": "1", "to": "10", "size": 15 }, { "key": {"from": "1", "to": "11"}, "doc_count": 6, "from": "1", "to": "11", "size": 6 }, { "key": {"from": "1", "to": "12"}, "doc_count": 5, "from": "1", "to": "12", "size": 5 }, { "key": {"from": "2", "to": "0"}, "doc_count": 4150, "from": "2", "to": "0", "size": 4150 }, { "key": {"from": "2", "to": "1"}, "doc_count": 2811, "from": "2", "to": "1", "size": 2811 }, { "key": {"from": "2", "to": "2"}, "doc_count": 29663, "from": "2", "to": "2", "size": 29663 }, { "key": {"from": "2", "to": "3"}, "doc_count": 4108, "from": "2", "to": "3", "size": 4108 }, { "key": {"from": "2", "to": "4"}, "doc_count": 2610, "from": "2", "to": "4", "size": 2610 }, { "key": {"from": "2", "to": "5"}, "doc_count": 76, "from": "2", "to": "5", "size": 76 }, { "key": {"from": "2", "to": "6"}, "doc_count": 518, "from": "2", "to": "6", "size": 518 }, { "key": {"from": "2", "to": "7"}, "doc_count": 5, "from": "2", "to": "7", "size": 5 }, { "key": {"from": "2", "to": "8"}, "doc_count": 58, "from": "2", "to": "8", "size": 58 }, { "key": {"from": "2", "to": "9"}, "doc_count": 22, "from": "2", "to": "9", "size": 22 }, { "key": {"from": "2", "to": "10"}, "doc_count": 10, "from": "2", "to": "10", "size": 10 }, { "key": {"from": "2", "to": "12"}, "doc_count": 7, "from": "2", "to": "12", "size": 7 }, { "key": {"from": "3", "to": "0"}, "doc_count": 2784, "from": "3", "to": "0", "size": 2784 }, { "key": {"from": "3", "to": "1"}, "doc_count": 591, "from": "3", "to": "1", "size": 591 }, { "key": {"from": "3", "to": "2"}, "doc_count": 4833, "from": "3", "to": "2", "size": 4833 }, { "key": {"from": "3", "to": "3"}, "doc_count": 13352, "from": "3", "to": "3", "size": 13352 }, { "key": {"from": "3", "to": "4"}, "doc_count": 4798, "from": "3", "to": "4", "size": 4798 }, { "key": {"from": "3", "to": "5"}, "doc_count": 215, "from": "3", "to": "5", "size": 215 }, { "key": {"from": "3", "to": "6"}, "doc_count": 1471, "from": "3", "to": "6", "size": 1471 }, { "key": {"from": "3", "to": "7"}, "doc_count": 9, "from": "3", "to": "7", "size": 9 }, { "key": {"from": "3", "to": "8"}, "doc_count": 627, "from": "3", "to": "8", "size": 627 }, { "key": {"from": "3", "to": "9"}, "doc_count": 31, "from": "3", "to": "9", "size": 31 }, { "key": {"from": "3", "to": "10"}, "doc_count": 25, "from": "3", "to": "10", "size": 25 }, { "key": {"from": "3", "to": "12"}, "doc_count": 24, "from": "3", "to": "12", "size": 24 }, { "key": {"from": "3", "to": "16"}, "doc_count": 6, "from": "3", "to": "16", "size": 6 }, { "key": {"from": "4", "to": "0"}, "doc_count": 3638, "from": "4", "to": "0", "size": 3638 }, { "key": {"from": "4", "to": "1"}, "doc_count": 458, "from": "4", "to": "1", "size": 458 }, { "key": {"from": "4", "to": "2"}, "doc_count": 1502, "from": "4", "to": "2", "size": 1502 }, { "key": {"from": "4", "to": "3"}, "doc_count": 4071, "from": "4", "to": "3", "size": 4071 }, { "key": {"from": "4", "to": "4"}, "doc_count": 26308, "from": "4", "to": "4", "size": 26308 }, { "key": {"from": "4", "to": "5"}, "doc_count": 1735, "from": "4", "to": "5", "size": 1735 }, { "key": {"from": "4", "to": "6"}, "doc_count": 849, "from": "4", "to": "6", "size": 849 }, { "key": {"from": "4", "to": "7"}, "doc_count": 10, "from": "4", "to": "7", "size": 10 }, { "key": {"from": "4", "to": "8"}, "doc_count": 4097, "from": "4", "to": "8", "size": 4097 }, { "key": {"from": "4", "to": "9"}, "doc_count": 25, "from": "4", "to": "9", "size": 25 }, { "key": {"from": "4", "to": "10"}, "doc_count": 216, "from": "4", "to": "10", "size": 216 }, { "key": {"from": "4", "to": "12"}, "doc_count": 133, "from": "4", "to": "12", "size": 133 }, { "key": {"from": "4", "to": "15"}, "doc_count": 5, "from": "4", "to": "15", "size": 5 }, { "key": {"from": "4", "to": "16"}, "doc_count": 5, "from": "4", "to": "16", "size": 5 }, { "key": {"from": "4", "to": "21"}, "doc_count": 5, "from": "4", "to": "21", "size": 5 }, { "key": {"from": "5", "to": "0"}, "doc_count": 1280, "from": "5", "to": "0", "size": 1280 }, { "key": {"from": "5", "to": "1"}, "doc_count": 127, "from": "5", "to": "1", "size": 127 }, { "key": {"from": "5", "to": "2"}, "doc_count": 169, "from": "5", "to": "2", "size": 169 }, { "key": {"from": "5", "to": "3"}, "doc_count": 465, "from": "5", "to": "3", "size": 465 }, { "key": {"from": "5", "to": "4"}, "doc_count": 1855, "from": "5", "to": "4", "size": 1855 }, { "key": {"from": "5", "to": "5"}, "doc_count": 9083, "from": "5", "to": "5", "size": 9083 }, { "key": {"from": "5", "to": "6"}, "doc_count": 422, "from": "5", "to": "6", "size": 422 }, { "key": {"from": "5", "to": "7"}, "doc_count": 15, "from": "5", "to": "7", "size": 15 }, { "key": {"from": "5", "to": "8"}, "doc_count": 336, "from": "5", "to": "8", "size": 336 }, { "key": {"from": "5", "to": "9"}, "doc_count": 5, "from": "5", "to": "9", "size": 5 }, { "key": {"from": "5", "to": "10"}, "doc_count": 1649, "from": "5", "to": "10", "size": 1649 }, { "key": {"from": "5", "to": "12"}, "doc_count": 56, "from": "5", "to": "12", "size": 56 }, { "key": {"from": "5", "to": "14"}, "doc_count": 6, "from": "5", "to": "14", "size": 6 }, { "key": {"from": "5", "to": "15"}, "doc_count": 57, "from": "5", "to": "15", "size": 57 }, { "key": {"from": "5", "to": "20"}, "doc_count": 9, "from": "5", "to": "20", "size": 9 }, { "key": {"from": "6", "to": "0"}, "doc_count": 257, "from": "6", "to": "0", "size": 257 }, { "key": {"from": "6", "to": "1"}, "doc_count": 37, "from": "6", "to": "1", "size": 37 }, { "key": {"from": "6", "to": "2"}, "doc_count": 176, "from": "6", "to": "2", "size": 176 }, { "key": {"from": "6", "to": "3"}, "doc_count": 332, "from": "6", "to": "3", "size": 332 }, { "key": {"from": "6", "to": "4"}, "doc_count": 508, "from": "6", "to": "4", "size": 508 }, { "key": {"from": "6", "to": "5"}, "doc_count": 415, "from": "6", "to": "5", "size": 415 }, { "key": {"from": "6", "to": "6"}, "doc_count": 1902, "from": "6", "to": "6", "size": 1902 }, { "key": {"from": "6", "to": "7"}, "doc_count": 55, "from": "6", "to": "7", "size": 55 }, { "key": {"from": "6", "to": "8"}, "doc_count": 248, "from": "6", "to": "8", "size": 248 }, { "key": {"from": "6", "to": "9"}, "doc_count": 52, "from": "6", "to": "9", "size": 52 }, { "key": {"from": "6", "to": "10"}, "doc_count": 76, "from": "6", "to": "10", "size": 76 }, { "key": {"from": "6", "to": "12"}, "doc_count": 184, "from": "6", "to": "12", "size": 184 }, { "key": {"from": "6", "to": "15"}, "doc_count": 5, "from": "6", "to": "15", "size": 5 }, { "key": {"from": "6", "to": "18"}, "doc_count": 9, "from": "6", "to": "18", "size": 9 }, { "key": {"from": "6", "to": "20"}, "doc_count": 5, "from": "6", "to": "20", "size": 5 }, { "key": {"from": "7", "to": "0"}, "doc_count": 48, "from": "7", "to": "0", "size": 48 }, { "key": {"from": "7", "to": "1"}, "doc_count": 5, "from": "7", "to": "1", "size": 5 }, { "key": {"from": "7", "to": "3"}, "doc_count": 9, "from": "7", "to": "3", "size": 9 }, { "key": {"from": "7", "to": "4"}, "doc_count": 14, "from": "7", "to": "4", "size": 14 }, { "key": {"from": "7", "to": "5"}, "doc_count": 31, "from": "7", "to": "5", "size": 31 }, { "key": {"from": "7", "to": "6"}, "doc_count": 65, "from": "7", "to": "6", "size": 65 }, { "key": {"from": "7", "to": "7"}, "doc_count": 170, "from": "7", "to": "7", "size": 170 }, { "key": {"from": "7", "to": "8"}, "doc_count": 6, "from": "7", "to": "8", "size": 6 }, { "key": {"from": "7", "to": "10"}, "doc_count": 7, "from": "7", "to": "10", "size": 7 }, { "key": {"from": "7", "to": "12"}, "doc_count": 13, "from": "7", "to": "12", "size": 13 }, { "key": {"from": "7", "to": "14"}, "doc_count": 22, "from": "7", "to": "14", "size": 22 }, { "key": {"from": "7", "to": "18"}, "doc_count": 5, "from": "7", "to": "18", "size": 5 }, { "key": {"from": "8", "to": "0"}, "doc_count": 103, "from": "8", "to": "0", "size": 103 }, { "key": {"from": "8", "to": "1"}, "doc_count": 28, "from": "8", "to": "1", "size": 28 }, { "key": {"from": "8", "to": "2"}, "doc_count": 36, "from": "8", "to": "2", "size": 36 }, { "key": {"from": "8", "to": "3"}, "doc_count": 89, "from": "8", "to": "3", "size": 89 }, { "key": {"from": "8", "to": "4"}, "doc_count": 594, "from": "8", "to": "4", "size": 594 }, { "key": {"from": "8", "to": "5"}, "doc_count": 54, "from": "8", "to": "5", "size": 54 }, { "key": {"from": "8", "to": "6"}, "doc_count": 342, "from": "8", "to": "6", "size": 342 }, { "key": {"from": "8", "to": "7"}, "doc_count": 17, "from": "8", "to": "7", "size": 17 }, { "key": {"from": "8", "to": "8"}, "doc_count": 2037, "from": "8", "to": "8", "size": 2037 }, { "key": {"from": "8", "to": "9"}, "doc_count": 52, "from": "8", "to": "9", "size": 52 }, { "key": {"from": "8", "to": "10"}, "doc_count": 142, "from": "8", "to": "10", "size": 142 }, { "key": {"from": "8", "to": "12"}, "doc_count": 156, "from": "8", "to": "12", "size": 156 }, { "key": {"from": "8", "to": "14"}, "doc_count": 7, "from": "8", "to": "14", "size": 7 }, { "key": {"from": "8", "to": "15"}, "doc_count": 5, "from": "8", "to": "15", "size": 5 }, { "key": {"from": "8", "to": "16"}, "doc_count": 11, "from": "8", "to": "16", "size": 11 }, { "key": {"from": "8", "to": "18"}, "doc_count": 5, "from": "8", "to": "18", "size": 5 }, { "key": {"from": "9", "to": "0"}, "doc_count": 5, "from": "9", "to": "0", "size": 5 }, { "key": {"from": "9", "to": "3"}, "doc_count": 7, "from": "9", "to": "3", "size": 7 }, { "key": {"from": "9", "to": "4"}, "doc_count": 8, "from": "9", "to": "4", "size": 8 }, { "key": {"from": "9", "to": "6"}, "doc_count": 25, "from": "9", "to": "6", "size": 25 }, { "key": {"from": "9", "to": "7"}, "doc_count": 6, "from": "9", "to": "7", "size": 6 }, { "key": {"from": "9", "to": "8"}, "doc_count": 5, "from": "9", "to": "8", "size": 5 }, { "key": {"from": "9", "to": "9"}, "doc_count": 21, "from": "9", "to": "9", "size": 21 }, { "key": {"from": "9", "to": "20"}, "doc_count": 6, "from": "9", "to": "20", "size": 6 }, { "key": {"from": "10", "to": "0"}, "doc_count": 42, "from": "10", "to": "0", "size": 42 }, { "key": {"from": "10", "to": "1"}, "doc_count": 10, "from": "10", "to": "1", "size": 10 }, { "key": {"from": "10", "to": "2"}, "doc_count": 7, "from": "10", "to": "2", "size": 7 }, { "key": {"from": "10", "to": "3"}, "doc_count": 16, "from": "10", "to": "3", "size": 16 }, { "key": {"from": "10", "to": "4"}, "doc_count": 50, "from": "10", "to": "4", "size": 50 }, { "key": {"from": "10", "to": "5"}, "doc_count": 200, "from": "10", "to": "5", "size": 200 }, { "key": {"from": "10", "to": "6"}, "doc_count": 44, "from": "10", "to": "6", "size": 44 }, { "key": {"from": "10", "to": "8"}, "doc_count": 190, "from": "10", "to": "8", "size": 190 }, { "key": {"from": "10", "to": "9"}, "doc_count": 7, "from": "10", "to": "9", "size": 7 }, { "key": {"from": "10", "to": "10"}, "doc_count": 820, "from": "10", "to": "10", "size": 820 }, { "key": {"from": "10", "to": "12"}, "doc_count": 43, "from": "10", "to": "12", "size": 43 }, { "key": {"from": "10", "to": "15"}, "doc_count": 67, "from": "10", "to": "15", "size": 67 }, { "key": {"from": "10", "to": "18"}, "doc_count": 5, "from": "10", "to": "18", "size": 5 }, { "key": {"from": "10", "to": "20"}, "doc_count": 6, "from": "10", "to": "20", "size": 6 }, { "key": {"from": "12", "to": "0"}, "doc_count": 19, "from": "12", "to": "0", "size": 19 }, { "key": {"from": "12", "to": "3"}, "doc_count": 9, "from": "12", "to": "3", "size": 9 }, { "key": {"from": "12", "to": "4"}, "doc_count": 20, "from": "12", "to": "4", "size": 20 }, { "key": {"from": "12", "to": "5"}, "doc_count": 17, "from": "12", "to": "5", "size": 17 }, { "key": {"from": "12", "to": "6"}, "doc_count": 39, "from": "12", "to": "6", "size": 39 }, { "key": {"from": "12", "to": "8"}, "doc_count": 38, "from": "12", "to": "8", "size": 38 }, { "key": {"from": "12", "to": "9"}, "doc_count": 9, "from": "12", "to": "9", "size": 9 }, { "key": {"from": "12", "to": "10"}, "doc_count": 25, "from": "12", "to": "10", "size": 25 }, { "key": {"from": "12", "to": "12"}, "doc_count": 111, "from": "12", "to": "12", "size": 111 }, { "key": {"from": "12", "to": "14"}, "doc_count": 5, "from": "12", "to": "14", "size": 5 }, { "key": {"from": "12", "to": "15"}, "doc_count": 11, "from": "12", "to": "15", "size": 11 }, { "key": {"from": "12", "to": "16"}, "doc_count": 6, "from": "12", "to": "16", "size": 6 }, { "key": {"from": "12", "to": "18"}, "doc_count": 13, "from": "12", "to": "18", "size": 13 }, { "key": {"from": "12", "to": "20"}, "doc_count": 5, "from": "12", "to": "20", "size": 5 }, { "key": {"from": "14", "to": "6"}, "doc_count": 8, "from": "14", "to": "6", "size": 8 }, { "key": {"from": "14", "to": "12"}, "doc_count": 9, "from": "14", "to": "12", "size": 9 }, { "key": {"from": "14", "to": "14"}, "doc_count": 11, "from": "14", "to": "14", "size": 11 }, { "key": {"from": "15", "to": "6"}, "doc_count": 6, "from": "15", "to": "6", "size": 6 }, { "key": {"from": "15", "to": "8"}, "doc_count": 5, "from": "15", "to": "8", "size": 5 }, { "key": {"from": "15", "to": "9"}, "doc_count": 6, "from": "15", "to": "9", "size": 6 }, { "key": {"from": "15", "to": "10"}, "doc_count": 5, "from": "15", "to": "10", "size": 5 }, { "key": {"from": "15", "to": "12"}, "doc_count": 7, "from": "15", "to": "12", "size": 7 }, { "key": {"from": "15", "to": "15"}, "doc_count": 8, "from": "15", "to": "15", "size": 8 }, { "key": {"from": "15", "to": "20"}, "doc_count": 8, "from": "15", "to": "20", "size": 8 }, { "key": {"from": "16", "to": "9"}, "doc_count": 6, "from": "16", "to": "9", "size": 6 }, { "key": {"from": "18", "to": "18"}, "doc_count": 5, "from": "18", "to": "18", "size": 5 }, { "key": {"from": "20", "to": "20"}, "doc_count": 5, "from": "20", "to": "20", "size": 5 } ] }, "format": {"property": "aggregations"}, "transform": [ {"type": "formula", "expr": "datum.key.from", "as": "from"}, {"type": "formula", "expr": "datum.key.to", "as": "to"}, {"type": "formula", "expr": "datum.doc_count", "as": "size"} ] }, { "name": "nodes", "source": "sankeyData", "transform": [ {"type": "formula", "expr": "datum.from+datum.to", "as": "key"}, {"type": "fold", "fields": ["from", "to"], "as": ["stack", "grpId"]}, { "type": "formula", "expr": "datum.stack == 'from' ? datum.from+' '+datum.to : datum.to+' '+datum.from", "as": "sortField" }, { "type": "stack", "groupby": ["stack"], "sort": {"field": "sortField", "order": "descending"}, "field": "size" }, {"type": "formula", "expr": "(datum.y0+datum.y1)/2", "as": "yc"} ] }, { "name": "groups", "source": "nodes", "transform": [ { "type": "aggregate", "groupby": ["stack", "grpId"], "fields": ["size"], "ops": ["sum"], "as": ["total"] }, { "type": "stack", "groupby": ["stack"], "sort": {"field": "grpId", "order": "descending"}, "field": "total" }, {"type": "formula", "expr": "scale('y', datum.y0)", "as": "scaledY0"}, {"type": "formula", "expr": "scale('y', datum.y1)", "as": "scaledY1"}, {"type": "formula", "expr": "datum.stack=='from'", "as": "rightLabel"}, { "type": "formula", "expr": "datum.total/domain('y')[1]", "as": "percentage" } ] }, { "name": "destinationNodes", "source": "nodes", "transform": [{"type": "filter", "expr": "datum.stack == 'to'"}] }, { "name": "edges", "source": "nodes", "transform": [ {"type": "filter", "expr": "datum.stack == 'from'"}, { "type": "lookup", "from": "destinationNodes", "key": "key", "fields": ["key"], "as": ["target"] }, { "type": "linkpath", "orient": "horizontal", "shape": "diagonal", "sourceY": {"expr": "scale('y', datum.yc)"}, "sourceX": {"expr": "scale('x', 'from') + bandwidth('x')"}, "targetY": {"expr": "scale('y', datum.target.yc)"}, "targetX": {"expr": "scale('x', 'to')"} }, { "type": "formula", "expr": "range('y')[0]-scale('y', datum.size)", "as": "strokeWidth" }, { "type": "formula", "expr": "datum.size/domain('y')[1]", "as": "percentage" } ] } ], "config": { "tick": {"color": "#657b83"}, "axisY": {"tickSize": 3, "format": "~s"}, "bar": {"fill": "#859900", "strokeWidth": 0}, "rule": {"color": "#657b83"}, "background": "#fdf6e3", "legend": { "titleFontSize": 12, "format": "~s", "labelColor": "#657b83", "titleFont": "IBM Plex Sans", "titleColor": "#657b83", "labelFont": "IBM Plex Sans", "labelFontWeight": 400, "labelFontSize": 12, "titleFontWeight": 700 }, "header": {"labelColor": "#657b83"}, "title": {"fill": "#586e75", "fontSize": 12, "fontWeight": 700}, "axisX": { "labelAngle": 45, "format": "~s", "labelPadding": 4, "tickSize": 3 }, "style": { "guide-label": { "font": "IBM Plex Sans", "fontSize": 12, "fontWeight": 400 }, "guide-title": { "font": "IBM Plex Sans", "fontSize": 12, "fontWeight": 700 } }, "point": {"color": "#eee8d5"}, "axis": { "labelColor": "#657b83", "gridColor": "#eee8d5", "titleColor": "#657b83" }, "view": {"stroke": null}, "range": { "ramp": [ "#849900", "#728F0F", "#63861C", "#587C27", "#507330", "#4B6938", "#47603D", "#445640", "#424D41", "#414441" ], "category": [ "#859900", "#2aa198", "#268bd2", "#6c71c4", "#d33682", "#dc322f", "#cb4b16", "#b58900" ] }, "text": {"fill": "#586e75", "fontSize": 12, "fontWeight": 400} } }; vegaEmbed("#vis", spec, {mode: "vega"}).then(console.log).catch(console.warn); </script> </body> </html>