2f:T453, With *quantitative* data we can measure numerical differences among values. There are multiple sub-types of quantitative data: > **Days:** *Monday, Tuesday, Wednesday...* For *interval* data we can measure the distance (interval) between points: *How many days are between Thursday and Monday?*, supporting statements such as “*Thursday is 3 days away from Monday*”. > **% of sugar:** *20.5, 36, 12...* 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, *precipitation, temp_max, temp_min, wind,* are quantitative ratio fields. 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. 30:T806, #### data() Data is passed to Vega-Lite with the data() method as an array. We can also pass a string URL (say, from a Gist) to be parsed #### .encode() We pass parameters to *encode* to define a mapping between our data and the chart. *Encodings* map data fields (with a given data type) to the properties (aka encoding *channels*) of geometric shapes (aka *marks*). Here's a sampling of some (but not all) 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. Note that we would pass size as a key-value pair into the argument of our mark function, like ```markCircle({size: 200})``` - *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*: The mark we use. In the above example, we used *bar* as a mark. The 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). Note that the Vega-Lite documentation uses JSON to specify visualizations, so there is a bit of mental translating. If in doubt --- there are many Vega-Lite tutorials that might have examples similar to what you're looking for. > **vl.y().fieldN('weather'), vl.x().count()**: > in this case, we passed two objects as parameters to encode in Vega-Lite. ```vl.y().fieldN('weather')``` means that we want to see the different types of weather categories (nominal) on the *y-axis*, and ```vl.x().count()``` means that we want to count the number of records of each type of weather instance visualized on the *x-axis.* > What are our independent and dependent variables here? You'll note that the* x-axis* doesn't have *weather* specified as a field, but this is equivalent to also using ```vl.x().fieldN('weather').count()``` 31:T466,What are the suffixes like Q and N after field? ```Q``` stands for quantitative, and ```N``` stands for *nominal*. We want precipitation to be interpreted as quantitative, rather than a nominal or categorical field. The full set of [field types](https://vega.github.io/vega-lite/docs/encoding.html#field-def) are: Method | Type | Description | Examples --- | --- | --- \`fieldQ()\` | quantitative | numerical magnitudes | 1, 1.2, 3, 4, $1,230.60 \`fieldT()\` | temporal | corresponding to Date values | 2019-01-02T00:01:23Z, 1996 \`fieldN()\` | nominal | unordered, categorical data | Audi, Ford, Hyundai, Tesla \`fieldO()\` | ordinal | like nominal, but with an inherent order | small, medium, large This helps Vega-Lite determine corresponding scale and axis types. By default, Vega-Lite assumes fields to contain *quantitative* values (but not always the case here!). **What if we didn't specify the field type?** If we just used ```field('precipitation')``` instead of ```fieldQ```, Vega Lite here starts assuming that the field is actually nominal, and we get a chart like we did above. That one is difficult to read32:T4d0,#### timeUnit("utcmonth") ```timeUnit``` transforms our date dimension, as if we had specified the month in our data. ```utcmonth``` parses the string values in UTC (coordinated universal time) and extracts the month. _Note_: Vega Lite supports different time units, including but not limited to the following: - ```year``` - Gregorian calendar years. - ```month``` - Calendar months (January, February, etc.). - ```date``` - Calendar day of the month (January 1, January 2, etc.). - ```week``` - Sunday-based weeks. Days before the first Sunday of the year are considered to be in week 0, the first Sunday of the year is the start of week 1, the second Sunday week 2, etc.. - ```day``` - Day of the week (Sunday, Monday, etc.). - ```dayofyear``` - Day of the year (1, 2, …, 365, etc.). - ```hours``` - Hours of the day (12:00am, 1:00am, etc.). - ```minutes``` - Minutes in an hour (12:00, 12:01, etc.). A full list can be found [in the Time Unit page of Vega Lite's documentation](https://vega.github.io/vega-lite/docs/timeunit.html). #### .stack("normalize").axis({ format: "%" }) ```stack('normalize')``` normalizes the axis to a value between 0-1, and ```axis({format: '%'})``` formats the normalized y-axis as percentages33:T450,When using libraries like Vega-Lite, inevitably you will run into shortcomings like this. To get the visualization to show what we want, we have to shape the data. In this case, we are literally missing rows for these months for snow because there was no data. We need to add these into the data. We can do this in javascript. The following function creates a day for every missing month and snow combination in this data, and sets the info to 0. **_Note_**: Using ```null``` instead of 0 for missing months changes how Vega-lite visualizes the data. When we use ```null``` instead of 0 for ```temp_max``` in the warmer months, we actually get a line that is broken into two line segments, from Jan - Apr and Nov - Dec. Now, we have one continuous line segment for snow showing that the average ```temp_max``` is 0 due to no snow. Technically true, though it can be a bit deceptive --- be careful of how you represent this data! This is why it is important to know how underlying libraries that we use --- not just vega lite --- might treat these edge cases when we have 0 values, null values, etc. 34:T90a,## More Resources **Vega-Lite Tutorials and Examples**: In case you want other perspectives of Vega-Lite intro tutorials - Another tutorial on [Vega-Lite's encodings](https://observablehq.com/@aunnoy/iat-355-3-interactions-in-vega-lite) from a previous IAT 355 TA - Lyn's [Exploring Visual Forms](https://observablehq.com/@drlynb/week-4-vega-lite-exploring-visual-forms) notebook - A collection of tutorials on [Observable for Vega-Lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite) has a big collection of examples - Jeff Heer from the University of Washington has many notebook examples with the [Vega-Lite API](https://observablehq.com/collection/@vega/vega-lite-api), including his own [introduction tutorial](https://observablehq.com/@uwdata/introduction-to-vega-lite) **Vega-Lite Documentation** - The [Vega-Lite Documentation](https://vega.github.io/vega-lite/docs/) uses JSON declaration. - A less complete version of the [Vega-Lite API documentation](https://vega.github.io/vega-lite-api/) is also available; scroll to the bottom to see the API Reference **JAVASCRIPT** - For those needing a Javascript refresher, Min Hyung Chung has a great brief on Javascript in [Section 1](https://observablehq.com/@chunggrace/lab-2-javascript-introduction-to-vega-lite#cell-26) of her notebook **COLOR RESOURCES** - [CSS Color list](https://www.w3schools.com/cssref/css_colors.asp) - [https://coolors.co/](https://coolors.co/) - [ColorBrewer](https://colorbrewer2.org/) **And ones from last week's tutorial:** - For a more in-depth explanation of Obervable, read [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/introduction) - A more detailed explanation of Observable cells in [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code) - How does [Observable differ from Javascript](https://observablehq.com/@observablehq/observables-not-javascript) - The [Markdown Cheat Sheet](https://observablehq.com/@observablehq/markdown-quick-reference) - For a collection of resources on Observable, read [Observable User Manual](https://observablehq.com/@observablehq/user-manual?collection=@observablehq/introduction) - The [D3](https://d3js.org/) library - we will cover this in the following weeks35:[{"id":"dcd3157998758921e9ad01f4a349ecc80c26329f60b39ff71c4853a13e151d1baf831f0edb1bcd5f2486561dc7ab5378daeb04c39875b65785cc15d8409d42a1","href":"https://static.observableusercontent.com/files/dcd3157998758921e9ad01f4a349ecc80c26329f60b39ff71c4853a13e151d1baf831f0edb1bcd5f2486561dc7ab5378daeb04c39875b65785cc15d8409d42a1","name":"image@2.png","type":"image/png","lastModified":1692899555860.955,"size":108512},{"id":"ff6c651a49f420cd6fbca94879a15cb44a973dea59fd340867f898df960f78503150864a4a88f7df6f70705f9838f21634437f37aee3571866026cd80a5af1de","href":"https://static.observableusercontent.com/files/ff6c651a49f420cd6fbca94879a15cb44a973dea59fd340867f898df960f78503150864a4a88f7df6f70705f9838f21634437f37aee3571866026cd80a5af1de","name":"image@4.png","type":"image/png","lastModified":1692899555860.955,"size":226870}] 2d:{"title":"[IAT355] Tutorial 3: Mapping Data to Features in Observable | TUTORIAL","cells":[{"id":0,"value":"# [IAT355] Tutorial 3: Mapping Data to Features in Observable | TUTORIAL\nData Types, Graphical Marks, and Visual Encoding Channels, oh my!\n\n**THIS IS THE TUTORIAL VERSION. The solution version will be posted [here](https://observablehq.com/@iat355/03s-features?collection=@iat355/iat-355-tutorials-solution)**","pinned":false,"hidden":false,"mode":"md"},{"id":2117,"value":"^{Content adopted from notebook by [arkirat](https://observablehq.com/@arkirat/data-types-graphical-marks-and-visual-encoding-channels)}","pinned":false,"hidden":false,"mode":"md"},{"id":662,"value":"## ABOUT THIS NOTEBOOK\n\nIn today's tutorial, we're going to be working with data in Observable to create a visualization. ","pinned":false,"hidden":false,"mode":"md"},{"id":2186,"value":"toc(\"h2, h3, h4\") // alternatively toc(\"h1, h2, h3, h4\") if you wanted to include the title heading","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`\n

\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2971,"value":"^{Content adopted from notebook by [arkirat](https://observablehq.com/@arkirat/data-types-graphical-marks-and-visual-encoding-channels)}","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":2127,"value":"Here, we're importing some of the libraries we'll be using. In many Observable Notebooks, the libraries are often placed at the bottom of the Notebook. \n\n*Remember that there is no required order for code in cells!*","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"//This imports the VL API\nimport {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"},{"id":4069,"value":"//This imports the VL JSON library\nVegaLite = require(\"vega-embed@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2124,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2231,"value":"--------------","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"## Weather Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"Onto our dataset that we'll use for this tutorial. Let's get a dataset of weather in Seattle","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"data = d3.csv(\"https://vega.github.io/vega-lite/data/seattle-weather.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"How big is the data?`","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"$${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":"md"},{"id":36,"value":"md`Let's take a peek at the first ten rows of content:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"printTable(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"For our dimensions, we got date, precipitation, maximum temperature, minimum temperature, wind speed in knots, and the general weather outlook.\n\nCan anyone tell me what are the data types of these data dimensions?\n\nIf you forgot, here's a quick review on data types","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"md`\n

\n## Data Types\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2975,"value":"^{Content adopted from notebook by [arkirat](https://observablehq.com/@arkirat/data-types-graphical-marks-and-visual-encoding-channels)}","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":2294,"value":"### Nominal (N)\n\n> **Cereal Type:** *Diet, Healthy, Adult, Kids* ","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"*Nominal* 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, *weather* 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":"md"},{"id":2314,"value":"### Ordinal (O)\n> **Ranks of Nobility:** *Baron, Viscount, Count, Marquis...*","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"\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":"md"},{"id":2321,"value":"### Quantitative (Q)\n","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"### 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”\\`. *Date* is a temporal value in our dataset.\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":"md"},{"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 by making a chart in Vega-Lite, and customizing it using _encoding channels_.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3432,"value":"## Refresher ! \nRemember the distinction between chart, marks, channels and encodings.
\nEncodings map data fields (with a given data type) to the visual properties (aka encoding channels) of geometric shapes (aka marks). The marks are arranged in a visualization form (sometimes called an idiom) to make a chart. ","pinned":false,"hidden":false,"mode":"md"},{"id":2146,"value":"------------","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"## How to Make a Chart with Vega-Lite\n^{With content taken from [Charting with Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite) by Visnu Pitiyanuvath}\n- There are two forms of Vega-lite that you will see in Observables notebooks:\n- - Declarative JSON specification\n - Vega-Lite API (what we'll be using)\n\nFor our tutorial purposes, we'll be using the Vega-Lite API. **We will not accept JSON spec code for your assignments**.\n\nTake a look below at how the JSON spec and the API differ when creating the same chart","pinned":false,"hidden":false,"mode":"md"},{"id":2198,"value":"//We'll break down what all of this means shortly below, but for now, look at the difference between the declarative JSON specification, versus the vega-lite API\n\n/*\nThis is an example of Vega-Lite using the Declarative JSON specification. \nNotice that all the parameters to specify our chart are bundled into JSON and passed as an argument into VegaLite\n*/\nVegaLite({\n data: {values: data}, //the array of data to encode in the chart\n mark: \"bar\", //the mark to encode our data with \n encoding: { //specifications for our encoding\n y:{field: \"weather\", type: \"nominal\"},\n x:{aggregate: \"count\", type: \"quantitative\"},\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2209,"value":"//This is an example of a chart made using the Vega-Lite API. Here, we use method CHAINING to assign the parameters of our visualization (more on that below)\n\n//notice that we don't pass our chart specifications as name/value (aka key/value) pairs like above!\n\nvl.markBar() //the mark that we want to encode our data with is now a function\n .data(data) //pass our data to vega-lite as an array. you can also pass a URL as a string for vega-lite to parse\n .encode( //the encodings of our visualization. \n vl.y().fieldN('weather'),\n vl.x().count('count')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3210,"value":"-------------","pinned":false,"hidden":false,"mode":"md"},{"id":3356,"value":"### Breaking down the chart","pinned":false,"hidden":false,"mode":"md"},{"id":3537,"value":"Let's step through the pieces that define our chart.\n\n#### markBar()\nThis is the type of chart we're trying to make, by defining the mark. At 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*). Vega-Lite has several other [mark types](https://vega.github.io/vega-lite/docs/mark.html#types) to represent line and bar charts, maps, tables, etc.\n\nTry this out: \n> - Pass an option of ```{ size: 200 }``` to ```markCircle()```. \n> - Try ```markArea``` instead of ```markCircle```. \n> - Try ```markPoint({ shape: 'diamond' })```.","pinned":false,"hidden":false,"mode":"md"},{"id":3539,"value":"//Try changing the chart with these parameters above\n\nvl\n .markArea() //the mark that we want to encode our data with is now a function\n .data(data) //pass our data to vega-lite as an array. you can also pass a URL as a string for vega-lite to parse\n .encode(\n //the encodings of our visualization.\n vl.y().fieldN(\"weather\"),\n vl.x().count(\"count\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2337,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":2426,"value":"**What happens if we don't call the encoding function?**","pinned":false,"hidden":false,"mode":"md"},{"id":2429,"value":"//uncomment this and try it out\n\nvl.markBar().data(data).toObject()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2424,"value":"We haven't visually separated the points, so everything is overlaid on top of one another\n\n#### render()\n```render()```, well, renders and returns our chart, and can also take options such as ```{renderer: 'svg'}```. You can also use ```toObject()``` to return the Vega-Lite JSON specification, like we saw in the JSON spec example chart.\n","pinned":false,"hidden":false,"mode":"md"},{"id":3206,"value":"--------------------","pinned":false,"hidden":false,"mode":"md"},{"id":2094,"value":"## A side note on Chaining\n\nIn the Vega-Lite API example above, the functions are connected to each other with dots. This is called 'chain syntax', and it allows us to invoke multiple method calls in a neat and efficient way. Method chaining is widely used in D3 and the Vega-Lite API, as well as many other libraries like jQuery.\n\nRather than using variables to store the returned object in each method, we can chain these calls together in a single statement! The output of the first method is passed as an input to the next method in the chain.\n","pinned":false,"hidden":false,"mode":"md"},{"id":3079,"value":"vl.markBar().data(data).encode(vl.y().fieldN('weather'),vl.x().count('count')).render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2241,"value":"This is what our Vega-Lite API chart above would have looked like if we didn't use chain syntax:","pinned":false,"hidden":false,"mode":"md"},{"id":2110,"value":"//specify the encoding type to the variable 'graph'\ngraph = vl.markBar()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3143,"value":"//let's chain data to the variable 'dataEncodedGraph'\ndataEncodedGraph = graph.data(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3146,"value":"//assign the encodings to 'graphEncodings'\ngraphEncodings = dataEncodedGraph.encode(\n vl.y().fieldN(\"weather\"),\n vl.x().count()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3147,"value":"//now render graphEncodings\n\ngraphEncodings.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3171,"value":"Method chaining is great, and saves a lot of space!\n\nFor objects, the idea of 'chaining' is used to access properties that are nested within objects. Take a look at this object called ```product.``` ","pinned":false,"hidden":false,"mode":"md"},{"id":3158,"value":"product = ({\n name: 'Pencil',\n //properties is an object within an object. It is the value to the name (or key) called properties\n properties: {\n color: 'Red', //there are two key:pairs inside properties\n texture: 'Smooth',\n },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3188,"value":"//get properties from product\nproduct.properties","pinned":true,"hidden":false,"mode":"ojs"},{"id":3190,"value":"//get the color of the product\nproduct.properties.color","pinned":true,"hidden":false,"mode":"ojs"},{"id":3192,"value":"By the way, it is not required, though good practice, to check if the property of a key exists, before you go down to the next level if you're in a situation where you won't be sure of the properties that you could receive. You can use optional chaining with ```?.`` to make sure that the key in each level exists\n\nWhat happens if I look at whether ```.prop``` exists instead of ```.properties```","pinned":false,"hidden":false,"mode":"md"},{"id":3163,"value":"product?.prop?.color\n\n//this is equivalent to a ternary if statement, equal to\n\n//product.prop ? product.prop.color : undefined\n//or\n//^ check if product.prop == true; if true, return product.prop.color, else return undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":2419,"value":"-----------------------","pinned":false,"hidden":false,"mode":"md"},{"id":2446,"value":"## VEGA LITE EXAMPLES\n","pinned":false,"hidden":false,"mode":"md"},{"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 of the distribution of precipitation using a tick chart, also known as a strip plot.\n\nWhat is wrong with this chart?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"vl.markTick()\n .data(data)\n .encode(\n vl.x().fieldQ('precipitation')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2460,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":3396,"value":"Now, how about expanding this tick chart into a 2D visualization? Let's see the distribution of precipitation based on the types of weather","pinned":false,"hidden":false,"mode":"md"},{"id":3399,"value":"vl.markTick()\n .data(data)\n .encode(\n vl.x().fieldQ('precipitation'),\n vl.y().fieldN('weather') //uncomment this line to see how we can do comparisons betweeen preciptation and weather\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3998,"value":"### Operations in Vega Lite\n\nThere are a few common types of operations that you can do, such as ```count```, or computing ```averages```. The Vega Lite documentation has a full list [here](https://vega.github.io/vega-lite/docs/aggregate.html). We'll encounter a few, but let's look at some common ones here\n\n#### ```min/max```\n```.min()/.max()```, also represented as ```.aggregate('min')``` or ```.aggregate('max')```, gets the min or max value of a data variable\n\n#### ```mean/median```\n```.mean()/.median()```, also represented as ```.aggregate('mean')``` or ```.aggregate('median')```. Remember that mean is the sum of all the values divided by the number of values. Median represents the 'midpoint' of the range of data\n\n#### ```count```\n```.count()``` aggregates and returns the total count of data objects in each group. This bar chart counts up the total instances of each weather day in the dataset. ","pinned":false,"hidden":false,"mode":"md"},{"id":4085,"value":"---\n### 2D visualizations\n#### Bar Chart\nBar charts presents categorical data using bars proportional to the values they represent. ","pinned":false,"hidden":false,"mode":"md"},{"id":4000,"value":"//Number of days recorded for each weather category\nvl.markBar()\n .data(data)\n .encode(\n vl.x().fieldN(\"weather\"), \n vl.y().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4088,"value":"//Average wind speed for each weather category\nvl.markBar()\n .data(data)\n .encode(\n vl.x().fieldN(\"weather\"), \n vl.y().fieldQ('wind').aggregate('mean')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2474,"value":"### Colours\n^{With content from [Week 4 Vega-Lite Exploring Visual Forms](https://observablehq.com/@drlynb/week-4-vega-lite-exploring-visual-forms) by Lyn Bartram and [Vega-Lite Chart Types](https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite) by Visnu Pitiyanuvath}","pinned":false,"hidden":false,"mode":"md"},{"id":2505,"value":"Let's go back to our bar chart, and see how we can assign colors. I'll flip the axes around so it looks more traditional. \n\n_Note: _ ```.aggregate('mean')``` here encodes the mean values of the ```temp_max``` variable to color for each type of weather.","pinned":false,"hidden":false,"mode":"md"},{"id":2510,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldN('weather'),\n vl.y().count('count'),\n vl.color().fieldQ('temp_max').aggregate('mean')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2520,"value":"When we use a quantitative variable for color, Vega-lite will assign a default scale (aka scheme) to map values to colour. Note that we use _scheme_ for defined Vega Lite colors, whereas we will use _range_ for defined colors below.\n\nA full list can be seen [here](https://vega.github.io/vega/docs/schemes/).\n","pinned":false,"hidden":false,"mode":"md"},{"id":3389,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldN('weather'),\n vl.y().count('count'),\n vl.color().fieldQ('temp_max').aggregate('mean').scale({scheme: 'plasma'}) \n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2545,"value":"\nBut, does this make any sense to visualize the data like so? And why not?","pinned":false,"hidden":false,"mode":"md"},{"id":2574,"value":"#### Challenge 1:\n\n1. Compare the maximum wind speeds for each weather category. Use a bar chart (3 mins). ","pinned":false,"hidden":false,"mode":"md"},{"id":2601,"value":"//try it here\n\nvl\n .markBar()\n .data(data)\n .encode(\n vl.x().fieldN(\"weather\"),\n //vl.y().max('wind')\n vl.y().fieldQ(\"wind\").aggregate(\"max\"),\n vl.color().fieldN(\"weather\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":2697,"value":"### Histograms\nA histogram divides up the range of possible values in a data set into classes or groups. A histogram visualizes quantitative (continuous) data to show the **frequency distribution of that data** by **binning it into defined categories**.\n\nLet's take a look at a stacked histogram that visualizes maximum temperatures. Remember that histograms bin your continuous data points into specified ranges. Here, Vega-Lite automatically binned them for us into intervals of 5 based on the data.\n\nWhen might you want to use this chart? What does it tell you about the data?\nHow about if I want to also see this distribution based on the type of weather? We can do that by adding a bit of color. I'm going to create an array with some CSS colors","pinned":false,"hidden":false,"mode":"md"},{"id":2555,"value":"weatherColors = [\"pink\", \"cornflowerblue\", \"paleturquoise\", 'lightcoral', \"gold\"]\n//Remember that hue is not ordered! \n//How else might you color this","pinned":true,"hidden":false,"mode":"ojs"},{"id":2669,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldQ(\"temp_max\").bin({ step: 2 }), //call bin on this encoding\n vl.y().count(),\n\n //Let's uncomment the next line to see the breakdown by types of weather\n vl.color().fieldN('weather').scale({range: weatherColors})\n //assign colors to show each of the different weather types. Instead of using a scheme, we define the range of output as the weatherColors array listed\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3731,"value":"#### A side note on histogram bins and centrality\nWe can change the bin size of the histogram here using ```{step: #}```-- note how this affects the resulting visualization. The proper bin size depicts an accurate distribution of your data. The right type of centrality measurement should best represent the average of the data.\n\nIf I computed the mean, median, and mode of the average maximum temperature, I can see whether there is a large variance between these three measurements. These are the central measurements of the maximum temperature that tell me where most of the data points are clustered around:\n\n```\nMean: 16.43908281998628\nMedian: 15.6\nMode: 11.1\n```\n\nWhat does this histogram tell us about the distribution of average maximum temperature in the data? Can we assume centrality?\n","pinned":false,"hidden":false,"mode":"md"},{"id":3815,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldQ(\"temp_max\").bin(true), //pass in {step: 2}. Try adjusting the step size to 2, 3, 4, 5, and 10.\n vl.y().count(),\n\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2704,"value":"If we are primarily interested in looking at overall total number of days in comparison to maximum temperature, then this chart will tell us something. But if we're primarily wondering about differences between groups (e.g., how many rainy days had a lower maximum temperature compared to sunny days), then this histogram is not the best for comparison\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":2495,"value":"#### Stacked Bars\nStacked bar charts help emphasize the **part-whole** of data variables. The **most important attribute gets aligned on the x-axis**, while the second attribute might be relegated to a **secondary channel (e.g., color)**. \n\nThis stacked bar chart counts the number of recorded weather dates of each month. Remember that dates are a unique data type that are both cyclical and hierarchical.\n\nNotice how we can change the y axis to also normalize the count of records for recorded weather dates. Try uncommenting the line below that says ```.stack(\"normalize\").axis({ format: \"%\" }),```","pinned":false,"hidden":false,"mode":"md"},{"id":2480,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"utcmonth\"), //notice that we use fieldT\n vl.y().count().stack(\"normalize\").axis({ format: \"%\" }),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors }) //add color like the same as before\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2491,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":3572,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3228,"value":"### Line Charts\n","pinned":false,"hidden":false,"mode":"md"},{"id":2612,"value":"A line chart is best used to show **changes in values across time**.\n\nWhile we can start to pick out some interesting seasonal patterns from this visualization, time is continuous and a stacked bar chart conveying time might not be very clear at first glance. Let's take a look at how to make a line chart. \n\nHow many dimensions does this visualization show? How many encodings does it have?\nAnd what makes a line chart useful?","pinned":false,"hidden":false,"mode":"md"},{"id":2618,"value":"vl.markLine()\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"month\"), //notice that we use month instead of utcmonth because we don't want to use universal time\n vl.y().fieldQ('temp_max').aggregate('mean'),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3686,"value":"By the way, we can change the appearance of our marks in different ways. Here, we can change the ```opacity``` and ```strokeWidth``` of our lines to make them thicker. This will be much more useful when we add interaction later on in the semester, but we've got a teaser of things we can do. ","pinned":false,"hidden":false,"mode":"md"},{"id":3646,"value":"vl\n .markLine({ opacity: 0.25, strokeWidth: 2 }) //we change the strokeWidth and opacity of the lines\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"month\"), //notice that we use fieldT, and month instead of utcmonth\n vl.y().fieldQ(\"temp_max\").aggregate(\"mean\"),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2635,"value":"See anything strange? If we add a point overlay on the line chart, we can see that there are missing values for snow, but the line is still drawn. This is implying there is data where there isn't any. Seattle isn't cold enough to get snow year-round!\n\n\nNow, let's try adding the size of the points by passing in the ```{point: true}``` parameter to ```vl.markLine```. We can then change the size of the points to become bigger; let's encode them by the average maximum temperature.","pinned":false,"hidden":false,"mode":"md"},{"id":3240,"value":"FileAttachment(\"image@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3604,"value":"Let's try to replicate the above chart by changing the points and size of points below. \n\nPass ```{point: true}``` as an argument into ```.markLine()```. Then, encode ```vl.size()``` with the mean of ```temp_max```","pinned":false,"hidden":false,"mode":"md"},{"id":2641,"value":"//Uncomment the lines below \n\nvl.markLine({point: true}) //add points to our lines\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"month\"), //notice that we use fieldT, and month instead of utcmonth\n vl.y().fieldQ('temp_max').aggregate('mean'),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors }),\n vl.size().field('temp_max').aggregate('mean')\n //try changing the size of the points with vl.size!\n\n )\n .render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2646,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":2653,"value":"//To get VegaLite to do show missing values, we need to create them. We could create an empty row for every missing data & weather type, but for the sake of keeping our data simple we are simply creating a day for for every missing month and snow combination in this data.\ndataImpute = {\n let b = [];\n let a = [...data]; // use spread syntax to create clone of our original data b/c our data is immutable\n const m = new Date(2012, 5, 1); // create a date for the first month that we don't see snow\n const month = 5;\n for (let i = 0; i < 6; i++) {\n // loop through and add(push) new rows with 0 values for missing snow months\n\n a.push({\n date: new Date(m.setMonth(month - 1 + i)), //Note the month value in JS starts at 0 for january, so we add -1 to offset this\n precipitation: 0,\n temp_max: 0,\n temp_min: 0,\n wind: 0,\n weather: \"snow\"\n });\n }\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2660,"value":"//Let's visualize this line chart again. Now we see that there are missing points in our line chart to reflect this missing null data\n\nvl.markArea({ point: true }) //add points to our lines\n .data(dataImpute)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"month\"),\n vl.y().fieldQ(\"temp_max\").aggregate(\"mean\"),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2735,"value":"Again, we have one continuous line segment for snow showing that the average ```temp_max``` is 0 due to no snow. Technically true, though it can be a bit deceptive --- be careful of how you represent this data!\n\nLet's change the view, using our original ```data``` array. See what happens with the missing snow data. Replace ```markLine()``` with ```markArea()``` below. \n\nNow, what happens if we try to use ```markArea()``` in the graph above, where we added in those null values?\n\n**_Note_**: Since we set 0 for temp_max in the warmer months, the area chart here is more accurate to show that there is no average max_temp to be shown. Try replacing the 0 values in dataImpute with null values, and then see how the area chart goes wild. This is because Vega-Lite treats these values as 'not there', and it doesn't know what to do with them.","pinned":false,"hidden":false,"mode":"md"},{"id":2739,"value":"//this is an Area chart\n\nvl.markArea() //change markLine to markArea to make this an Area chart\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"month\"),\n vl.y().fieldQ(\"temp_max\").aggregate(\"mean\"),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2743,"value":"Time is continuous but there are no values to show that it did not snow in the summer, so a line chart creates the illusion that it snowed in the summer because of it's need to be continuous. What do you think of the area chart? Is it useful? \n\n### Scatterplot\nA scatterplot is the best for showing the relationship between **two numerical variables by encoding the two axes.**\n\nWhat if we take individual point for each day like a scatter plot. To do that we need to change the timeUnit to see each individual day on the plot\n","pinned":false,"hidden":false,"mode":"md"},{"id":2727,"value":"//this is an scatterplot chart\nvl\n .markPoint()\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"monthdate\"), //switch to monthdate, or play around with values such as year, day, etc.\n vl.y().fieldQ(\"temp_max\").aggregate(\"mean\"),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2793,"value":"Looks like some of our points disappeared. It may be that some days don't have any precipitation, but we still want to see them. Let's change what the **precipitation** values correspond to with the **size** of the circles. To do this we change the _scale_ domain. Scales have domains and ranges. \n\nThe **domain** refers to the _input_ data values for the scale. For quantitative data, this can take the form of a two-element array with minimum and maximum values. For ordinal or categorical data, this may be an array of valid input values.\n\nThe **range** of the scale represents the set of _output_ visual values. For example, we've mapped colors as a range because we want the visual output to correspond to different colors based on the data categories we defined. ","pinned":false,"hidden":false,"mode":"md"},{"id":2797,"value":"vl.markPoint({tooltip: {\"content\": \"data\"}, clip: true}) //this is a tooltip that shows data encoded to each point. try hovering over the circles on the scatterplots\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"monthdate\"), //switch to monthdate, or play around with values such as year, day, etc.\n vl.y().fieldQ('temp_max').aggregate('mean').scale({ domain: [20, 40] }),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors }),\n vl.size().fieldQ('precipitation').scale({domain: [1, 50]})\n )\n .width(800) //width and height specify a fixed size for the chart\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2825,"value":"**.scale()** is not limited to just the size of the marks, but can also be called on axes too! \n\n---\n### Challenges\nTry out the following exercises, and see how far you get\n\n#### Challenge 2\n\nTry this out on the chart below: \n> - Try calling ```.scale({domain: [1, 50]})``` on the *y-axis*. What changes?\n> - Change the range in ```vl.size()``` to a smaller number (e.g, [1, 10]). What changes? Why might you not want a smaller range?\n> - Try setting an encoding called ```vl.shape``` to the field ```weather```\n> - Play with the ```strokeWidth``` and ````opacity``` of the points, by passing them as arguments in ```.markPoint()```. Remember to use {} to pass them as arguments.\n ","pinned":false,"hidden":false,"mode":"md"},{"id":3966,"value":"\n//CHART FOR CHALLENGE 2\nvl.markPoint({tooltip: {\"content\": \"data\"}, clip: true, strokeWidth: 3, opacity: .5})\n .data(data)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"monthdate\"),\n vl.y().fieldQ('temp_max').aggregate('mean'),\n vl.color().fieldN(\"weather\").scale({ range: weatherColors }),\n vl.size().fieldQ('precipitation').scale({domain: [1, 50]})\n //vl.shape().fieldN('weather')\n )\n .width(800)\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3898,"value":"### Challenge 3\nTry showing the wind speed over different dates. When is it windiest in Seattle?\n","pinned":false,"hidden":false,"mode":"md"},{"id":4102,"value":"//try it here\n\nvl.markLine()\n .data(dataImpute)\n .encode(\n vl.x().fieldT('date').timeUnit('month'),\n vl.y().fieldQ('wind').aggregate('mean'),\n vl.color().fieldN('weather').scale({range: weatherColors})\n )\n .render()\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2856,"value":"#### Challenge 4:\n\nTry to replicate the chart like the one below (5 mins).\n","pinned":false,"hidden":false,"mode":"md"},{"id":3887,"value":"image4 = FileAttachment(\"image@4.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3961,"value":"//First, we have to filter out the data to only show days where there was rain or snow. We will learn how to do this within Vega-lite later, but use d3.filter is a trusty way to do this before we create our graph\n\nrainAndSnow = d3.filter(data, function (d) {\n return d.weather == \"rain\" || d.weather == \"snow\";\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3296,"value":"//Add your code for Challenge 4 here. It should look like the chart above\n//{tooltip: {\"content\": \"data\"}, clip: true} is a tooltip that shows data encoded to each point. try hovering over the circles on the scatterplots\n\nvl.markPoint({tooltip: {\"content\": \"data\"}, clip: true}) //add on code below\n .data(rainAndSnow)\n .encode(\n vl.x().fieldT('date').timeUnit('monthdate'),\n vl.y().fieldQ('wind').aggregate('mean'),\n vl.color().fieldN('weather').scale({range: weatherColors}),\n vl.size().fieldQ('precipitation')\n )\n .width(800)\n .height(400)\n .render()\n \n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3430,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3408,"value":"## EVEN MORE EXAMPLES (TIME PERMITTING)\n\nMore examples of visual charts in Vega Lite are available in [Tutorial Notebook 4](https://observablehq.com/@krispybird/iat-355-visual-forms-continued-building-more-charts-in-obse).\n\nThe [Vega-Lite Example Gallery](https://vega.github.io/vega-lite/examples/) also contains many examples of visualizations that can be created in Vega Lite. Note that this documentation uses the JSON spec, not the more recent API (what we've been using). See [Understanding the Vega Lite Reference] docs below.\n\n### Heatmap","pinned":false,"hidden":false,"mode":"md"},{"id":3410,"value":"vl.markRect() //content of tooltip contains the encoded data\n .data(data)\n .encode(\n vl.y().fieldO(\"date\").timeUnit(\"month\"),\n vl.x().fieldO(\"date\").timeUnit(\"date\"),\n vl.color().average(\"temp_max\").scale({ scheme: \"redyellowblue\", reverse: true })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3422,"value":"### Gantt Chart\nGantt charts are great for visualizing durations of tasks (nominal) over a time period (interval)","pinned":false,"hidden":false,"mode":"md"},{"id":3424,"value":"values = [\n {\"task\": \"A\", \"start\": 1, \"end\": 3},\n {\"task\": \"B\", \"start\": 3, \"end\": 8},\n {\"task\": \"C\", \"start\": 8, \"end\": 10}\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3426,"value":"vl.markBar()\n .data(values)\n .encode(\n vl.x().fieldQ('start'),\n vl.y().fieldO('task'),\n vl.x2().fieldQ('end'), //what if you comment this line out? //what happens if you use y2 instead\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3530,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1678,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":2193,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}