2d:null 2e:["$","title",null,{"children":"Vega-Lite Demo: Let's make a Scatterplot Matrix | Marius Hogräfer | Observable"}] 33:[] 31:{"id":"0718e95d285c73a5","slug":"vega-lite-demo-lets-make-a-scatterplot-matrix","title":"Vega-Lite Demo: Let's make a Scatterplot Matrix","thumbnail":"095972db1e25bd4c42878b94ca5d523f90d4571101ec53877dfe11db498a246c","access_level":"public","create_time":"$D2019-10-02T06:24:57.378Z","update_time":"$D2020-10-23T07:42:40.652Z","view_time":null,"first_public_time":"$D2019-10-02T11:52:53.692Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":146,"publish_version":146,"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":3,"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 Demo: Let's make a Scatterplot Matrix","cells":[{"id":138,"value":"md`\n# Vega-Lite Demo: Let's make a Scatterplot Matrix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"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 see the expressiveness that lies in declarative visualization using Vega-Lite.\nWe will gradually modify a visualization specificaiton to build a scatter plot matrix, a visualization technique that allows pairwise comparison of quantitative fields in multi-dimensional data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`\nWe start off with an emty specification, in which we define the version of the Vega-Lite grammar that we want to use:\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n

\n{\n  $schema: \"https://vega.github.io/schema/vega-lite/v4.json\"\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`\nIf we try to render this specification, the Vega compiler tells us that it is invalid.\nThis is because we have not defined a visual mark and therefore there is nothing to visualize.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\nSo let's add a reference to the car dataset and let's use the \\`circle\\` mark for our scatter plot matrix.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n

\n{\n  $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n  data: {\n    url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n  },\n  mark: \"circle\"\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`\nIf we pass this specification to the compiler, everz entry in our data is represented as a dot.\nLet's add some encodings.\n\nWe will start off by defining a simple scatter plot that plots three dimensions of our data against each other and then modify the specification to get a scatter plot matrix.\n\nFirst, we'll add an encoding from the _Horsepower_ dimension to horizontal position:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n mark: \"circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n mark: \"circle\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\nNext, an encoding from the \\`Miles_per_Gallon\\` dimension to the vertical position:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n mark: \"circle\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" },\n y: { field: \"Miles_per_Gallon\", type: \"quantitative\" }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`\nAfter adding a mapping from the _Origin_ dimension to the color of our mark, we have fully specified a basic scatter plot in Vega-Lite.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n mark: \"circle\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" },\n y: { field: \"Miles_per_Gallon\", type: \"quantitative\" },\n color: { field: \"Origin\", type: \"nominal\" }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\nA scatter plot matrix creates a scatter plot for every pairwise combination from a set of dimensions of our data.\nThis creates a _matrix_ of scatter plots. \nEach column represents all combinations of dimensions with one particular mapping along the x axis. \nLikewise, each row represents all combinations of dimensions with one mapping along the y axis.\n\nVega-Lite provides us with so-called _repeat_ specifications, which repeat a specification in rows and columns.\nThis is exactly what we need for our scatterplot matrix:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`\n

\n...\nrepeat: {\n  column: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"]\n  row: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"]\n}\n...\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`\nWe also move our visual encoding into the \\`spec\\` property, to tell Vega-Lite _what_ to repeat per row and column:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html`\n

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

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n repeat: {\n row: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"],\n column: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"],\n },\n spec: {\n mark: \"circle\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" },\n y: { field: \"Miles_per_Gallon\", type: \"quantitative\" },\n color: { field: \"Origin\", type: \"nominal\" }\n }\n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`\nWhile this gives us a 3x3 matrix of scatterplots, we are not quite satisfied with the result.\nEvery scatter plot is the same.\nThis however comes to no surprise, if we look into our specification: \nWe have told Vega-Lite to create a scatter plot for \"Horsepower\"x\"Miles_per_Gallon\" and we have told it to repeat that three times in vertical and three times in horizontal places.\n\nSince Vega-Lite is not a charting framework but a declarative visualization grammar, we need to use that grammar to describe what do with the dimensions from the repeat property; we want to use them to encode the x and y positions:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"html`\n

\n...\nencoding: {\n  x: { field: { repeat: \"row\" }, type: \"quantitative\" },\n  y: { field:{ repeat: \"column\" }, type: \"quantitative\" },\n  color: { field: \"Origin\", type: \"nominal\" }\n}\n...\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {\n url: \"https://vega.github.io/vega-datasets/data/cars.json\"\n },\n repeat: {\n row: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"],\n column: [\"Horsepower\", \"Miles_per_Gallon\", \"Acceleration\"],\n },\n spec: {\n mark: \"circle\",\n encoding: {\n x: { field: { repeat: \"row\" }, type: \"quantitative\" },\n y: { field:{ repeat: \"column\" }, type: \"quantitative\" },\n color: { field: \"Origin\", type: \"nominal\" }\n }\n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\nThat's more like it.\nWe have now defined a scatterplot matrix in Vega-Lite. \nNotice how the diagonal of the matrix contains scatter plots that use the same field of the data to encode x and y positions and therefore end up plotting points on a straight line.\n\nThis is the end of this quick demo of Vega-lite. \nWe have gradually build up a declarative specifiation of a scatter plot matrix, starting with defining the data, and defining a simple scatter plot and ending up at repeating that plot for combinations of dimensions.\n\nIf you would like to know more about Vega-Lite, refer to the tutorials or read more on the following pages\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`\n## Further Reading\n* [Exploring Data in Vega-Lite](https://vega.github.io/vega-lite/tutorials/explore.html)\n* [The Vega-Lite documentation](https://vega.github.io/vega-lite/docs/)\n* Satyanarayan, A., Moritz, D., Wongsuphasawat, K., & Heer, J. (2017). Vega-Lite: A Grammar of Interactive Graphics. In IEEE Transactions on Visualization and Computer Graphics (Vol. 23, pp. 341–350). [https://doi.org/10.1109/TVCG.2016.2599030](https://doi.org/10.1109/TVCG.2016.2599030)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"embed = require(\"vega-embed\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"