2c:null 2d:["$","title",null,{"children":"Practicing Data Types, Graphical Marks, and Visual Encoding Channels with Vega-Lite | MIT Visualization Group | Observable"}] 32:T43c,md` ## About This Supplementary Reading This interactive reading will walk you through some general background about visualization techniques and important concepts we discussed in Wednesday's class. It includes some short exercises that take the form of code blocks that you can fill in, to help you practice these concepts. You are **not required** to complete this reading. But, doing so may help you become more comfortable with these ideas by seeing how they're used in a modern and widely-used visualization package called [Vega-Lite](https://vega.github.io/vega-lite). **Before you get going**, the first thing you want to do is sign up for an Observable account and _fork_ (make a copy of) this document, so that you have your own version. To do this, click the "Sign in" button at the top right of this page and select your preferred sign-in method. Once you've signed in and you're back to this document, click the "Fork" button (next to "Share") in the top toolbar. Every exercise you do below should be done on your own fork of this document so that your work is saved. `33:T48a,md` ### Quantitative (Q) With *quantitative* data we can measure numerical differences among values. There are multiple sub-types of quantitative data: For *interval* data we can measure the distance (interval) between points: *what is the distance to value A from value B? (A - B)*, supporting statements such as “A is 12 units away from B”. For *ratio* data the zero point is meaningful, so we can also measure proportions or scale factors: *value A is what proportion of value B? (A / B)*, supporting statements such as “A is 10% of B” or “B is 7 times larger than A”. In the dataset above, \`year\` is a quantitative interval field (the value of year "zero" is subjective), whereas \`fertility\` and \`life_expect\` are quantitative ratio fields (zero is meaningful for calculating proportions). Vega-Lite represents quantitative data, but does not make a distinction between interval and ratio types. Quantitative values can be visualized using position, size, or color value, among other channels. An axis with a zero baseline is essential for proportional comparisons of ratio values, but can be safely omitted for interval comparisons. `34:[{"id":"62d130928b527704b15f7a1873b6ddfb9c59d0bdbe7f219dd63bfe838109a19faf971cad185af64004b8de3ea934e6ae09d0e51aafbc0cf077a083c88e5113ca","href":"https://static.observableusercontent.com/files/62d130928b527704b15f7a1873b6ddfb9c59d0bdbe7f219dd63bfe838109a19faf971cad185af64004b8de3ea934e6ae09d0e51aafbc0cf077a083c88e5113ca","name":"heatmap_year_life_expect@1.png","type":"image/png","lastModified":1675809589931.872,"size":51007},{"id":"7719cdf019f90b8548faab8141655d1d3875971f93771aad8ab7e80ba2b4b90a847d8f794c032008a4317d87294e3b2a35e6a6a95cfe3b97e0253ab8ddb1c5c5","href":"https://static.observableusercontent.com/files/7719cdf019f90b8548faab8141655d1d3875971f93771aad8ab7e80ba2b4b90a847d8f794c032008a4317d87294e3b2a35e6a6a95cfe3b97e0253ab8ddb1c5c5","name":"03_pop_fertility.png","type":"image/png","lastModified":1675806186920.459,"size":18659},{"id":"1eba5a5c28ffdbc52ed573458f79003e5105437cb16849f56c4835b11199e5a54e52a07b7d060e26d610a84a5264ffc18bb785711a22eaed9ac2f8dd6931178b","href":"https://static.observableusercontent.com/files/1eba5a5c28ffdbc52ed573458f79003e5105437cb16849f56c4835b11199e5a54e52a07b7d060e26d610a84a5264ffc18bb785711a22eaed9ac2f8dd6931178b","name":"china_usa_india_fertility_years_2.png","type":"image/png","lastModified":1675806186920.459,"size":18789},{"id":"b29448bc4f60126da9b9dfdc5378198d49d07cc02d4842419aec6f27cd3d6d003be1e961f64119da7464964f633b1cf0d5d8d173d310bbb88ccbefe2a0d1e4b4","href":"https://static.observableusercontent.com/files/b29448bc4f60126da9b9dfdc5378198d49d07cc02d4842419aec6f27cd3d6d003be1e961f64119da7464964f633b1cf0d5d8d173d310bbb88ccbefe2a0d1e4b4","name":"09_gapminder_bubble_chart.png","type":"image/png","lastModified":1675806186920.459,"size":28830},{"id":"a4944ac5be42ff045f4e42ff80acbb187606aea649916bb3ed971652ab80ad0d8f044a90435e71ee3d00fd12715c915d9bcc5aa83090b9019017cb78987712ec","href":"https://static.observableusercontent.com/files/a4944ac5be42ff045f4e42ff80acbb187606aea649916bb3ed971652ab80ad0d8f044a90435e71ee3d00fd12715c915d9bcc5aa83090b9019017cb78987712ec","name":"02_life_expect_fertility.png","type":"image/png","lastModified":1675806186920.459,"size":61906},{"id":"6ab1eef4d1cbecee7e9f653074ccc114a138a4db2d69413bcabf81dfc5cbd0a2bb5511788b33e455983be6205f5e7ed99a8c6811d0d942838228d1357fab9531","href":"https://static.observableusercontent.com/files/6ab1eef4d1cbecee7e9f653074ccc114a138a4db2d69413bcabf81dfc5cbd0a2bb5511788b33e455983be6205f5e7ed99a8c6811d0d942838228d1357fab9531","name":"01_life_expect_strip.png","type":"image/png","lastModified":1675806186920.459,"size":4449}] 30:{"id":"4554830a88711ad9","slug":"intro-vega-lite","title":"Practicing Data Types, Graphical Marks, and Visual Encoding Channels with Vega-Lite","thumbnail":"1b074079d10d03be1207d7e261d6e08c501ec4463515a1715ca99c4814332432","access_level":"public","create_time":"$D2023-02-07T21:43:06.920Z","update_time":"$D2023-02-08T23:00:33.162Z","view_time":null,"first_public_time":"$D2023-02-07T22:50:06.772Z","has_unpublished_edits":null,"fork":{"id":"de46ead6b7ee785b","slug":"data-types-graphical-marks-and-visual-encoding-channels","title":"Data Types, Graphical Marks, and Visual Encoding Channels","owner":{"id":"9cf99b02473a86da","login":"mitvis","name":"MIT Visualization Group"}},"stars":3,"starred":false,"owner":{"type":"team","id":"9cf99b02473a86da","login":"mitvis","name":"MIT Visualization Group","avatar_url":"https://avatars-next.observableusercontent.com/50982b1a43dc3d31d0c473a112820bd2e8e7c732d1581cdc912c39b81ad7d072","tier":"starter_2024","bio":""},"version":1908,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90b414e2138aa8dc","login":"arvind","name":"Arvind Satyanarayan","avatar_url":"https://avatars-next.observableusercontent.com/f8b146dadbd04497af89b99e7e04806a9252ca00023d5bd18b21b5007f3c781e","tier":null,"bio":""}],"members":[{"type":"individual","id":"90b414e2138aa8dc","login":"arvind","name":"Arvind Satyanarayan","avatar_url":"https://avatars-next.observableusercontent.com/f8b146dadbd04497af89b99e7e04806a9252ca00023d5bd18b21b5007f3c781e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":79,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Practicing Data Types, Graphical Marks, and Visual Encoding Channels with Vega-Lite","cells":[{"id":0,"value":"md`# Practicing Data Types, Graphical Marks, and Visual Encoding Channels with Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1768,"value":"Note that this notebook does include some initial snippets of JavaScript code to load a dataset. If you are unfamiliar with JavaScript, don't stress—we'll be covering these ideas in the programming labs in a couple of weeks. For now, you can _safely skip these code snippets_ and instead begin reading at the section titled _Data Types._\n\nIf you're familiar with JavaScript, but need a quick refresher or an overview of syntax, we've compiled a [list of resources](https://vis-society.github.io/resources.html#javascript) on the class website. The UW Interactive Data Lab also has a great [introduction to JavaScript in Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable) notebook that may be helpful to peruse.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"As you may have noticed, this reading is posted on Observable, an online collaborative \"live\" notebook. If you've used Jupyter Notebook or Google Colab, you will find this very familiar.\n\nThis means that everything in this document is actually some kind of code, which you can edit. \n\nFor example, edit the text in this cell and click the play button on the right hand side, or press `shift` + `Enter` to re-execute it and see your edits reflected above.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"md`Within this document, you can execute arbitrary JavaScript, such as the following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"addTwo = x => x+2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"addTwo(a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"md`(In Observable, code blocks are collapsed by default but can be pinned to be always visible as we've done above. The lower blocks in light gray contain the actual code we're running, the upper blocks are the \"outputs\" of the code.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md`Observable code is _reactive_: if you change the value of a cell, any cells that dependent on it automatically update. Try it out by changing the value of \\`a\\`. You should notice that \\`addTwo(a)\\` automatically recalculates the new value.\n\nObservable is an incredibly powerful platform that you might find helpful to use this semester when prototyping visualizations. For more information on how it works, we recommend reading through the [introductory collection](https://observablehq.com/collection/@observablehq/introduction) perhaps starting with the [5-minute introduction](https://observablehq.com/@observablehq/five-minute-introduction?collection=@observablehq/introduction).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"md`That's enough background. Time to dive into some data visualization! If you run into any troubles, feel free to ask questions [on Piazza](https://piazza.com/class/ldj3lfvghp2313).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md`\n_This document was adapted from [a reading](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels) by the UW Interactive Data Lab._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"md`\n

\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\nA visualization represents data using a collection of _graphical marks_ such as bars, lines, and point symbols. The attributes of a mark — such as its position, shape, size, or color — serve as _channels_ in which we can encode underlying data values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"{\n const data = fromColumns({\n u: 'ABCDEFGH',\n v: [2, 8, 3, 7, 5, 4, 6, 1]\n });\n \n const base = vl.mark().data(data).encode(\n vl.x().fieldO('u').axis(null),\n vl.y().fieldQ('v').axis(null)\n ).width(110).height(80);\n \n return vl.hconcat(\n base.mark({type:'bar'}),\n base.mark({type:'line', point:true, interpolate:'monotone'}),\n base.mark({type:'tick'}),\n base.mark({type:'text', fill:'steelblue', baseline:'middle'}).encode(vl.text().fieldN('u')),\n base.mark({type:'area'})\n )\n .spacing(15)\n .config({view: {stroke: null}})\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`\nWith a basic framework of _data types_, _marks_, and _encoding channels_, we can concisely create a wide variety of visualizations. In this notebook, we explore each of these elements and show how to use them to create custom statistical graphics using a visualization package called **[Vega-Lite](https://vega.github.io/vega-lite/)**. \n\nVega-Lite offers a powerful but concise language for authoring visualizations in a _declarative_ way: you specify _what_ you want the visualization to include in terms of _data_, _graphical marks_, and _encoding channels_, rather than having to specify _how_ to implement the visualization in terms of for-loops, low-level drawing commands, etc. The key idea is that you declare links between data fields and visual encoding channels, such as the x-axis, y-axis, color, etc. The rest of the plot details are handled automatically. Building on this declarative plotting idea, a surprising range of simple to sophisticated visualizations can be created using a concise grammar.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"vegalite = {\n const v = window.vega = await require(\"vega@5\");\n const vl = window.vl = await require(\"vega-lite@5\");\n const ve = await require(\"vega-embed@6\");\n async function vega(spec, options) {\n const div = document.createElement(\"div\");\n div.value = (await ve(div, spec, {...options, mode: 'vega-lite', actions: false})).view;\n return div;\n }\n vega.changeset = v.changeset;\n return vega;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\n

\n## Global Development Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`We will visualize global health and population measures for countries of the world, recorded over the years 1955 to 2005. The data was collected by the [Gapminder Foundation](https://www.gapminder.org/) and shared in [Hans Rosling's popular TED talk](https://www.youtube.com/watch?v=hVimVzgtD6w). (If you haven't seen the talk, we encourage you to watch it!)\n\nLet's first load the dataset from the [vega-datasets](https://github.com/vega/vega-datasets) collection into a JavaScript array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = (await require('vega-datasets'))['gapminder.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`How big is the data?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`${data.length} rows, ${Object.keys(data[0]).length} columns! (This is a live data value by the way, see below)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`Let's take a peek at the first ten rows of content:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"printTable(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`For each \\`country\\` and \\`year\\` (in 5-year intervals), we have measures of fertility in terms of the number of children per woman (\\`fertility\\`), life expectancy in years (\\`life_expect\\`), and total population (\\`pop\\`).\n\nWe also see a \\`cluster\\` field with an integer code. What might this represent? We'll try and solve this mystery as we visualize the data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`Let's also create a smaller data array, filtered down to values for the year 2000 only:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"data2000 = data.filter(d => d.year === 2000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"printTable(data2000.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\n

\n## Data Types\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`The first ingredient in effective visualization is the input data. Data values can represent different forms of measurement. What kinds of comparisons do those measurements support? And what kinds of visual encodings then support those comparisons?\n\nWe will start by looking at the basic data types that Vega-Lite (and the visualization community) uses to inform visual encoding choices. These data types determine the kinds of comparisons we can make, and thereby guide our visualization design decisions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`\n### Nominal (N)\n\n*Nominal* data — also called *categorical* data — consist of category names. \n\nWith nominal data we can compare the equality of values: *is value A the same or different than value B? (A = B)*, supporting statements like “A is equal to B” or “A is not equal to B”.\nIn the dataset above, the \\`country\\` field is nominal.\n\nWhen visualizing nominal data we should readily perceive if values are the same or different: position, color hue (blue, red, green, *etc.*), and shape are all reasonable options. In contrast, using a size channel to encode nominal data might mislead us, suggesting rank-order or magnitude differences among values that do not exist!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md`\n### Ordinal (O)\n\n*Ordinal* data consist of values that have a specific ordering.\n\nWith ordinal data we can compare the rank-ordering of values: *does value A come before or after value B? (A < B)*, supporting statements like “A is less than B” or “A is greater than B”.\nIn the dataset above, we can treat the \\`year\\` field as ordinal.\n\nWhen visualizing ordinal data, we should perceive a sense of rank-order. Position, size, or color value (brightness) might be appropriate, whereas color hue (which is not perceptually ordered) would be less appropriate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`\n### Temporal (T)\n\n*Temporal* values measure time points or intervals. This type is a special case of quantitative values (timestamps) with rich semantics and conventions (i.e., the [Gregorian calendar](https://en.wikipedia.org/wiki/Gregorian_calendar)).\n\nExample temporal values include date strings such as \\`“2019-01-04”\\` and \\`“Jan 04 2019”\\`, as well as standardized date-times such as the [ISO date-time format](https://en.wikipedia.org/wiki/ISO_8601): \\`“2019-01-04T17:50:35.643Z”\\`. There are no temporal values in our global development dataset above, as the \\`year\\` field is encoded as an integer.\n\nThe temporal type in Vega-Lite supports reasoning about time units (year, month, day, hour, etc.), and provides methods for requesting specific time intervals. For more details about temporal data in Vega-Lite, see the [TimeUnit documentation](https://vega.github.io/vega-lite/docs/timeunit.html).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`\n### Summary\n\nThese data types are not mutually exclusive, but rather form a hierarchy: ordinal data support nominal (equality) comparisons, while quantitative data support ordinal (rank-order) comparisons.\n\nMoreover, these data types do _not_ provide a fixed categorization. For example, just because a data field is represented using a number doesn't mean we have to treat it as a quantitative type! We might interpret a set of ages (10 years old, 20 years old, _etc._) as nominal (underage or overage), ordinal (grouped by year), or quantitative (calculate average age).\n\nNow let's examine how to visualize these data types using _encoding channels_.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`\n

\n## Marks & Visual Encodings \n\nAt the heart of Vega-Lite is the use of *encodings* that map data fields (with a given data type) to the properties (or encoding *channels*) of geometric shapes (called *marks*).\n\nFor example, we can visualize data from the year 2000 (in our previously calculated \\`data2000\\` variable) using a \\`point\\` mark as follows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"vegalite({\n data: {values: data2000},\n mark: 'point'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"md`Here the rendering consists of one point per row in the dataset, all plotted on top of each other, since we have not yet specified positions for these points.\n\nTo visually separate the points, we can map various *encoding channels*, or *channels* for short, to fields in the dataset. For example, we could *encode* the \\`fertility\\` field on the \\`x\\` channel, which represents the x-axis position of the points. To specify this, use the \\`encoding\\` property:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"vegalite({\n data: {values: data2000},\n mark: 'point',\n encoding: {\n x: {field: 'fertility'}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1795,"value":"But, this doesn't look like a terribly useful plot, does it? That's because, by default, Vega-Lite assumes fields to contain _nominal_ values. But, we can also explicitly annotate data types by providing a `type` property like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1799,"value":"vegalite({\n data: {values: data2000},\n mark: 'point',\n encoding: {\n x: {field: 'fertility', type: 'quantitative'}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"md`\nHere is a sampling of some (but not all) encoding channels:\n\n- \\`x\\`: Horizontal (x-axis) position of the mark.\n- \\`y\\`: Vertical (y-axis) position of the mark.\n- \\`size\\`: Size of the mark. May correspond to area or length, depending on the mark type.\n- \\`color\\`: Mark color, specified as a [legal CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n- \\`opacity\\`: Mark opacity, ranging from 0 (fully transparent) to 1 (fully opaque).\n- \\`shape\\`: Plotting symbol shape for \\`point\\` marks.\n\nThe Vega-Lite documentation provides a complete list of supported [mark types](https://vega.github.io/vega-lite/docs/mark.html) and [encoding channels](https://vega.github.io/vega-lite/docs/encoding.html).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`\n### 1D or Univariate Visualizations\n\nThe visualization we just created, called a _dot plot_, is an example of a _univariate_ visualization because it depicts one dimension of our dataset. Univariate visualizations are a useful first step to get a summary of your data values and understand their distribution.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"md`Recreate the following univariate visualization (a variant of the dot plot called a _strip plot_) of life expectancy in the year 2000.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"FileAttachment(\"01_life_expect_strip.png\").image() // Haha no source code here!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"// Add your code here to produce the visualization above\nvegalite({\n data: {values: data2000},\n mark: 'point', // Find available mark types here: https://vega.github.io/vega-lite/docs/mark.html\n encoding: {\n // Find available encoding channels here: https://vega.github.io/vega-lite/docs/encoding.html\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"md`\nHistograms are another type of univariate visualizations, and Vega-Lite offers a number of [aggregation operations](https://vega.github.io/vega-lite-api/api/#aggregate-operations) that can be specified as part of an encoding channel.\n\nFor example, we could produce a histogram counting the number of data values that fall within each \\`cluster\\` using [aggregation](https://vega.github.io/vega-lite/docs/aggregate.html) (note that although \\`cluster\\` contains numeric values, we're actually treating them as _nominal_ data!):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"vegalite({\n data: {values: data2000},\n mark: 'bar',\n encoding: {\n x: {field: 'cluster', type: 'nominal'},\n y: {aggregate: 'count'}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"md`\nWe can also produce histograms of quantitative fields by discretizing the data into [bins](https://vega.github.io/vega-lite/docs/bin.html). To do this, call \\`bin(true)\\` on the field you wish to discretize:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"vegalite({\n data: {values: data2000},\n mark: 'bar',\n encoding: {\n x: {field: 'life_expect', type: 'quantitative', bin: true},\n y: {aggregate: 'count'}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"Compare and contrast the two univariate summaries of life expectancy. What are the strengths of the strip plot vs. the binned histogram and vice-versa?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"_Your answer here._","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"md`\nCreate 3 more univariate visualizations of the dataset (you may use \\`data2000\\`, the full \\`data\\` or both). Experiment with a variety of mark types and encoding channels.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"// Code for Visualization 1:\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"// Code for Visualization 2:\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"// Code for Visualization 3:\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"md`\n
\n### 2D or Bivariate Visualizations\n\nWhile univariate visualizations help us understand one single variable at a time, bivariate (or 2D) visualizations can help us identify the relationship between two variables in our dataset.\n\nRecreate the following bivariate visualization (using the full dataset, \\`data\\`):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"FileAttachment(\"02_life_expect_fertility.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"// Code to recreate the above visualization:\nvegalite({\n data: {values: data},\n mark: 'point',\n // Add your encodings here\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`\nBivariate visualizations do not have to only use the x and y encoding channels. For example, recreate the following bivariate chart:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"FileAttachment(\"03_pop_fertility.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"// Code to recreate the above visualization:\nvegalite({\n data: {values: data},\n mark: 'point',\n // Add your encodings here\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"md`And we can also explore non-quantitative fields and other mark types as part of bivariate visualizations. For instance, try recreating this heatmap of \\`life_expect\\` over \\`year\\`:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"FileAttachment(\"heatmap_year_life_expect@1.png\").image({ width: 375 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"// Code to recreate the above visualization:\nvegalite({\n data: {values: data},\n mark: 'bar',\n // Add your encodings here\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"md`Create 3 more bivariate visualizations.. Explore a range of mark types and encoding channels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"// Code for bi-variate visualization 1:\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"// Code for bi-variate visualization 2:\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"// Code for bi-variate visualization 3:\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"md`### N-D or Multivariate Visualizations\n\nAnd, of course, we don't have to stop at two dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`Bubble charts are a popular means of visualizing 3+ dimensions. Recreate the following bubble chart for the year 2000 (\\`data2000\\`):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"FileAttachment(\"09_gapminder_bubble_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"// Code to recreate the visualization above:\nvegalite({\n data: {values: data2000},\n mark: 'circle', // Circles are just filled points\n // Add your encodings here\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1873,"value":"Recreate the following multi-line chart.\n\n_Hint:_ You will need [filter](https://vega.github.io/vega-lite/docs/filter.html) the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1188,"value":"FileAttachment(\"china_usa_india_fertility_years_2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"// Code to recreate the visualization above:\nvegalite({\n data: {values: data2000},\n transform: [\n // Add code to filter\n ],\n mark: 'line', // Circles are just filled points\n // Add your encodings here\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"md`

\n## Summary\n\nWe've completed our tour of data types and encoding channels! You should now be well-equipped to further explore the space of encodings, mark types, and mark parameters. For a comprehensive reference – including features we've skipped over here! – see the Vega-Lite [marks](https://vega.github.io/vega-lite/docs/mark.html) and [encoding](https://vega.github.io/vega-lite/docs/encoding.html) documentation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"