2a:null 2b:["$","title",null,{"children":"Marks and Channels Tutorial / CS 625, Fall 2020 | a-mabe | Observable"}] 30: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. `31:T467,md`

## Encoding Channels At the heart of Vega-Lite is the use of *encodings* that bind data fields (with a given data type) to available encoding *channels* of a chosen *mark* type. In this notebook we'll examine the following encoding channels: - \`x\`: Horizontal (x-axis) position of the mark. - \`y\`: Vertical (y-axis) position of the mark. - \`size\`: Size of the mark. May correspond to area or length, depending on the mark type. - \`color\`: Mark color, specified as a [legal CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). - \`opacity\`: Mark opacity, ranging from 0 (fully transparent) to 1 (fully opaque). - \`shape\`: Plotting symbol shape for \`point\` marks. - \`tooltip\`: Tooltip text to display upon mouse hover over the mark. - \`order\`: Mark ordering, determines line/area point order and drawing order. - \`column\`: Facet the data into horizontally-aligned subplots. - \`row\`: Facet the data into vertically-aligned subplots. For a complete list of available channels, see the [Vega-Lite encoding documentation](https://vega.github.io/vega-lite/docs/encoding.html). `32:T44c,md`

## Graphical Marks Our exploration of encoding channels above exclusively uses \`point\` marks to visualize the data. However, the \`point\` mark type is only one of the many geometric shapes that can be used to visually represent data. Vega-Lite includes a number of built-in mark types, including: - \`markArea()\` - Filled areas defined by a top-line and a baseline. - \`markBar()\` - Rectangular bars. - \`markCircle()\` - Scatter plot points as filled circles. - \`markLine()\` - Connected line segments. - \`markPoint()\` - Scatter plot points with configurable shapes. - \`markRect()\` - Filled rectangles, useful for heatmaps. - \`markRule()\` - Vertical or horizontal lines spanning the axis. - \`markSquare()\` - Scatter plot points as filled squares. - \`markText()\` - Scatter plot points represented by text. - \`markTick()\` - Vertical or horizontal tick marks. For a complete list, see the [Vega-Lite mark documentation](https://vega.github.io/vega-lite/docs/mark.html). Next, we will step through a number of the most commonly used mark types for statistical graphics. `33:T479,md` - The systematic study of marks, visual encodings, and backing data types was initiated by [Jacques Bertin](https://en.wikipedia.org/wiki/Jacques_Bertin) in his pioneering 1967 work [_Sémiologie Graphique (The Semiology of Graphics)_](https://books.google.com/books/about/Semiology_of_Graphics.html?id=X5caQwAACAAJ). The image above illustrates position, size, value (brightness), texture, color (hue), orientation, and shape channels, alongside Bertin's recommendations for the data type comparisons they support. - The framework of data types, marks, and channels also guides _automated_ visualization design tools, starting with [Mackinlay's APT (A Presentation Tool)](https://scholar.google.com/scholar?cluster=10191273548472217907) in 1986 and continuing in more recent systems such as [Voyager](http://idl.cs.washington.edu/papers/voyager/) and [Draco](http://idl.cs.washington.edu/papers/draco/). - The identification of nominal, ordinal, interval, and ratio types dates at least as far back as S. S. Steven's 1947 article [_On the theory of scales of measurement_](https://scholar.google.com/scholar?cluster=14356809180080326415). `34:[] 2e:{"id":"503b0c7d6af1a1cf","slug":"marks-and-channels-tutorial-cs-625-fall-2020","title":"Marks and Channels Tutorial / CS 625, Fall 2020","thumbnail":"b2fc1878eb1c167f411d66e0c9795398308d94fd5b8cd6dddd76ea3ef7d7b52f","access_level":"public","create_time":"$D2020-09-17T11:30:27.167Z","update_time":"$D2020-09-17T14:10:23.519Z","view_time":null,"first_public_time":"$D2020-09-17T11:30:42.681Z","has_unpublished_edits":null,"fork":{"id":"06499f6a4926793f","slug":"cs-625-marks-and-channels-tutorial","title":"CS 625 - Marks and Channels Tutorial","owner":{"id":"8f581304ab2f1225","login":"weiglemc","name":"Michele Weigle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b8d10557203a9633","login":"a-mabe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/646dccad8aa0bb30daa56764b705e7f28e00aa8e4ec4574d4a92b32d63080054","tier":"starter_2024"},"version":729,"publish_version":729,"role":null,"authored":false,"authors":[{"type":"individual","id":"d01e997ee653f9cc","login":"a-mabe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/646dccad8aa0bb30daa56764b705e7f28e00aa8e4ec4574d4a92b32d63080054","tier":null}],"members":[{"type":"individual","id":"d01e997ee653f9cc","login":"a-mabe","name":"","avatar_url":"https://avatars-next.observableusercontent.com/646dccad8aa0bb30daa56764b705e7f28e00aa8e4ec4574d4a92b32d63080054","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Marks and Channels Tutorial / CS 625, Fall 2020","cells":[{"id":659,"value":"md`# Marks and Channels Tutorial / CS 625, Fall 2020\n\nBased on the [Data Types, Graphical Marks, and Visual Encoding Channels tutorial](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels) from the [UW Interactive Data Lab](https://idl.cs.washington.edu)\n\nI'm focusing here on basic marks and channels in Vega-Lite. See the full tutorial for more information and additional customizations.\n\nReferences:\n* [Vega-Lite reference](https://vega.github.io/vega-lite/)\n* [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)\n* [Mark documentation](https://vega.github.io/vega-lite/docs/mark.html)\n\nTo work along with this tutorial, sign in to Observable with your GitHub info and Fork a copy of this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Data Types, Graphical Marks, and Visual Encoding Channels`","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.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","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!`","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`We will start by looking at the basic data types that Vega-Lite 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":"$30","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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`\n### X\n\nThe \\`x\\` encoding channel sets a mark's horizontal position (x-coordinate). In addition, default choices of axis and title are made automatically. In the chart below, the choice of a quantitative data type results in a continuous linear axis scale:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`\n### Y\n\nThe \\`y\\` encoding channel sets a mark's vertical position (y-coordinate). Here we've added the \\`cluster\\` field using an ordinal (\\`O\\`) data type. The result is a discrete axis that includes a sized band, with a default step size, for each unique value:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldO('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"md`\n**Q1:** _What happens to the chart above if you swap the \\`O\\` and \\`Q\\` field types?_\n\n**Create a new cell and enter the code below.**`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`If we instead add the \\`life_expect\\` field as a quantitative (\\`Q\\`) variable, the result is a scatter plot with linear scales for both axes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`### Size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`\nThe \\`size\\` encoding channel sets a mark's size or extent. The meaning of the channel can vary based on the mark type. For \\`point\\` marks, the \\`size\\` channel maps to the pixel area of the plotting symbol, such that the diameter of the point matches the square root of the size value.\n\nLet's augment our scatter plot by encoding population (\\`pop\\`) on the \\`size\\` channel. As a result, the chart now also includes a legend for interpreting the size values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`\nIn some cases we might be unsatisfied with the default size range. To provide a customized span of sizes, set the \\`range\\` parameter of the \\`scale\\` attribute to an array indicating the smallest and largest sizes. Here we update the size encoding to range from 0 pixels (for zero values) to 1,000 pixels (for the maximum value in the scale domain):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]})\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`### Color and Opacity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`\nThe \\`color\\` encoding channel sets a mark's color. The style of color encoding is highly dependent on the data type: nominal data will default to a multi-hued qualitative color scheme, whereas ordinal and quantitative data will use perceptually ordered color gradients.\n\nHere, we encode the \\`cluster\\` field using the \\`color\\` channel and a nominal (\\`N\\`) data type, resulting in a distinct hue for each cluster value. Can you start to guess what the \\`cluster\\` field might indicate?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\nIf you prefer filled shapes, you can can pass \\`filled:true\\` to the \\`markPoint\\` method:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"vl.markPoint({filled: true})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`\nBy default, Vega-Lite uses a bit of transparency to help combat over-plotting. We are free to further adjust the opacity, either by passing a default value to the \\`mark*\\` method, or using a dedicated encoding channel.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`### Shape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`\nThe \\`shape\\` encoding channel sets the geometric shape used by \\`point\\` marks. Unlike the other channels we have seen so far, the \\`shape\\` channel can not be used by other mark types. The shape encoding channel should only be used with nominal data, as perceptual rank-order and magnitude comparisons are not supported.\n\nLet's encode the \\`cluster\\` field using \\`shape\\` as well as \\`color\\`. Using multiple channels for the same underlying data field is known as a *redundant encoding*. The resulting chart combines both color and shape information into a single symbol legend:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"vl.markPoint({filled: true})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster'),\n vl.opacity().value(0.5),\n vl.shape().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`### Tooltips & Ordering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`\nBy this point, you might feel a bit frustrated: we've built up a chart, but we still don't know what countries the visualized points correspond to! Let's add interactive tooltips to enable exploration.\n\nThe \\`tooltip\\` encoding channel determines tooltip text to show when a user moves the mouse cursor over a mark. Let's add a tooltip encoding for the \\`country\\` field, then investigate which countries are being represented.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"vl.markPoint({filled: true})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster'),\n vl.opacity().value(0.5),\n vl.tooltip().fieldN('country')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`\nAs you mouse around you may notice that you can not select some of the points. For example, the largest dark blue circle corresponds to India, which is drawn on top of a country with a smaller population, preventing the mouse from hovering over that country. To fix this problem, we can use the \\`order\\` encoding channel.\n\nThe \\`order\\` encoding channel determines the order of data points, affecting both the order in which they are drawn and, for \\`line\\` and \\`area\\` marks, the order in which they are connected to one another.\n\nLet's order the values in descending rank order by the population (\\`pop\\`), ensuring that smaller circles are drawn later than larger circles:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"vl.markPoint({filled: true})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster'),\n vl.opacity().value(0.5),\n vl.tooltip().fieldN('country'),\n vl.order().fieldQ('pop').sort('descending')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`\nNow we can identify the smaller country being obscured by India: it's Bangladesh!\n\nWe can also now figure out what the \\`cluster\\` field represents. Mouse over the various colored points to formulate your own explanation.\n\n**Q2:** *What does the cluster attribute represent?*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`\nAt this point we've added tooltips that show only a single property of the underlying data record. To show multiple values, we can provide the \\`tooltip\\` channel an array of encodings, one for each field we want to include:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"vl.markPoint({filled: true})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]}),\n vl.color().fieldN('cluster'),\n vl.opacity().value(0.5),\n vl.order().fieldQ('pop').sort('descending'),\n vl.tooltip(['country', 'fertility', 'life_expect'])\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`\nNow we can see multiple data fields upon mouse over! We used an array of string values to indicate the fields, which serves as a convenient alternative to writing \\`vl.tooltip().fieldN('name')\\` for all three field entries.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`\n### Point Marks\n\nThe \\`point\\` mark type conveys specific points, as in *scatter plots* and *dot plots*. In addition to \\`x\\` and \\`y\\` encoding channels (to specify 2D point positions), point marks can use \\`color\\`, \\`size\\`, and \\`shape\\` encodings to convey additional data fields.\n\nBelow is a dot plot of \\`fertility\\`, with the \\`cluster\\` field redundantly encoded using both the \\`y\\` and \\`shape\\` channels. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"vl.markPoint()\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldN('cluster'),\n vl.shape().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`\nIn addition to encoding channels, marks can be stylized by providing values to the \\`mark*()\\` methods.\n\nFor example: point marks are drawn with stroked outlines by default, but can be specified to use \\`filled\\` shapes instead. Similarly, you can set a default \\`size\\` to set the total pixel area of the point mark.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"vl.markPoint({filled: true, size: 100})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldN('cluster'),\n vl.shape().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`\n### Circle Marks\n\nThe \\`circle\\` mark type is a shorthand for \\`point\\` marks drawn as filled circles.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"vl.markCircle({size: 100})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`\n### Square Marks\n\nThe \\`square\\` mark type is a shorthand for \\`point\\` marks drawn as filled squares.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"vl.markSquare({size: 100})\n .data(data2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`\n### Bar Marks\n\nThe \\`bar\\` mark type draws a rectangle with a position, width, and height.\n\nThe plot below is a simple bar chart of the population (\\`pop\\`) of each country.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"vl.markBar()\n .data(data2000)\n .encode(\n vl.x().fieldN('country'),\n vl.y().fieldQ('pop')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`\nThe bar width is set to a default size. \n\n**Q3:** _To change the width, try setting the \\`rangeStep\\` property of the \\`x\\` channel \\`scale\\` attribute, like so:_\n\n\\`vl.x().fieldN('country').scale({rangeStep: 12})\\`.\n\n**Create a new cell and enter the code below.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`The bar chart above is a bit hard to read since there are lots of countries. This would look better as a horizontal bar chart.\n\n**Q4:** *Flip the axes to generate a horizontal bar chart. Map the country to the y-axis and the population to the x-axis.*\n\n**Create a new cell and enter the code below.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`\n### Line Marks\n\nThe \\`line\\` mark type connects plotted points with line segments, for example so that a line's slope conveys information about the rate of change.\n\nLet's plot a line chart of fertility per country over the years, using the full, unfiltered global development data frame. We'll again hide the legend and use tooltips instead.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"vl.markLine()\n .data(data)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('fertility'),\n vl.color().fieldN('country').legend(null),\n vl.tooltip().fieldN('country')\n )\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`\nWe can see interesting variations per country, but overall trends for lower numbers of children per family over time. Also note that we set a custom width of 400 pixels. \n\n**Q5:** _Try changing (or removing) the widths and see what happens!_\n\n**Create a new cell and enter the code below.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`\n### Area Marks\n\nThe \\`area\\` mark type combines aspects of \\`line\\` and \\`bar\\` marks: it visualizes connections (slopes) among data points, but also shows a filled region, with one edge defaulting to a zero-valued baseline.\n\nThe chart below is an area chart of population over time for just the United States:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"dataUS = data.filter(d => d.country === 'United States')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"vl.markArea()\n .data(dataUS)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('fertility')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\n

\n## Summary\n\nWe've completed our tour of data types, encoding channels, and graphical marks! 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\nInterested in learning more about visual encoding?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"html`\n $\"Bertin's$
\nBertin's taxonomy of visual encodings from Sémiologie Graphique, as adapted by Mike Bostock.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2f:"$2e:body"