31:[] 2f:{"title":"Vega-Lite Tutorial Part 2 - The Essentials","cells":[{"id":260,"value":"md`\n# Vega-Lite Tutorial Part 2 - The Essentials\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`\nThis notebook is part of the tutorial series on Vega-Lite for the Data Visualization lecture at Aarhus University.\n\n**The following is adapted from the official [\"Getting Started\"](https://vega.github.io/vega-lite/tutorials/getting_started.html) Vega-Lite tutorial (version: 01-10-2019).**\n\nNow that we learned that Vega-Lite uses JSON descriptions to represent and render visualization, let's have a closer look at the individual parts of the specification.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`\n## The Data\nLet’s say you have a tabular data set with a categorical variable in the first column _a_ and a numerical variable in the second column _b_.\n\n| a | b |\n|---|---|\n| C | 2 |\n| C | 7 |\n| C | 4 | \n| D | 1 |\n| D | 2 |\n| D | 6 |\n| E | 8 |\n| E | 4 |\n| E | 7 |\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`\nWe can represent this data as a JSON array in which each row is an object in the array.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"table = [\n {a: \"C\", b: 2},{a: \"C\", b: 7},{a: \"C\", b: 4},{a: \"D\", b: 1},{a: \"D\", b: 2},{a: \"D\", b: 6},{a: \"E\", b: 8},{a: \"E\", b: 4},{a: \"E\", b: 7},\n\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`\nTo visualize this data with Vega-Lite, we can add it directly to the \\`data\\` property in a Vega-Lite specification.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html`\n

\n{\n  \"data\": {\n    \"values\": [\n      {\"a\": \"C\", \"b\": 2},\n      {\"a\": \"C\", \"b\": 7},\n      {\"a\": \"C\", \"b\": 4},\n      {\"a\": \"D\", \"b\": 1},\n      {\"a\": \"D\", \"b\": 2},\n      {\"a\": \"D\", \"b\": 6},\n      {\"a\": \"E\", \"b\": 8},\n      {\"a\": \"E\", \"b\": 4},\n      {\"a\": \"E\", \"b\": 7}\n    ]\n  }\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`\n## Encoding Data with Marks\n**The following is adapted from the official [\"Getting Started\"](https://vega.github.io/vega-lite/tutorials/getting_started.html) Vega-Lite tutorial (version: 01-10-2019).**\n\nNow we have a data source but we haven’t defined yet how the data should be visualized.\n\nBasic graphical elements in Vega-Lite are [_marks_](https://vega.github.io/vega-lite/docs/mark.html). Marks provide basic shapes whose properties (such as position, size, and color) can be used to visually encode data, either from a data field (or a variable), or a constant value.\n\nTo show the data as a point, we can set the \\`mark\\` property to \\`point\\`:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`which describes the following visualization:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"point\",\n \"encoding\": {}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`\nNow, it looks like we get a point. In fact, Vega-Lite renders one point for each object in the array, but they are all overlapping since we have not specified each point’s position.\n\nTo visually separate the points, data variables can be mapped to visual properties of a mark. For example, we can [encode](https://vega.github.io/vega-lite/docs/encoding.html) the variable _a_ of the data with \\`x\\` channel, which represents the x-position of the points. We can do that by adding an \\`encoding\\` object with its key \\`x\\` mapped to a channel definition that describes variable _a_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"html`\n

\n...\n\"encoding\": {\n  \"x\": {\"field\": \"a\", \"type\": \"nominal\"}\n}\n...\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"point\",\n \"encoding\": {\n \"x\": {\"field\": \"a\", \"type\": \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`\nThe encoding object is a key-value mapping between encoding channels (such as x, y) and definitions of the mapped data fields. The channel definition describes the field’s name (field) and its data type (type). In this example, we map the values for field a to the encoding channel x (the x-location of the points) and set a’s data type to nominal, since it represents categories. (See the documentation for more information about data types.)\n\nIn the visualization above, Vega-Lite automatically adds an axis with labels for the different categories as well as an axis title. However, 3 points in each category are still overlapping. So far, we have only defined a visual encoding for the field a. We can also map the field b to the y channel.\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"html`\n

\n...\n\"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n...\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`\nThis time we set the field type to be quantitative because the values in field b are numeric.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"point\",\n \"encoding\": {\n \"x\": {\"field\": \"a\", \"type\": \"nominal\"},\n \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`\n## Data Transformation: Aggregation\n**The following is adapted from the official [\"Getting Started\"](https://vega.github.io/vega-lite/tutorials/getting_started.html) Vega-Lite tutorial (version: 01-10-2019).**\n\nVega-Lite also supports data transformation such as aggregation. \nBy adding \\`\"aggregate\": \"average\"\\` to the definition of the \\`y\\` channel, we can see the average value of _a_ in each category. \nFor example, the average value of category \\`D\\` is \n\n\\`(1 + 2 + 6)/3 = 9/3 = 3\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"point\",\n \"encoding\": {\n \"x\": {\"field\": \"a\", \"type\": \"nominal\"},\n \"y\": {\"aggregate\": \"average\", \"field\": \"b\", \"type\": \"quantitative\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`\nGreat! You computed the aggregate values for each category and visualized the resulting value as a point. \nTypically aggregated values for categories are visualized using bar charts. \nTo create a bar chart, we have to change the mark type from \\`point\\` to \\`bar\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"a\", \"type\": \"nominal\"},\n \"y\": {\"aggregate\": \"average\", \"field\": \"b\", \"type\": \"quantitative\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`\nSince the quantitative value is on \\`y\\`, you automatically get a vertical bar chart. If we swap the \\`x\\` and \\`y\\` channel, we get a horizontal bar chart instead.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"bar\",\n \"encoding\": {\n \"y\": {\"field\": \"a\", \"type\": \"nominal\"},\n \"x\": {\"aggregate\": \"average\", \"field\": \"b\", \"type\": \"quantitative\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`\n## Customize your Visualization\n\nVega-Lite automatically provides default properties for the visualization. You can further customize these values by adding more properties. For example, to change the title of the x-axis from \\`Average of b\\` to \\`Mean of b\\`, we can set the title property of the axis in the \\`x\\` channel\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"embed({\n \"data\": {\n \"values\": [\n {\"a\": \"C\", \"b\": 2}, {\"a\": \"C\", \"b\": 7}, {\"a\": \"C\", \"b\": 4},\n {\"a\": \"D\", \"b\": 1}, {\"a\": \"D\", \"b\": 2}, {\"a\": \"D\", \"b\": 6},\n {\"a\": \"E\", \"b\": 8}, {\"a\": \"E\", \"b\": 4}, {\"a\": \"E\", \"b\": 7}\n ]\n },\n \"mark\": \"bar\",\n \"encoding\": {\n \"y\": {\"field\": \"a\", \"type\": \"nominal\"},\n \"x\": {\n \"aggregate\": \"average\", \"field\": \"b\", \"type\": \"quantitative\",\n \"axis\": {\"title\": \"Mean of b\"}\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"embed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}