25:["$","title",null,{"children":"Vega-Lite Demo: Let's make a Scatterplot Matrix | Vikash Kumar Prasad's Workspace | Observable"}] 49:[] 29:{"id":"2296d5317aaf0597","slug":null,"title":"Vega-Lite Demo: Let's make a Scatterplot Matrix","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-08-28T15:40:03.673Z","update_time":"$D2023-08-28T15:54:40.139Z","view_time":null,"first_public_time":"$D2023-08-28T15:40:03.673Z","has_unpublished_edits":null,"fork":{"id":"0718e95d285c73a5","slug":"vega-lite-demo-lets-make-a-scatterplot-matrix","title":"Vega-Lite Demo: Let's make a Scatterplot Matrix","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"54b2e007772ad81e","login":"vikash-kumar-prasad-ws","name":"Vikash Kumar Prasad's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/de958bd3aad334830977bd640c481429f9af3d171abc9ee2be1b63d0f2ab9440","tier":"starter_2024","bio":"","following":false},"version":149,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"33fb5287a3038d10","login":"vikash-kumar-prasad","name":"Vikash Kumar Prasad","avatar_url":"https://avatars-next.observableusercontent.com/5fa7470b541d481e4017a425056a61d73fb0149383f6aad67acea91183148fe8","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"33fb5287a3038d10","login":"vikash-kumar-prasad","name":"Vikash Kumar Prasad","avatar_url":"https://avatars-next.observableusercontent.com/5fa7470b541d481e4017a425056a61d73fb0149383f6aad67acea91183148fe8","tier":null,"role":"editor"},{"type":"team","id":"54b2e007772ad81e","login":"vikash-kumar-prasad-ws","name":"Vikash Kumar Prasad's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/de958bd3aad334830977bd640c481429f9af3d171abc9ee2be1b63d0f2ab9440","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 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"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 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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{\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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...\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...\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"embed = require(\"vega-embed\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null