Assets/vega.tree.layout.json
|
{ "data": [ { "name": "tree", "transform": [ {"type": "stratify", "key": "id", "parentKey": "parent"}, { "type": "tree", "as": ["y", "x", "depth", "children"], "size": [{"signal": "height"}, {"signal": "width - 100"}], "method": {"signal": "layout"}, "separation": {"signal": "separation"} } ], "values": [] }, { "name": "links", "transform": [ {"type": "treelinks"}, { "type": "linkpath", "orient": "horizontal", "shape": {"signal": "links"} } ], "source": "tree" } ], "marks": [ { "from": {"data": "links"}, "type": "path", "encode": { "update": {"path": {"field": "path"}, "stroke": {"value": "#ccc"}} } }, { "from": {"data": "tree"}, "type": "symbol", "encode": { "enter": {"size": {"value": 100}, "stroke": {"value": "#fff"}}, "update": { "fill": {"scale": "color", "field": "depth"}, "x": {"field": "x"}, "y": {"field": "y"} } } }, { "from": {"data": "tree"}, "type": "text", "encode": { "enter": { "baseline": {"value": "middle"}, "fontSize": {"value": 9}, "text": {"field": "name"} }, "update": { "align": {"signal": "datum.children ? 'right' : 'left'"}, "dx": {"signal": "datum.children ? -7 : 7"}, "opacity": {"signal": "labels ? 1 : 0"}, "x": {"field": "x"}, "y": {"field": "y"} } } } ], "scales": [ { "domain": {"data": "tree", "field": "depth"}, "name": "color", "type": "linear", "range": {"scheme": "magma"}, "zero": true } ], "signals": [ {"name": "wSignal", "bind": {"input": "text"}, "value": 1000}, {"name": "hSignal", "bind": {"input": "text"}, "value": 1000}, {"name": "labels", "bind": {"input": "checkbox"}, "value": true}, { "name": "layout", "bind": {"input": "radio", "options": ["tidy", "cluster"]}, "value": "tidy" }, { "name": "links", "bind": { "input": "select", "options": ["line", "curve", "diagonal", "orthogonal"] }, "value": "diagonal" }, {"name": "separation", "bind": {"input": "checkbox"}, "value": false} ], "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.", "height": { "signal": "hSignal" }, "padding": 5, "width": { "signal": "wSignal" } } |