31:T59f,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 500, "height": 250, "padding": 5, "data": [ { "name": "population", "url": "https://vega.github.io/vega-datasets/data/population.json" }, { "name": "aggregated", "source": "population", "transform": [ { "type": "filter", "expr": "datum.year === 2000" }, { "type": "aggregate", "fields": ["people"], "groupby": ["age"], "ops": ["sum"], "as": ["aggregatedPeople"] } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 100], "range": "width", "padding": 5 }, { "name": "yscale", "type": "linear", "domain": {"data": "aggregated", "field": "aggregatedPeople"}, "range": "height", "round": true } ], "axes": [ {"orient": "bottom", "scale": "xscale", "zindex": 1}, {"orient": "left", "scale": "yscale", "tickCount": 5} ], "marks": [ { "type": "rect", "name": "peopleBars", "from": {"data": "aggregated"}, "encode": { "update": { "x": {"scale": "xscale", "field": "age"}, "width": {"value": 20}, "y": {"scale": "yscale", "field": "aggregatedPeople"}, "y2": {"scale": "yscale", "value": 0} } } } ] })32:T475,md` In the \`marks\` property, we can define any number of visual marks to representing any of the datasets in our specification. These marks are placed independently of each other, meaning that we have to take care of aligning layered plots or side-by-side multiple coordinated views manually. Nevertheless, one of Vega's design goals was to achieve full customizability of the visualization, which also plays into defining visual marks in the grammar. Yet, on first sight, the entry in the \`marks\` property looks similar to a Vega-Lite specification: It combines the \`mark\` and \`encoding\` properties of Vega-Lite. The big difference to Vega-Lite is that encode allows us to define \`update\`, \`enter\`, and \`exit\` encodings sepepartely. This means that we can define behavior for when an element of the data is first rendered (\`enter\`), when its properties changed (\`update\`), or when the data entry no longer exists (\`exit\`). While this offers us great optimiazation potential, we can of course simpy place all our encodings into the \`update\` update property. This is will take of all three states of a visual mark. `33:T59f,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 500, "height": 250, "padding": 5, "data": [ { "name": "population", "url": "https://vega.github.io/vega-datasets/data/population.json" }, { "name": "aggregated", "source": "population", "transform": [ { "type": "filter", "expr": "datum.year === 1850" }, { "type": "aggregate", "fields": ["people"], "groupby": ["age"], "ops": ["sum"], "as": ["aggregatedPeople"] } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 100], "range": "width", "padding": 5 }, { "name": "yscale", "type": "linear", "domain": {"data": "aggregated", "field": "aggregatedPeople"}, "range": "height", "round": true } ], "axes": [ {"orient": "bottom", "scale": "xscale", "zindex": 1}, {"orient": "left", "scale": "yscale", "tickCount": 5} ], "marks": [ { "type": "rect", "name": "peopleBars", "from": {"data": "aggregated"}, "encode": { "update": { "x": {"scale": "xscale", "field": "age"}, "width": {"value": 20}, "y": {"scale": "yscale", "field": "aggregatedPeople"}, "y2": {"scale": "yscale", "value": 0} } } } ] })34:T5e0,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 500, "height": 250, "padding": 5, "data": [ { "name": "population", "url": "https://vega.github.io/vega-datasets/data/population.json" }, { "name": "aggregated", "source": "population", "transform": [ { "type": "filter", "expr": "datum.year === decade" }, { "type": "aggregate", "fields": ["people"], "groupby": ["age"], "ops": ["sum"], "as": ["aggregatedPeople"] } ] } ], "signals": [ { "name": "decade", "value": 1910 } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 100], "range": "width", "padding": 5 }, { "name": "yscale", "type": "linear", "domain": {"data": "aggregated", "field": "aggregatedPeople"}, "range": "height", "round": true } ], "axes": [ {"orient": "bottom", "scale": "xscale", "zindex": 1}, {"orient": "left", "scale": "yscale", "tickCount": 5} ], "marks": [ { "type": "rect", "name": "peopleBars", "from": {"data": "aggregated"}, "encode": { "update": { "x": {"scale": "xscale", "field": "age"}, "width": {"value": 20}, "y": {"scale": "yscale", "field": "aggregatedPeople"}, "y2": {"scale": "yscale", "value": 0} } } } ] })35:T629,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 500, "height": 250, "padding": 5, "data": [ { "name": "population", "url": "https://vega.github.io/vega-datasets/data/population.json" }, { "name": "aggregated", "source": "population", "transform": [ { "type": "filter", "expr": "datum.year === decade" }, { "type": "aggregate", "fields": ["people"], "groupby": ["age"], "ops": ["sum"], "as": ["aggregatedPeople"] } ] } ], "signals": [ { "name": "decade", "value": 1910, "bind": {"input": "range", "min": 1850, "max": 2000, "step": 10} } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 100], "range": "width", "padding": 5 }, { "name": "yscale", "type": "linear", "domain": {"data": "aggregated", "field": "aggregatedPeople"}, "range": "height", "round": true } ], "axes": [ {"orient": "bottom", "scale": "xscale", "zindex": 1}, {"orient": "left", "scale": "yscale", "tickCount": 5} ], "marks": [ { "type": "rect", "name": "peopleBars", "from": {"data": "aggregated"}, "encode": { "update": { "x": {"scale": "xscale", "field": "age"}, "width": {"value": 20}, "y": {"scale": "yscale", "field": "aggregatedPeople"}, "y2": {"scale": "yscale", "value": 0} } } } ] })36:[] 2f:{"title":"Vega Tutorial 1 - Let's make a Bar Chart","cells":[{"id":324,"value":"md`\n# Vega Tutorial 1 - Let's make a Bar Chart\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"\nmd`\nThis notebook is part of the tutorial series on Vega for the Data Visualization lecture at Aarhus University.\n\nIn this notebook, we will use Vega to modify and add basic functionalities to a bar chart.\nBelow, you find the Vega specification for a bar chart for a population dataset.\nIt contains the distribution of people living in the US across different age groups in the years from 1850 until 2000.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"populationData = fetch(\"https://vega.github.io/vega-datasets/data/population.json\").then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`\nAs a first step, we use Vega to plot a basic histogram for each age group in the year 2000:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`\nOur specification consists of four main components: \\`data\\`, \\`scales\\`, \\`axes\\`, and \\`marks\\`.\nWe will go through them one by one and see what is happening.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`\nThe first component is the data array.\nWe can see that there are two elements listed here; one is named _population_, the other one _aggregated_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`\n

\n\"data\": [\n  {\n    \"name\": \"population\",\n    \"url\": \"https://vega.github.io/vega-datasets/data/population.json\"\n  },\n  {\n    \"name\": \"aggregated\",\n    \"source\": \"population\",\n    \"transform\": [\n      {\n        \"type\": \"filter\",\n        \"expr\": \"datum.year === 2000\"\n      },\n      {\n        \"type\": \"aggregate\",\n        \"fields\": [\"people\"],\n        \"groupby\": [\"age\"],\n        \"ops\": [\"sum\"],\n        \"as\": [\"aggregatedPeople\"]\n      }\n    ]\n  }\n]\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`\n_Population_ refers to an external URL from which data is queried in the \\`url\\` property.\nThe _aggregated_ element is more interesting: It references _population_, using the \\`source\\` property and then defines a series of transformations on that data.\nFirst, it excludes all rows except those that show a _year_ of 2000 and then summing up the number of people per age group within the same year.\nThe result of this aggregation is then stored as a new field in our data, named _aggregatedPeople_.\n\n**Sidenote:** The fact that we can refer to other datasets in Vega's data transformation property means that we can connect multiple independent data transformation operators to the same dataset and access their outcome elsewhere in the specification.\nTherefore, we can define data transformation _graphs_ rather than _pipelines_ (e.g. as in Vega-Lite).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\nIn the next property of our Vega specification, we define scales for vertical and horizontal positioning: _xscale_ and _yscale_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`\n

\n\"scales\": [\n    {\n      \"name\": \"xscale\",\n      \"type\": \"linear\",\n      \"domain\": [0, 100],\n      \"range\": \"width\",\n      \"padding\": 5\n    },\n    {\n      \"name\": \"yscale\",\n      \"type\": \"linear\",\n      \"domain\": {\"data\": \"aggregated\", \"field\": \"aggregatedPeople\"},\n      \"range\": \"height\", \"round\": true\n    }\n],\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`\nWhile Vega-Lite was able to infer these scales automatically for us, in Vega we need to explictly define them. \nThis may seem tedious at first, but it gives us more flexibility when we want to define interactive behavior on our visualization, since we can explicitly define how every part of the visualization reacts to certain input.\n\nScales in Vega behave similar to scales in D3 and the syntax makes it easy to read: The horizontal scale _xscale_ defines a linear mapping between the domain \\`[0, 100]\\` and the range \\`\"width\"\\`\n(The latter is one of the few shorthands that Vega provides and is the same as explicitly defining the range as \\`[0, {\"signal\": \"width\"}]\\`).\nSimilarly, the vertical scale _yscale_ defines a linear mapping between the _aggregatedPeople_ field of the dataset named _aggregated_ and the height of our visualization, using _rounded_ (i.e. integer) output values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`\nNext, we define the axes that present these scales as visual guidelines to the user.\nAgain, another part of the visualization that Vega-Lite infers automatically, but which at the same time we can customize in Vega.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`\n

\n  \"axes\": [\n    {\"orient\": \"bottom\", \"scale\": \"xscale\", \"zindex\": 1},\n    {\"orient\": \"left\", \"scale\": \"yscale\", \"tickCount\": 5}\n  ],\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`\nAnd again, if you have followed our D3 tutorial, this syntax will seem familiar: The first entry defines an axis for _xscale_ defined in the \\`scales\\` property previously, positioned at the _bottom_ of our visualization.\nThe second entry defines an axis for _yscale_, positioned at the _left_ side of our visualization, using ony _five_ tick marks to indicate values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\nAt this point, we have defined where our data comes from, how we want to transform it and created mapping functions (i.e. scales) to two fields of our data.\nThe last step towards a bar chart is thus to define visual _marks_, which use these functions to present the data using visual encodings.\nIn our Vega specification, the \\`marks\\` property thus follows next:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html`\n

\n  \"marks\": [\n    {\n      \"type\": \"rect\",\n      \"name\": \"peopleBars\",\n      \"from\": {\"data\": \"aggregated\"},\n      \"encode\": {\n        \"update\": {\n          \"x\": {\"scale\": \"xscale\", \"field\": \"age\"},\n          \"width\": {\"value\": 20},\n          \"y\": {\"scale\": \"yscale\", \"field\": \"aggregatedPeople\"},\n          \"y2\": {\"scale\": \"yscale\", \"value\": 0}\n        }\n      }\n    }\n  ]\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\n## Defining Interactive Behavior\nSince our dataset contain entries for more than one year, we should also incorporate these entries into our visualization.\nIt would be great for example to compare the development of the age distribution over time.\n\nOur histogram shows only data for the year 2000, because we have filtered out all other entries inside the _filter_ transform of our dataset.\nIn turn, we can display any other year by exchanging _2000_ in the _expression_ property by any other decade between 1850 and 2000.\nThis is what the histogram look like for the year 1850:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`\nWe can immediately see that this distribution looks very different from the 2000's version.\nSo let's make the chart interactive so we can _lookup_ the histogram for the age distribution for any given decade.\n\nAs a first step, let's turn the decade by which we filter our data into a variable.\nThat way, whenever the variable changes, Vega will _reactively_ update all dependent values, including the visual marks.\nVariables in Vega are called _signals_, indicating their dynamic nature.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"html`\n

\n\"signals\": [\n    { \"name\": \"decade\", \"value\": 2000 }\n]\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`\nThen, we need to reference this _signal_ in the data transformation. \nWe can simply include a signal inside an \\`expr\\` of the filter transform by putting its name inside the equation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`\n

\n...\n\"transform\": [\n  {\n    \"type\": \"filter\",\n    \"expr\": \"datum.year === decade\"\n  }\n...\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`\nThat's all there is to it.\nYou can try changing the value of the _decade_ signal in the specification below and see how the bar charts updates.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`\nHowever, modifying a specification is not interactive at all. \nIn Vega, we can also define widgets which let us set a signal value without rerendering the full chart.\nSince Vega only updates the parts of the visualization that have changed, this is naturally way more performant.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"html`\n

\n\"signals\": [\n    { \n      \"name\": \"decade\", \n      \"value\": 1910, \n      \"bind\": {\"input\": \"range\", \"min\": 1850, \"max\": 2000, \"step\": 10} \n    } \n]\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`\nThere is something wrong with this chart though.\n\nSince we defined the domain of our vertical scale to be based on the output of the filter transformation, the absolute number of people per decade is hard to compare, as the axis-values constantly change.\nSo let's also fix that.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`\n## Exercise 1: Refactor Data Transformation\nThe first step is to fix the data transformation pipeline of our input data, since we cannot access the maximum aggregated value if we filter out one year before aggregation.\n\n* Make the aggregation group rows by year and age group\n* Split aggregation step into two referencable data sets _aggregated_ and _filtered_, with the latter referencing the output of the former\n* Add another aggregation data set that [calculates the maximum](https://vega.github.io/vega/docs/transforms/aggregate/) aggregated number of people\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":298,"value":"// place your specification below\nembed({});","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`\n## Exercise 2: Update References\nWhile we have refactored the data transformation, the _yscale_ and mark reference the wrong elements of the dataflow graph.\n* Point the domain of the _yscale_ to the right dataset\n* Make the _peopleBars_ mark us the right dataset\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":211,"value":"// place your specification below\nembed({});","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`\nThis visualization now gives us a good impression of the population development over the decades, which fits our task description.\nAnd with that, we are at the end of this notebook. \nIf you are interested, see the further reading material below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\n## Further Reading\n* [Explanation of Vega's reactive dataflow graph](https://observablehq.com/@vega/how-vega-works)\n* [Airport tutorial](https://vega.github.io/vega/tutorials/airports/\n)\n* [Let's make a bar chart tutorial](https://vega.github.io/vega/tutorials/bar-chart/ \n)\n* [Introduction Video by the developer of Vega](Reactive Building Blocks: Interactive Visualizations with Vega\n)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"embed = require(\"vega-embed\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}