2e:null 2f:["$","title",null,{"children":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot | Marius Hogräfer | Observable"}] 34:[] 32:{"id":"61d716e08b520066","slug":"vega-lite-tutorial-part-1-lets-make-a-scatterplot","title":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot","thumbnail":"d1885636bc1afe964b9042dd26f27a47e113ca6266df19974f7825939da51ebb","access_level":"public","create_time":"$D2019-10-01T11:25:07.837Z","update_time":"$D2020-10-23T07:39:13.645Z","view_time":null,"first_public_time":"$D2019-10-02T11:52:35.332Z","has_unpublished_edits":null,"fork":false,"stars":3,"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":348,"publish_version":348,"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":7,"collection":{"id":"2483309bcb9eb81d","slug":"davi-vega-lite-tutorial","title":"DAVI - Vega-Lite Tutorial","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`\nIf we then render this specification, we get the following visualization:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"embed(plot)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"carData = fetch(\"https://vega.github.io/vega-datasets/data/cars.json\").then(d => d.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"embed = require(\"vega-embed\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"embed(plot)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"embed(specExercise1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"embed(specExercise2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"embed(specExercise3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"