2d:null 2e:["$","title",null,{"children":"Vega Tutorial 2: Working with Trees (Solution) | Marius Hogräfer | Observable"}] 33:T523,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 500, "padding": 5, "data": [ { "name": "tree", "url": "https://vega.github.io/vega-datasets/data/flare.json", "transform": [ { "type": "stratify", "key": "id", "parentKey": "parent" }, { "type": "tree", "size": [{"signal": "height"}, {"signal": "width - 100"}], "as": ["y", "x", "depth", "children"] } ] }, { "name": "links", "source": "tree", "transform": [ { "type": "treelinks" }, { "type": "linkpath", "orient": "horizontal", "shape": "diagonal" } ] } ], "marks": [ { "type": "path", "from": {"data": "links"}, "encode": { "update": { "path": {"field": "path"}, "stroke": {"value": "#ccc"} } } }, { "type": "symbol", "from": {"data": "tree"}, "encode": { "enter": { "size": {"value": 100}, "stroke": {"value": "#fff"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "fill": {"value": "black"} } } } ] })34:T724,// paste your code below embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 1500, "padding": 5, "data": [ { "name": "tree", "url": "https://vega.github.io/vega-datasets/data/flare.json", "transform": [ { "type": "stratify", "key": "id", "parentKey": "parent" }, { "type": "tree", "size": [{"signal": "height"}, {"signal": "width - 100"}], "as": ["y", "x", "depth", "children"] } ] }, { "name": "links", "source": "tree", "transform": [ { "type": "treelinks" }, { "type": "linkpath", "orient": "horizontal", "shape": "diagonal" } ] } ], "marks": [ { "type": "path", "from": {"data": "links"}, "encode": { "update": { "path": {"field": "path"}, "stroke": {"value": "#ccc"} } } }, { "type": "symbol", "from": {"data": "tree"}, "encode": { "enter": { "size": {"value": 100}, "stroke": {"value": "#fff"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "fill": {"value": "black"} } } }, { "type": "text", "from": {"data": "tree"}, "encode": { "enter": { "text": {"field": "name"}, "fontSize": {"value": 9}, "baseline": {"value": "middle"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "dx": {"signal": "datum.children ? -7 : 7"}, "align": {"signal": "datum.children ? 'right' : 'left'"}, "opacity": {"value": 1} } } } ] })35:Ta50,// paste your code below embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 1600, "padding": 5, "signals": [ { "name": "labels", "value": true, "bind": {"input": "checkbox"} }, { "name": "layout", "value": "tidy", "bind": {"input": "radio", "options": ["tidy", "cluster"]} }, { "name": "links", "value": "diagonal", "bind": { "input": "select", "options": ["line", "curve", "diagonal", "orthogonal"] } }, { "name": "separation", "value": false, "bind": {"input": "checkbox"} } ], "data": [ { "name": "tree", "url": "https://vega.github.io/vega-datasets/data/flare.json", "transform": [ { "type": "stratify", "key": "id", "parentKey": "parent" }, { "type": "tree", "method": {"signal": "layout"}, "size": [{"signal": "height"}, {"signal": "width - 100"}], "separation": {"signal": "separation"}, "as": ["y", "x", "depth", "children"] } ] }, { "name": "links", "source": "tree", "transform": [ { "type": "treelinks" }, { "type": "linkpath", "orient": "horizontal", "shape": {"signal": "links"} } ] } ], "scales": [ { "name": "color", "type": "linear", "range": {"scheme": "magma"}, "domain": {"data": "tree", "field": "depth"}, "zero": true } ], "marks": [ { "type": "path", "from": {"data": "links"}, "encode": { "update": { "path": {"field": "path"}, "stroke": {"value": "#ccc"} } } }, { "type": "symbol", "from": {"data": "tree"}, "encode": { "enter": { "size": {"value": 100}, "stroke": {"value": "#fff"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "fill": {"scale": "color", "field": "depth"} } } }, { "type": "text", "from": {"data": "tree"}, "encode": { "enter": { "text": {"field": "name"}, "fontSize": {"value": 9}, "baseline": {"value": "middle"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "dx": {"signal": "datum.children ? -7 : 7"}, "align": {"signal": "datum.children ? 'right' : 'left'"}, "opacity": {"signal": "labels ? 1 : 0"} } } } ] })36:[] 31:{"id":"f3e735a9fe09ef2e","slug":"vega-tutorial-2-working-with-trees-solution","title":"Vega Tutorial 2: Working with Trees (Solution)","thumbnail":"eaf8229b0c1aaeadf39839bda394dfa7ca077bbe00d1a57534c15c2e7c6ffca8","access_level":"public","create_time":"$D2019-10-10T12:30:44.384Z","update_time":"$D2020-08-31T10:28:55.247Z","view_time":null,"first_public_time":"$D2019-10-13T11:04:27.027Z","has_unpublished_edits":null,"fork":{"id":"61b57dd48823582e","slug":"vega-tutorial-2-working-with-trees","title":"Vega Tutorial 2: Working with Trees","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":"starter_2024"},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null}],"members":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"b9b34c4988842414","slug":"davi-vega-tutorial","title":"DAVI - Vega Tutorial","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"type":"notebook","body":{"title":"Vega Tutorial 2: Working with Trees (Solution)","cells":[{"id":0,"value":"md`# Vega Tutorial 2: Working with Trees (Solution)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\nIn this tutorial, we will work with hierarchical data, which we are going to then visualize in a standard tree layout.\nWe will use data containing the package hierarchy of the [Flare](https://flare.prefuse.org/) visualization toolkit, an early predecessor of D3.\nThe result of this tutorial can be seen at the bottom of this notebook.\n\nLet's have a look at the data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"fetch(\"https://vega.github.io/vega-datasets/data/flare.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`\nThe data structure is rather simplistic.\nIt contains names of packages and classes, each of which (except the root element with \\`id: 1\\`) referencing a parent node by id.\nLinks between nodes are thus encoded implicitly.\nIn the next sections, we will bring this dataset into a structure that represents links and nodes individually to allow us to visualize both.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`\n## Extracting Nodes from Tabular Data\nVega has a series of data transformation operators which allow us to generate an explicit graph layout from tabular data.\nThe first one we are going to use in this tutorial is [stratify](https://vega.github.io/vega/docs/transforms/stratify/).\nAll that _stratify_ does is that it transforms the tabular dataset into a format that will make referencing nodes easier later.\nIt takes two parameters: \\`key\\` (for identifying items) and \\`parentKey\\` (a pointer to the \\`key\\` of a node's parent).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"html`\n

\n\"data\": [\n  {\n    \"name\": \"tree\",\n    \"url\": \"https://vega.github.io/vega-datasets/data/flare.json\",\n    \"transform\": [\n      {\n        \"type\": \"stratify\",\n        \"key\": \"id\",\n        \"parentKey\": \"parent\"\n      }\n    ]\n  }\n]\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`\nWe can then use that dataset to generate a tree layout for our data, assigning a _x_ and _y_ position to each node.\nFor this, Vega provides us with the [tree](https://vega.github.io/vega/docs/transforms/tree/) operator.\nWe tell it to use the full screen space for layouting (height and width) and then give names to the data it generates (y, x, depth, and children).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html`\n

\n{\n  \"type\": \"tree\",\n  \"size\": [{\"signal\": \"height\"}, {\"signal\": \"width - 100\"}],\n  \"separation\": false,\n  \"as\": [\"y\", \"x\", \"depth\", \"children\"]\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`\nWe can already visualize the nodes of our dataset with the symbol mark, just referencing the values in the data without any scales:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n \"width\": 600,\n \"height\": 500,\n \"padding\": 5,\n\n \"data\": [\n {\n \"name\": \"tree\",\n \"url\": \"https://vega.github.io/vega-datasets/data/flare.json\",\n \"transform\": [\n {\n \"type\": \"stratify\",\n \"key\": \"id\",\n \"parentKey\": \"parent\"\n },\n {\n \"type\": \"tree\",\n \"size\": [{\"signal\": \"height\"}, {\"signal\": \"width - 100\"}],\n \"as\": [\"y\", \"x\", \"depth\", \"children\"]\n }\n ]\n }\n ],\n\n \"marks\": [\n {\n \"type\": \"symbol\",\n \"from\": {\"data\": \"tree\"},\n \"encode\": {\n \"enter\": {\n \"size\": {\"value\": 100},\n \"stroke\": {\"value\": \"#fff\"}\n },\n \"update\": {\n \"x\": {\"field\": \"x\"},\n \"y\": {\"field\": \"y\"},\n \"fill\": {\"value\": \"black\"}\n }\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`\n## Extracting Links from Stratified Node Data\n\nNext, we will use the data that Vega's \\`tree\\` operator has generated to extract the links between nodes.\nFor this, we will add a new dataset to our specification, which references the tree data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html`\n

\n{\n  \"name\": \"links\",\n  \"source\": \"tree\"\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`\nSince generating links from nodes is so common, Vega again provides us with a useful operator: [treelinks](https://vega.github.io/vega/docs/transforms/treelinks/).\nIt takes the hierarchical structure generated by stratify and outputs a set of links.\nIt does not need any parametrization, as it is designed to be used in concert with stratify.\n\nSimilar to how \\`tree\\` generated x and y positions for our nodes, the [linkpath]() operator generates bezier curves between nodes (_source_ and _target_), which we can easily plot.\nThe _shape_ parameter allows us to set parameters to how these splines will look like. \nWe can choose between \"line\", \"arc\", \"curve\", \"diagonal\" and \"orthogonal\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html`\n

\n{\n  \"name\": \"links\",\n  \"source\": \"tree\",\n  \"transform\": [\n    { \"type\": \"treelinks\" },\n    {\n      \"type\": \"linkpath\",\n      \"sourceX\": \"source.x\",\n      \"sourceY\": \"source.y\",\n      \"targetX\": \"target.x\", \n      \"targetY\": \"target.y\", \n      \"orient\": \"horizontal\",\n      \"shape\": \"diagonal\"\n    }\n  ]\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`\nNow, we can plot the links of our tree hierarchy: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n \"width\": 600,\n \"height\": 500,\n \"padding\": 5,\n\n \"data\": [\n {\n \"name\": \"tree\",\n \"url\": \"https://vega.github.io/vega-datasets/data/flare.json\",\n \"transform\": [\n {\n \"type\": \"stratify\",\n \"key\": \"id\",\n \"parentKey\": \"parent\"\n },\n {\n \"type\": \"tree\",\n \"size\": [{\"signal\": \"height\"}, {\"signal\": \"width - 100\"}],\n \"as\": [\"y\", \"x\", \"depth\", \"children\"]\n }\n ]\n },\n {\n \"name\": \"links\",\n \"source\": \"tree\",\n \"transform\": [\n { \"type\": \"treelinks\" },\n {\n \"type\": \"linkpath\",\n \"orient\": \"horizontal\",\n \"shape\": \"diagonal\"\n }\n ]\n }\n ],\n\n \"marks\": [\n {\n \"type\": \"path\",\n \"from\": {\"data\": \"links\"},\n \"encode\": {\n \"update\": {\n \"path\": {\"field\": \"path\"},\n \"stroke\": {\"value\": \"#ccc\"}\n }\n }\n } \n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`\n## Bringing Things together\nNow, all that's left for us to do is to plot node and link marks at the same time:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\n## Exercise 1: Add labels\n* Extend the visualization with a _text_ mark, that labels each node with its _name_.\n* Increase the size of the canvas for readability.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`\n## Exercise 2: Add some color\n* Add a linear color scale that maps the _depth_ field to a preset [color scheme](https://vega.github.io/vega/docs/schemes/)\n* Use that color scale to set the fill color of each node symbol.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`\n## Further Reading\n* adapted from [vega examples](https://vega.github.io/editor/#/examples/vega/tree-layout)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"embed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"