31:[] 2f:{"title":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot","cells":[{"id":304,"value":"md`\n# Vega-Lite Tutorial Part 1 - Let's make a Scatterplot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"\nmd`\n\nThis notebook is part of the tutorial series on Vega-Lite for the Data Visualization lecture at Aarhus University.\n\nIn this notebook, we will use Vega-Lite to create a scatterplot matrix visualization for the cars dataset.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n## Introduction to Vega-Lite\n\nVega-Lite is a declarative visualization grammar. \nAs such, it defines a formal language in which we can define visualization as a mapping between data and visual marks.\nIn a previous tutorial, we noticed that D3 already reduced the lines of JavaScript we had to write for creating visualization.\nHowever, we also noticed that D3 was a very powerful framework with which we could do way more than create visualization.\nVega-_Lite_ on the other hand can \"only\" be used for defining visualizations.\nWhile this seems restricting at first, it turns out to be helpful, as Vega-Lite can abstract away tasks such as DOM manipulation that are not essential visualization tasks, further reducing the lines we have to write to define a visualization.\n\nRather than writing imperative code as we did for D3, we now define the structure of visualization as a JSON object like the following:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"plot = {\n yield {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.4.0.json\",\n \"data\": {\n \"url\": \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n \"config\": {\"view\": {\"width\": 400, \"height\": 300}},\n \"mark\": \"point\",\n \"encoding\": {\n \"color\": {\"type\": \"nominal\", \"field\": \"Origin\"},\n \"x\": {\"type\": \"quantitative\", \"field\": \"Horsepower\"},\n \"y\": {\"type\": \"quantitative\", \"field\": \"Miles_per_Gallon\"}\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`\nIf we then render this specification, we get the following visualization:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"embed(plot)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\nLet's have a look at that specification and see if we can determine what's going on there:\n\n\\`$schema: \"https://vega.github.io/schema/vega-lite/v3.4.0.json\"\\`\n\nFirst, we refer to a schema to which the rest of the specification will conform. \nThis is basically a way to ensure version consistency, so that the vega-renderer interprets the specification according to the same grammar that we defined it in.\n\n\\`data: {url: \"https://vega.github.io/vega-datasets/data/cars.json\"}\\`\n\nNext, we tell the Vega renderer where to get the data from. \nYou may recognize the url from the d3 tutorial. \nIt is the dataset containing data about cars and their manufacturers:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"carData = fetch(\"https://vega.github.io/vega-datasets/data/cars.json\").then(d => d.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`\n\\`\"config\": {\"view\": {\"width\": 400, \"height\": 300}}\\`\n\nWe then provide a short configuration for the vega renderer, in which we tell it the width and height we would like the visualization to have.\n\n\\`mark: \"point\"\\`\n\nAfterwards, we tell the renderer, which mark we want to use to represent each item in our data.\nNotice however, that this mark type does not refer to SVG elements anymore, but to a [specific set of values in the Vega grammar](https://vega.github.io/vega-lite/docs/mark.html#types).\n\nIn this case, we are using the \\`point\\` mark, which is basically a small circle that by default has a border color but no filling.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`\n

\n\"encoding\": {\n  \"color\": {\"type\": \"nominal\", \"field\": \"Origin\"},\n  \"x\": {\"type\": \"quantitative\", \"field\": \"Horsepower\"},\n  \"y\": {\"type\": \"quantitative\", \"field\": \"Miles_per_Gallon\"}\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`\nFinally, we define the mapping between the visual variables of our mark and the data.\nNotice that all we tell Vega-Lite here is the name of the dimension (\\`field\\`) and its type.\nWe do not define domains or ranges, Vega-Lite infers this automatically from the data.\n\n_(Note that we can still overwrite the inferred values by [explicitly stating domain and range](https://vega.github.io/vega-lite/docs/scale.html))_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"embed = require(\"vega-embed\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`\nWe can now pass this specification to the Vega-Renderer ([vega-embed](https://www.npmjs.com/package/vega-embed)) to draw the visualization:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"embed(plot)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`\n## Vega Live Editor\nThe research team behind Vega and Vega-Lite have created an online editor, in which you get a live preview for your specification. \nIt's a great way to familiarize yourself with the grammar.\n\n[So go ahead and try it yourself](https://vega.github.io/editor/#/examples/vega-lite/point_color_with_shape).\nFor example, try swapping the mark type with something else, such as \\`line, bar, rect,\\` or \\`area\\` or change the encodings to other fields of the data and see how it affects the visualization.\n`","pinned":false,"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":292,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`\n## Exercise\n\nNow that we covered the basics of Vega-Lite, it's your turn to test your skills in the following three tasks.\nUse the Vega-online editor as a playground or edit the Vega-Lite specification in the cells below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`\n### Change the dataset\nModify the visualization specification to represent the health-income dataset from gapminder (url: \"https://vega.github.io/vega-datasets/data/gapminder-health-income.csv\").\nPlot the \\`income\\` dimension along the x-axis and the \\`health\\` dimension along the y axis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"// preview the data by uncommenting the next line:\n// p = fetch(\"https://vega.github.io/vega-datasets/data/gapminder-health-income.csv\").then(d => d.text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"specExercise1 = {\n // make your changes in the specification below: \n yield {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.4.0.json\",\n \"data\": {\n \"url\": \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n \"config\": {\"view\": {\"width\": 400, \"height\": 300}},\n \"mark\": \"point\",\n \"encoding\": {\n \"color\": {\"type\": \"nominal\", \"field\": \"Origin\"},\n \"x\": {\"type\": \"quantitative\", \"field\": \"Horsepower\"},\n \"y\": {\"type\": \"quantitative\", \"field\": \"Miles_per_Gallon\"}\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"embed(specExercise1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`\n### Change the axis\nYou will notice that the x dimension is skewed, since the health data grows exponentially. \nto get a nicer image of the data, use a [logarithmic scale](https://vega.github.io/vega-lite/docs/scale.html#log) for the x axis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"specExercise2 = {\n // reuse your solution from the previous exercise by copy-and-pasting it here:\n yield {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"mark\": \"circle\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"embed(specExercise2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`\n### Add an Encoding\nExtend the visualization with another encoding.\nFor instance, add a mapping from the _population_ dimension to the _size_ of the circle mark.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"specExercise3 = {\n // reuse your solution from the previous exercise by copy-and-pasting it here:\n yield {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"mark\": \"circle\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"embed(specExercise3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`\n## Further Reading\n* [Official Vega-Lite tutorial](https://vega.github.io/vega-lite/tutorials/getting_started.html)\n* [Demo Talk by the authors (30 minutes)](https://www.youtube.com/watch?v=9uaHRWj04D4)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}