31: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"} } } } ] })32:[] 2f:{"title":"Vega Tutorial 2: Working with Trees","cells":[{"id":0,"value":"md`# Vega Tutorial 2: Working with Trees`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`\n\nThis notebook is part of the tutorial series on Vega for the Data Visualization lecture at Aarhus University.\n\nIn this notebook, 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"},{"id":16,"value":"fetch(\"https://vega.github.io/vega-datasets/data/flare.json\").then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":71,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":74,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":79,"value":"html`\n

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":97,"value":"md`\nNow, we can plot the links of our tree hierarchy: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":105,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":113,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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* **Hint**: use the [Vega online editor](https://vega.github.io/editor) as a testing environment and then paste your solution into the notebook\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"// paste your code below\nembed({})","pinned":true,"hidden":false,"mode":"ojs"},{"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* **Hint**: use the [Vega online editor](https://vega.github.io/editor) as a testing environment and then paste your solution into the notebook\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"// paste your code below\nembed({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"embed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}