2e:null 2f:["$","title",null,{"children":"Data Types, Graphical Marks, and Visual Encoding Channels | dishitaturakhia | Observable"}] 34: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. `35:[{"id":"a4944ac5be42ff045f4e42ff80acbb187606aea649916bb3ed971652ab80ad0d8f044a90435e71ee3d00fd12715c915d9bcc5aa83090b9019017cb78987712ec","href":"https://static.observableusercontent.com/files/a4944ac5be42ff045f4e42ff80acbb187606aea649916bb3ed971652ab80ad0d8f044a90435e71ee3d00fd12715c915d9bcc5aa83090b9019017cb78987712ec","name":"02_life_expect_fertility.png","type":"image/png","lastModified":1580835019535.936,"size":61906},{"id":"6ab1eef4d1cbecee7e9f653074ccc114a138a4db2d69413bcabf81dfc5cbd0a2bb5511788b33e455983be6205f5e7ed99a8c6811d0d942838228d1357fab9531","href":"https://static.observableusercontent.com/files/6ab1eef4d1cbecee7e9f653074ccc114a138a4db2d69413bcabf81dfc5cbd0a2bb5511788b33e455983be6205f5e7ed99a8c6811d0d942838228d1357fab9531","name":"01_life_expect_strip.png","type":"image/png","lastModified":1580835019535.936,"size":4449},{"id":"b29448bc4f60126da9b9dfdc5378198d49d07cc02d4842419aec6f27cd3d6d003be1e961f64119da7464964f633b1cf0d5d8d173d310bbb88ccbefe2a0d1e4b4","href":"https://static.observableusercontent.com/files/b29448bc4f60126da9b9dfdc5378198d49d07cc02d4842419aec6f27cd3d6d003be1e961f64119da7464964f633b1cf0d5d8d173d310bbb88ccbefe2a0d1e4b4","name":"09_gapminder_bubble_chart.png","type":"image/png","lastModified":1580835019535.936,"size":28830},{"id":"1eba5a5c28ffdbc52ed573458f79003e5105437cb16849f56c4835b11199e5a54e52a07b7d060e26d610a84a5264ffc18bb785711a22eaed9ac2f8dd6931178b","href":"https://static.observableusercontent.com/files/1eba5a5c28ffdbc52ed573458f79003e5105437cb16849f56c4835b11199e5a54e52a07b7d060e26d610a84a5264ffc18bb785711a22eaed9ac2f8dd6931178b","name":"china_usa_india_fertility_years_2.png","type":"image/png","lastModified":1580835019535.936,"size":18789},{"id":"d60d34d76e4857d1ac8ff706161e31973913357fe38350f96c45a54a29f3c1def0c0905fb70a0243749e75e4a33e45810ee315d194dfdfc539999a26a97021f8","href":"https://static.observableusercontent.com/files/d60d34d76e4857d1ac8ff706161e31973913357fe38350f96c45a54a29f3c1def0c0905fb70a0243749e75e4a33e45810ee315d194dfdfc539999a26a97021f8","name":"heatmap_year_life_expect.png","type":"image/png","lastModified":1580835019535.936,"size":20553},{"id":"bc8e5b9bcf68496ac8b6561e81ddd4b6703bdfd84479248a9237b46e6125113ccf867f843f1904057f134b1625231c9e1080cabaf9ae8fd7da50b5a4e0f3859b","href":"https://static.observableusercontent.com/files/bc8e5b9bcf68496ac8b6561e81ddd4b6703bdfd84479248a9237b46e6125113ccf867f843f1904057f134b1625231c9e1080cabaf9ae8fd7da50b5a4e0f3859b","name":"histogram_year_life_expect.png","type":"image/png","lastModified":1580835019535.936,"size":24150},{"id":"2fd298bc1c5447d4c95709f5f8e25110127a2b6b61f4ce33176d970b5378f81e3ccabb6fdff013fae384a7060ec2f419667c1cc937f934d731ecc5794e727c9c","href":"https://static.observableusercontent.com/files/2fd298bc1c5447d4c95709f5f8e25110127a2b6b61f4ce33176d970b5378f81e3ccabb6fdff013fae384a7060ec2f419667c1cc937f934d731ecc5794e727c9c","name":"04_year_life_expect.png","type":"image/png","lastModified":1580835019535.936,"size":43502},{"id":"356fd188ba3d7a0b0033ee2a52a6c546b9e7bc0c1118ec630ccb071d22d9ef0c032d00f32a1fea32d5481472956daaed9b864715e69e91b179e60a49a5500ce9","href":"https://static.observableusercontent.com/files/356fd188ba3d7a0b0033ee2a52a6c546b9e7bc0c1118ec630ccb071d22d9ef0c032d00f32a1fea32d5481472956daaed9b864715e69e91b179e60a49a5500ce9","name":"05_china_fertility.png","type":"image/png","lastModified":1580835019535.936,"size":11822},{"id":"7719cdf019f90b8548faab8141655d1d3875971f93771aad8ab7e80ba2b4b90a847d8f794c032008a4317d87294e3b2a35e6a6a95cfe3b97e0253ab8ddb1c5c5","href":"https://static.observableusercontent.com/files/7719cdf019f90b8548faab8141655d1d3875971f93771aad8ab7e80ba2b4b90a847d8f794c032008a4317d87294e3b2a35e6a6a95cfe3b97e0253ab8ddb1c5c5","name":"03_pop_fertility.png","type":"image/png","lastModified":1580835019535.936,"size":18659}] 32:{"id":"ceb17f7e11926e29","slug":"data-types-graphical-marks-and-visual-encoding-channels","title":"Data Types, Graphical Marks, and Visual Encoding Channels","thumbnail":"6d0fe20381bb99504b88f0eb261c1cf65fcf0a8543f39c83e2168120dc9be5e4","access_level":"public","create_time":"$D2020-02-04T16:50:19.535Z","update_time":"$D2020-02-11T23:58:49.566Z","view_time":null,"first_public_time":"$D2020-02-05T14:49:52.166Z","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":0,"starred":false,"owner":{"type":"team","id":"be32f447d5d01bce","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":"starter_2024"},"version":1845,"publish_version":1845,"role":null,"authored":false,"authors":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null}],"members":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data Types, Graphical Marks, and Visual Encoding Channels","cells":[{"id":0,"value":"md`# Data Types, Graphical Marks, and Visual Encoding Channels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"md`\n## About This Exercise\nWelcome to your first exercise in 6.894! Your task will be to work through this interactive reading, which includes some general background about visualization techniques, important concepts we will discuss in Wednesday's class, and short exercises that take the form of code blocks that you can fill in.\n\nAs 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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`This means that everything in this document is actually some kind of code, which you can edit. See below!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`**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 that you will eventually submit. To do this, simply 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, you can select the \"Fork\" button, also in the top right. Every exercise you do below should be done on your own fork of this document so that your work is saved. Your final submission of this exercise will be a link to your completed fork of the reading.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"md`Note that most of the programming in this class will be done in JavaScript. As this is an advanced (graduate-level) class, we will not spend time teaching the language itself or covering its syntax. If you need a quick refresher or an overview of syntax, we've compiled a [list of resources](http://vis.csail.mit.edu/classes/6.894/resources#html) 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.\n\nWithin this document, you can execute arbitrary JavaScript, such as the following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"addTwo = x => x+2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"addTwo(a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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 we will be using throughout this semester. 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","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 the class Piazza.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":670,"value":"md`\n

\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\n

\n## Global Development Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = (await require('vega-datasets'))['gapminder.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`How big is the data?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":38,"value":"printTable(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":48,"value":"data2000 = data.filter(d => d.year === 2000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"printTable(data2000.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\n

\n## Data Types\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":487,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":1568,"value":"vl.markPoint()\n .data(data2000)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 \\`.encode\\` method:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().field('fertility')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"md`Here 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\n_Note:_ You may notice that the Vega-Lite documentation uses JSON (JavaScript Object Notation) to specify visualizations. In this notebook, we'll be using a more human-friendly format called the [Vega-Lite API](https://vega.github.io/vega-lite-api/api/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`\n### 1D or Univariate Visualizations\n\nUnivariate visualizations are a useful first step to get a summary of your data values and understand their distribution.\n\nHere's a simple example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().field('fertility')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"md`By default, Vega-Lite assumes fields to contain _quantitative_ values. But, we can also explicitly annotate data types. For instance, below, we've encoded the \\`cluster\\` field on the \\`y\\` channel. Although it is numeric data, we want to treat clusters as discrete values and so have annotate it as a nominal (\\`N\\`) data type.\n\nWhat would happen if we didn't include this annotation? Try it out in the cell below, and add a short comment in the code with what you observe.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().field('fertility'),\n vl.y().field('cluster')\n )\n .render()\n\n// Comment: What happens if we do not annotate \"cluster\" as nominal data?\n// When the \"cluster\" is not annotated as nominal data, it is distributed non-discreetly at the intervals of 0.5 units. The scale also is reversed and y axis gose from 5-0 in nominal, but 0-5 (with inetrvals of 0.5) when nominal type sis removed. I also tried changing the annotation to Temporal and Ordinal and observed that type annotation affects the step size of Y axis. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"md`Recreate the following visualization (called a \"strip plot\") of life expectancy in the year 2000.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":940,"value":"vl.markTick()\n .data(data2000)\n .encode(\n vl.x().field('life_expect')\n )\n .render()\n// Add your code here to produce the visualization above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"md`\nDepending on the type of mark used, strip plots may also be known as dot plots.\n\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\\` like so:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"vl.markBar()\n .data(data2000)\n .encode(\n vl.x().fieldN('cluster'),\n vl.y().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":984,"value":"vl.markBar()\n .data(data2000)\n .encode(\n vl.x().fieldQ('life_expect').bin(true),\n vl.y().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"md`\nCompare and contrast the two univariate summaries of life expectancy. What are the strengths of the strip plot vs. the binned histogram and vice-versa?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md`\nAnswer: Strip plots are a good way of representing the overall distribution \"per year\". So as we see more clustered lines, we know that the count of records is higher in a given range. \nA histogram, however, helps us to dive deeper and get more statistical information on the distribution, \"exact\" count of records in the bin range (for example 5 years in this case) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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","output":"$undefined","database":"$undefined"},{"id":1015,"value":"// Code for Visualization 1:\nvl.markBar()\n .data(data2000)\n .encode(\n vl.x().fieldN('fertility').bin(true),\n vl.y().count()\n )\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"// Code for Visualization 2:\nvl.markLine()\n .data(data2000)\n .encode(\n vl.x().fieldQ('life_expect').bin(true),\n vl.y().count()\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"// Code for Visualization 3:\nvl.markBar()\n .data(data2000)\n .encode(\n vl.x().field('pop').bin(true),\n vl.y().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1031,"value":"FileAttachment(\"02_life_expect_fertility.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"// Code to recreate the above visualization:\nvl.markPoint()\n.data(data)\n.encode(\n vl.x().field('life_expect'),\n vl.y().field('fertility')\n )\n.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1043,"value":"FileAttachment(\"03_pop_fertility.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"// Code to recreate the above visualization:\nvl.markPoint()\n.data(data)\n.encode(\n vl.x().field('pop'),\n vl.size().field('fertility')\n )\n.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"md`And we can also explore non-quantitative fields as part of bivariate visualizations. For instance, recreate China's fertility over the years:\n\n_Hint_: You will need to filter the \\`data\\`, feel free to do this via [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) or as part of Vega-Lite with a [filter transform](https://vega.github.io/vega-lite/docs/filter.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"FileAttachment(\"05_china_fertility.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"// Code to recreate the above visualization:\nvl.markLine()\n.data(data.filter(d=> d.country === 'China'))\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('fertility')\n )\n.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"md`Similarly, **recreate the following dot plot of life expectancy over the years:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"FileAttachment(\"04_year_life_expect.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"// Code to recreate the above visualization:\nvl.markPoint()\n.data(data)\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('life_expect')\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"md`We can also represent the above data distribution as a two-dimensional histogram. Try recreating these!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"FileAttachment(\"histogram_year_life_expect.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"// Code to recreate the above visualization:\nvl.markCircle()\n.data(data)\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('life_expect').bin({step:5}),\n vl.size().count()\n )\n.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"FileAttachment(\"heatmap_year_life_expect.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"// Code to recreate the above visualization:\nvl.markSquare({size:350})\n.data(data)\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('life_expect').bin({step:5}),\n vl.color().count()\n )\n.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"md`Compare the size and color-based 2D histograms above. Which encoding do you think should be preferred? Why? In which plot can you more precisely compare the magnitude of individual values? In which plot can you more accurately see the overall density of values?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"md`Answer: The size plot conveys the magnitude better and more precisely, so it should be preferred because individual values are quatified. It is also easier to spot anomalies like the year of 1990. However, to get an overall idea of a more broader understanding of the density, colored gradation can be used where the accurate nnumber might not be needed to be conveyed. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1163,"value":"// Code for bi-variate visualization 1:\nvl.markCircle()\n.data(data)\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('life_expect').bin({step:5}),\n vl.color().count(),\n vl.size().count()\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"// Code for bi-variate visualization 2:\nvl.markCircle()\n.data(data)\n.encode(\n vl.x().fieldN('year'),\n vl.y().field('pop').bin('True'),\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"// Code for bi-variate visualization 3:\nvl.markArea()\n .data(data.filter(d => d.country === \"India\"))\n .encode(\n vl.x().fieldN('year'),\n vl.y().field('pop')\n )\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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\nRecreate the following multi-line chart.\n\n_Hint:_ You will need filter the data once again.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"FileAttachment(\"china_usa_india_fertility_years_2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"// Code to recreate the visualization above:\nvl.markLine()\n .data(data.filter(d => d.country === \"China\"||d.country === \"India\"|| d.country === \"United States\"))\n .encode(\n vl.x().fieldN('year'),\n vl.y().field('fertility'),\n vl.color().fieldN('country')\n )\n .render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1201,"value":"FileAttachment(\"09_gapminder_bubble_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"// Code to recreate the visualization above:\n// Code to recreate the visualization above:\nvl.markCircle()\n .data(data2000)\n .encode(\n vl.x().field('fertility'),\n vl.y().field('life_expect'),\n vl.color().fieldN('cluster'),\n vl.size().fieldN('pop').bin({step: 200000000})\n )\n .render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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\n### Submit\n\nPlease submit your completed notebook using [this form](https://docs.google.com/forms/d/e/1FAIpQLScWflSuhz2xLgJkY4AigLhyu6mZcp0ehigFLydD5MU1IruVQg/viewform). You may submit your notebook in one of two ways:\n\n1. As a **zip file**: Click the three horizontal dots next to the _Publish_ button in the toolbar, and select _Download code_.\n2. As a **URL**: Click the three horizontal dots next to the _Publish_ button, and select _Enable Link Sharing_. Once you have done that, test your link works using an incognito browser window.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"