35:null 36:["$","title",null,{"children":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot | Wenwen Dou | Observable"}] 3c:[] 3a:{"id":"3ad605eec0cb884b","slug":"vega-lite-tutorial-part-1-lets-make-a-scatterplot","title":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot","thumbnail":"fe1f8a51bdb57f29f583b792dc224a4d7f0d59d5f6fb995aea6da738a7b612db","access_level":"public","create_time":"$D2026-10-13T16:52:09.223Z","update_time":"$D2026-10-19T21:59:20.721Z","view_time":null,"first_public_time":"$D2026-10-19T17:12:48.692Z","has_unpublished_edits":null,"fork":{"id":"61d716e08b520066","slug":"vega-lite-tutorial-part-1-lets-make-a-scatterplot","title":"Vega-Lite Tutorial Part 1 - Let's make a Scatterplot","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"41499fdc6ca4c86f","login":"wenwendou","name":"Wenwen Dou","avatar_url":"https://avatars-next.observableusercontent.com/2e2c63fe7b5d83803650af7affc724c852fa1b31b18a45fcb78a545fa1b79ca5","tier":"starter_2024","bio":"","following":false},"version":409,"publish_version":409,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9db6f19e8db1e87","login":"wenwendou","name":"Wenwen Dou","avatar_url":"https://avatars-next.observableusercontent.com/2e2c63fe7b5d83803650af7affc724c852fa1b31b18a45fcb78a545fa1b79ca5","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"41499fdc6ca4c86f","login":"wenwendou","name":"Wenwen Dou","avatar_url":"https://avatars-next.observableusercontent.com/2e2c63fe7b5d83803650af7affc724c852fa1b31b18a45fcb78a545fa1b79ca5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"const plot = {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.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};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"await embed(display(html`

`), plot);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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/v5.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import embed from \"npm:vega-embed\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"await embed(display(html`

`), plot);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"const specExercise1 = {\n // make your changes in the specification below:\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.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};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"await embed(display(html`

`), specExercise1);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"html`

`), specExercise2);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"html`

`), specExercise3);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"const example = {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"data\": {\"url\": \"https://vega.github.io/vega-datasets/data/cars.json\"},\n \"width\":800,\n \"params\": [{\n \"name\": \"grid\",\n \"select\": \"interval\",\n \"bind\": \"scales\"\n }],\n \"mark\": {\"type\":\"circle\",\n \"tooltip\": true},\n \"encoding\": {\n \"x\": {\n \"field\": \"Horsepower\", \"type\": \"quantitative\",\n \"scale\": {\"domain\": [75, 150]}\n },\n \"y\": {\n \"field\": \"Miles_per_Gallon\", \"type\": \"quantitative\",\n \"scale\": {\"domain\": [20, 40]}\n },\n \"size\": {\"field\": \"Cylinders\", \"type\": \"quantitative\"},\n \"color\": {\"field\": \"Cylinders\", \"type\": \"quantitative\"}\n }\n}\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"await embed(display(html`

`), example)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"html`