25:["$","title",null,{"children":"Data Visualization Curriculum (Follow-Along) | eldgzmnworkspace | Observable"}] 49:T5e8,// the code below provides a complex example for defining interactive selections and then binding them to components of a chart. The upper histogram shows the count of cars per year and uses an interactive selection to modify the opacity of points in the lower scatter plot, which shows horsepower versus mileage { // create an interval selection over an x-axis encoding const brush = vl.selectInterval().encodings('x'); // determine opacity based on brush const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1); // an overview histogram of cars per year // add the interval brush to select cars over time const overview = vl.markBar() .encode( vl.x().fieldO('Year').timeUnit('year') // extract year unit, treat as ordinal .axis({title: null, labelAngle: 0}), // no title, no label angle vl.y().count().title(null), // counts, no axis title opacity // modulate bar opacity based on the brush selection ) .params(brush) // add interval brush selection to the chart .width(400) // use the full default chart width .height(50); // set chart height to 50 pixels // a detail scatterplot of horsepower vs. mileage const detail = vl.markPoint() .encode( vl.x().fieldQ('Horsepower'), vl.y().fieldQ('Miles_per_Gallon'), opacity // modulate point opacity based on the brush selection ); // vertically concatenate (vconcat) charts return vl.data(cars).vconcat(overview, detail).render(); }4a:Tbdd,### Data Types - Input data is the first ingredient in effective visualizations - Data values can represent different forms of measurement #### Nominal (N) - _Nominal_ data--also called _categorical_ data--consists of category names - Allows you to 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" - "A is not equal to B" - The `country` field in the table above is _nominal_. - When visualizing _nominal_ data: - Be ready to perceive if values are the same or different: position, color hue (blue, red, green, etc.), and shape are all reasonable options #### Ordinal (O) - _Ordinal_ data consists of values that have a specific ordering - Allows you to 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" - "A is greater than B" - The `year` field in the table above is _ordinal_. #### Quantitative (Q) - _Quantitative_ data can measure numerical differences among values. There are multiple sub-types of quantitative data: - _Interval_ data: measure the distance (interval) between points: _what is the distance to value A from value B? (A - B)_ - **Example:** "A is 12 units away from B" - For _Ratio_ data the zero point is meaningful, so we can measure proportions or scale factos: _value A is what proportion of Value B? (A/B)_ - **Example:** - "A is 10% of B" - "B is 7 times larger than A" - The `year` field in the table above is a quantitative field (the value of year "zero" is subjective") - The `fertility` and `life_expect` fields in the table above are quantiative ratio fields (zero is meaningful for calculating proportions) - 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 > Vega-Lite represents quantitative data, but does not make a distinction between interval and ratio types #### Temporal (T) - _Temporal_ values measure time points or intervals - This type is a special case of quantitative values (timestamps) with rich semantics and conventions - **Example:** the Gregorian calendar - **Example temporal values:** - Date strings: `"2019-01-04"` or `"Jan 04 2019"` - Standardized date-times (ISO date-time format): `"2019-01-04T17:50:35.643Z"` - The temporal type in Vega-Lite supports reasoning about time unit units (year, month, day, hour, etc.), and provides methods for requesting specific time intervals. ### Summary - These data types are not mutually exclusive, but form a hierarchy: ordinal data supports nominal (equality) comparisons, while quantitative data support ordinal (rank-order) comparisons - Data types do _not_ provide a fixed categorization - **Example:** Data fields represented using a number does not have to be treated as a quantitative data type4b:T447,- Jacques Bertin's pioneering 1967 work [_Sémiologie Graphique (The Seminology of Graphics_](https://books.google.com/books/about/Semiology_of_Graphics.html?id=X5caQwAACAAJ) initiated the systemic study of marks, visual encodings, and backing data types. - The image above illustrates the following along with Bertin's recommendations for the data type comparisons they support - Position - Size - Value (brightness) - Texture - Color (hue) - Orientation - Shape Channels - The framework of data types, marks, and channels also guided _automated_ visualization design tools, such as: - 1986: [Mackinlay's APT (A Presentation Tool)](https://education.siggraph.org/static/HyperVis/concepts/apt_lo.htm) - More recently: [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)4c:T463,### Advanced Data Transformation - Examples above all use transformations (`bin`, `timeUnit`, `aggregate`, `sort`) that are defined relative to an encoding channel - If you want to apply a chain of multiple transformations or use transformations that don't integrate into encoding definitions, Vega-Lite supports data transformations defined separately from encodings. These are **applied to the data _before_ any encodings are considered**. - JavaScript can be used, but using built-in transformations allow visualizations to be published more easily, like with exporting the Vega-Lite JSON to use in a stand-alone web interface. Examples are as follows: - `calculate` - `filter` - `aggregate` - `window` #### Calculate - `calculate` transform can derive new fields - **Example:** The plot below provides an example of subtracting US gross from worldwide gross. The `calculate` transform takes a [Vega expression string](https://vega.github.io/vega/docs/expressions/) to define a formula over a single record. Vega expressions use JavaScript syntax. The `datum.` prefix accesses a field value on the input record.4d:T539,### Summary - For more details, including all the available transformations and their parameters, see the [Vega-Lite data transformation documentation](https://vega.github.io/vega-lite/docs/transform.html) - To engage in [_data wrangling_](https://en.wikipedia.org/wiki/Data_wrangling) - **Data wrangling** (sometimes referred to as _data munging_) is the process of transforming and mapping data from one "raw" data form into another format with the intent of making it more appropriate and valuable for a variety of downstream purposes such as analytics. - Using JavaScript, you can use built-in methods for - [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) - [strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) - [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) - Using additional utilities such as [d3-array](https://github.com/d3/d3-array) - Additional wrangling methods: - [Learn JS Data](https://observablehq.com/@dakoop/learn-js-data) - [Arquero library](https://observablehq.com/@uwdata/introducing-arquero) - Deeper dive into windowed transformations, see [Working with Window Queries](https://observablehq.com/@uwdata/working-with-window-queries)4e:T409,## [Scales, Axes, and Legends](https://observablehq.com/@uwdata/scales-axes-and-legends) - `scale`: a function that takes a data value as input (the scale _domain_) and returns a visual value, such as a pixel position or RGB color, as output (the scale _range_) - Charts also need reference elements--_guides_--that allow readers to decode the graphics - _axes_: visualize scales with spatial ranges - _legends_: visualize scales with color, size, or shape ranges ### Antibiotics Data - From the [vega-datasets](https://vega.github.io/vega-datasets/) collection - To learn which drug worked most effectively for which bacterial infection, performance of the three most popular antibiotics on 16 bacteria were gathered - In the table below: - The numeric values indicate the **minimum inhibitory concentration (MIC)** (a measure of the effectiveness of the antibiotic, which represents the concentration of antibiotic (in micrograms per milliliter) required to prevent growth in vitro.) - The `Gram_Staining` field is nominal4f:[] 29:{"id":"44cc6c8ac52575d2","slug":null,"title":"Data Visualization Curriculum (Follow-Along)","thumbnail":"5a7886b83a247d28a2af0a4fb19e54fdf2791f0eb4f48c8f01bb2ff3bc2f1913","access_level":"public","create_time":"$D2023-05-16T17:20:10.251Z","update_time":"$D2023-09-26T14:39:30.570Z","view_time":null,"first_public_time":"$D2023-05-16T17:20:10.251Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4c74450c9add579b","login":"eldgzmnwrkspce","name":"eldgzmnworkspace","avatar_url":"https://avatars-next.observableusercontent.com/16ea104b95a188867e21a7aadf64878feb787832eac280fdb24c3f8e6c9de2ff","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":874,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"551a8fa98eaf6ecd","login":"eldgzmn","name":"Elaine de Guzman","avatar_url":"https://avatars-next.observableusercontent.com/8fe1d42544226be993d04edc385eca919411c2e78e7cd7e34bb8f00815e824c2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"551a8fa98eaf6ecd","login":"eldgzmn","name":"Elaine de Guzman","avatar_url":"https://avatars-next.observableusercontent.com/8fe1d42544226be993d04edc385eca919411c2e78e7cd7e34bb8f00815e824c2","tier":null,"role":"editor"},{"type":"team","id":"4c74450c9add579b","login":"eldgzmnwrkspce","name":"eldgzmnworkspace","avatar_url":"https://avatars-next.observableusercontent.com/16ea104b95a188867e21a7aadf64878feb787832eac280fdb24c3f8e6c9de2ff","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualization Curriculum (Follow-Along)","cells":[{"id":0,"value":"# Data Visualization Curriculum (Follow-Along)\n> **URL:** [Data Visualization Curriculum](https://observablehq.com/@uwdata/data-visualization-curriculum)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"## [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)\n\n### Overview\n- Vega-Lite is a _declarative language_ for interactive data visualization\n - _Declarative_: you can provide a high-level specification of _what_ you want the visualization to include, in terms of _data_, _graphical marks_, and _encoding channels_, rather than having to specify _how_ to implement the visualization in terms of for-loops, low-level drawing commands, _etc._\n- Vega-Lite offers a powerful and concise visualization grammar for building a wide range of statistical graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import {v1} from '@vega/vega-lite-api-v5' // imports the Vega-Lite api library","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {printTable} from \"@uwdata/data-utilities\" // printTable utility for formatting data tables","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Data\n- Data in Vega-Lite is assumed to be formatted as a data table (or data frame) consisting of a set of named data _columns_.\n- When using Vega-Lite, datasets may be pre-loaded as an array of objects, or provided via a URL to load a network-accessible dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"data = require('vega-datasets@1') // import vega_datasets","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"cars = data['cars.json']() // load and parse cars data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"printTable(cars.slice(0,5)) // display the first five rows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"data['cars.json'].url // provides the URL to access the vega-datasets collection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"#### Data Frames `(df)`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"df = [\n {\"city\": \"Seattle\", \"month\": \"Apr\", \"precip\": 2.68},\n {\"city\": \"Seattle\", \"month\": \"Aug\", \"precip\": 0.87},\n {\"city\": \"Seattle\", \"month\": \"Dec\", \"precip\": 5.31},\n {\"city\": \"New York\", \"month\": \"Apr\", \"precip\": 3.94},\n {\"city\": \"New York\", \"month\": \"Aug\", \"precip\": 4.13},\n {\"city\": \"New York\", \"month\": \"Dec\", \"precip\": 3.58},\n {\"city\": \"Chicago\", \"month\": \"Apr\", \"precip\": 3.62},\n {\"city\": \"Chicago\", \"month\": \"Aug\", \"precip\": 3.98},\n {\"city\": \"Chicago\", \"month\": \"Dec\", \"precip\": 2.56},\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`Human-friendly format:\n\n${printTable(df, null, null)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"### Marks and Encodings\n- You can specify how you would like the data to be visualized with Vega-Lite\n- `mark`: geometric shape\n - Used to represent the data\n- You can create a new Vega-Lite mark instance using the `vl.mark*` methods","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"vl.markPoint() // creates a point mark\n .data(df) // Passes the data to the data() method\n .render() // Renders/draws the plot\n\n// The rendering consists of one point per row in the dataset, all plotted on top of each other. Need to specify positions for these points","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"To visually separate the points, we can map various **encoding channels** (or just **channels** for short) to fields in the dataset.\n- Example: We can encode the data field `city` using the `y` channel, which represents the y-axis position of the points.\n - Use the `encode()` method, passing its definitions for specific channels.\n \nSee code block below:\n- `encode()` method builds a key-value mapping between encoding channels (such as `x`, `y`, `color`, `shape`, `size`, etc.) to fields in the dataset, accessed by field name\n- `vl.` method provides a channel encoding, along with a _data type_ to guide the visualization design.\n- The `city` field is encoded as a _nominal_ type, indicating unordered, categorical values\n- `fieldN()` shorthand method to specify both the field name and a `'nominal'` type simultaneously","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"vl.markPoint()\n .view({width: 200})\n .data(df)\n .encode(vl.y().field('city').type('nominal'))\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"The above example shows data that's been separated by one attribute, but there are still multiple points overlapping within each category.\n\nAdding an `x` encoding channel can further separate the data points, such as mapping to the quantitative `precip` field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"vl.markPoint()\n .view({width: 400})\n .data(df)\n .encode(\n vl.x().fieldQ('precip'),\n vl.y().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"- `fieldQ()` method is used to instruct Vega-Lite to treat `precip` as a quantitative field (a real-valued number)\n - Grid lines and axis titles are automatically added as well\n- The complete set of type-specific field methods is:\n - `fieldN()` indicates a _nominal_ type (unordered, categorical data)\n - `field0()` indicates an _ordinal_ type (rank-ordered data)\n - `fieldQ()` indicates a _quantitative_ type (numerical magnitudes)\n - `fieldT()` indicates a _temporal_ type (corresponding to [date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) values)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"### Data Transformation: Aggregation\n- Vega-Lite has a built-in syntax for the _aggregation_ of data\n - Allows for more flexibility in how data is visualized\n- Example: We can compute the average of all values by specifying an aggregation function along with the field name:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"vl.markPoint()\n .view({width: 400})\n .data(df)\n .encode(\n vl.x().average(`precip`), // averages the values within the given category\n vl.y().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"- When averaging, the Vega-Lite API automatically assumes the result is a quantitative variable\n - Adding a `.type()` call allows you to specify a different treatment when aggregating\n- Vega-Lite supports a variety of aggregation functions, including `count`, `min` (minimum), `max` (maximum), `average`, `median`, and `stdev` (standard deviation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"### Changing the Mark Type\n- Marks can be changed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"vl.markBar() // provides a bar chart instead of individual points like vl.markPoint()\n .view({width: 400})\n .data(df)\n .encode(\n vl.x().average(`precip`),\n vl.y().fieldN(`city`)\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"- `x` and `y` assignments can be swapped","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"vl.markBar()\n .data(df)\n .encode(\n vl.y().average('precip'),\n vl.x().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"### Customizing a Visualization\n- By default, Vega-Lite makes some choices about properties of the visualization. These properties can also be customized\n- Examples:\n - `scale()`: modifies the scale\n - `title()`: set the title\n - `color`: specify the color of the mark by passing an object to the `mark*` method. Use a valid [CCS color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"vl.markPoint({color: 'firebrick'}) // changes the color of the points on the visualization\n .view({width: 600})\n .data(df)\n .encode(\n vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-Scaled Precipitation'), // scale() changes the scale\n vl.y().fieldN('city').title('City')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"### Multiple Views\n- A basic Vega-Lite visualization represents a plot with a single mark type\n- By using a set of _view composition_ operators, Vega-Lite can take multiple chart definitions and combine them to create more complex views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"vl.markLine()\n .view({width: 400})\n .data(cars)\n .encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"// The code below uses the same data as code above. However, the code below has been augmented and built in layers\n\n{ // line plot layer\n const line = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n // scatter plot layer\n const point = vl.markCircle().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n // layer operator that combines the two into a layered chart\n return vl.layer(line, point).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// Code below reuses a previous chart definition then invokes the mark method to generate a new chart definition with a different mark type\n{\n const mpg = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n\n return vl.layer(mpg, mpg.markCircle()).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"> **NOTE:** The `line` mark also includes a shorthand to generate a new layer for you. Try passing `{point:true}` to the `markLine` method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"// Code below displays the chart alongside other plots. Using the concatenation operator, you can place multiple charts side-by-side, either vertically or horizontally. hconcat() performs a horizontal concatenation of the two charts. vconcat() performs a vertical concatenation of the two charts (as shown in the code block below this one)\n\n{\n const mpg = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n \n const hp = mpg.encode(vl.y().average('Horsepower'));\n\n return vl.hconcat(\n vl.layer(mpg, mpg.markCircle()),\n vl.layer(hp, hp.markCircle())\n ).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"{\n const mpg = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n \n const hp = mpg.encode(vl.y().average('Horsepower'));\n\n return vl.vconcat(\n vl.layer(mpg, mpg.markCircle()),\n vl.layer(hp, hp.markCircle())\n ).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"### Interactivity\n- Vega-Lite supports interaction/interactivity\n- `tooltip()` encoding channel adds a tooltip upon mouse over","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"vl.markPoint()\n .view({width: 600, height: 400})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Origin'),\n vl.tooltip(['Name', 'Origin']) // show the Name and Origin fields in a tooltip\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"#### For more complex interactions\n- Vega-Lite provides a _selection_ abstraction for defining interactive selections and then binding them to components of a chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"### Aside: Examining JSON Output\n- The Vega-Lite API converts plot specifications to a JSON-compatible object format that conforms to the Vega-Lite schema.\n- You can use the `toObject()` method to inspect the specification that is sent to Vega-Lite:\n - `vl.x().average('precip')` has been expanded to a structure with the following:\n - `field` name\n - `type` for the data (automatically chosen to correspond to averages)\n - `aggregate` field\n - `vl.y().fieldN('city')` has also been expanded in a similar manner to `vl.x().average('precip')`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"> This part is key for taking what's been built in Observable with the VL API and retrieving the JSON spec for use in Deneb","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"// This part is key for taking what's been built in Observable with the VL API and retrieving the JSON spec for use in deneb\n\n{\n const plot = vl.markCircle().encode(\n vl.x().average('precip'),\n vl.y().fieldN('city')\n );\n \n return html`

${JSON.stringify(plot.toObject(), 0, 2)}

${JSON.stringify(plot.toObject(), 0, 2)}

`; // format JSON data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"## [Data Types, Graphical Marks, and Visual Encoding Channels](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels)\n\nA visualization represents data using a collection of _graphic 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- With a basic framework of _data types_, _marks_, _encoding channels_, we can concisely create a wide variety of visualizations\n\n### Global Development Data\n- 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).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"// First load the dataset from the vega-datasets collection into a JavaScript array\ngdd = (await require('vega-datasets@1'))['gapminder.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`${gdd.length} rows, ${Object.keys(gdd[0]).length} columns!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"printTable(gdd.slice(0,10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"- 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- There is also a `cluster` field with an integer code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"// Create a smaller data array filterd down to values for the year 2000 only:\ngdd2000 = gdd.filter(d => d.year === 2000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"printTable(gdd2000.slice(0,10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$4a","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"### Encoding Channels\n_Encodings_ are at the heart of Vega-Lite. Encodings bind data fields (with a given data type) to available encoding _channels_ of a chosen _mark_ type.\n\n> For a complete list of available channels, see the [Vega-Lite encoding documentation](https://vega.github.io/vega-lite/docs/encoding.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"#### `x`: Horizontal (x-axis) position of the mark.\n- Default choices of axis and title are made automatically.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"// The chart that displays from the code below, the choice of a quantitative data type results in a continuous linear axis scale\n\nvl.markPoint()\n .view({width: 600})\n .data(gdd2000)\n .encode(\n vl.x().fieldQ('fertility')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"#### `y`: Vertical (y-axis) position of the mark\n- Sets a mark's vertical position (y-coordinate)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"// The cluster field was added 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\nvl.markPoint()\n .view({width: 600})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"// Code below depicts what would happen if the O and Q field types are switched. It results in a scatter plot with linear scales for both axes\n\nvl.markPoint()\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"- By default, axes for linear quantitative scales include zero to ensure a baseline for comparing ratio-valued data\n- You can disable automatic inclusion of zero by configuring the encoding `scale` attribute if a zero baseline isn't useful (see example below):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"// Code below results in an axis that doesn't include zero by default.\n\nvl.markPoint()\n .view({width: 600, height: 250})\n .data(gdd2000)\n .encode(\n vl.x().fieldQ('fertility').scale({zero: false}),\n vl.y().fieldQ('life_expect').scale({zero: false})\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"#### `size`: Size of the mark. May correspond to area or length, depending on the mark type\n- `size` encoding channel sets a mark's size or extent\n- The meaning of the channel can vary based on the mark type:\n - `point` marks: the `size` channel maps to the pixel area of the plotting symbol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"// Code below has an augmented scatter plot by encoding population (pop) on the size channel. It results in a chart that now also includes a legend for interpreting the size values.\n\nvl.markPoint()\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"// The code below provides the same data as the code block above. However, the code below results in a customized span of sizes for 'pop'\n\nvl.markPoint()\n .view({width: 600, height: 250})\n .data(gdd2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]})\n // scale({range: [0, 1000]}) provides a customized span of sizes\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"#### `color` and `opacity`\n- `color`: Mark color, specified as a legal CSS color\n - Style of color encoding is highly dependent on the data type:\n - Nominal data will default to a multi-hued qualitative color scheme\n - Ordinal and quantitative data will use perceptually ordered color gradients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"// The cluster field is encoded using the color channel and a nominal (N) data type. It results in a distinct hue for each cluster value.\n\nvl.markPoint()\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"// Code below provides an example of when {filled: true} is added to the markPoint method\n\nvl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"- `opacity`: Mark opacity, ranging from 0 (fully transparent) to 1 (fully opaque)\n - Vega-Lite uses a bit of transparency (by default) to reduce over-plotting.\n - Opacity can be adjusted. Either by passing a default value to the `mark*` method or using a dedicated encoding channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"// The code below demonstrates how to provide a constant value to an encoding channel instead of binding a data field\n\nvl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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 )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"#### `shape`: Plotting symbol shape for `point` marks\n- Sets the geometric shape used by `point` marks.\n- Cannot by used by other mark types\n- Should only be used with nominal data, as perceptual rank-order and magnitude comparisons are not supported","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"// Code below has the cluster field encoded using shape and color. \n\nvl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"> **Redundant encoding:** When multiple channels are used for the same underlying data field. It results in a chart that combines both color and shape information into a single symbol legend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"#### Tooltips & Ordering\n- `tooltip`: Tooltip text to display upon mouse hover over the mark\n - Adds interactive tooltips to enable exploration\n - The `tooltip` encoding channel determines tooltip text to show when a user moves the mouse cursor over a mark\n\n- The example below provides tooltips. However, it doesn't allow you to access the tooltips for marks behind larger marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"vl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"- `order`: Mark ordering, determines line/area point order and drawing order\n - The `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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"vl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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 // order() allows you to access the tooltips that have other points overlapping\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"// The tooltip channel has been provided an array of encodings, one for each field that's being included (country, fertility, life expectancy)\n\nvl.markPoint({filled: true})\n .view({width: 600, height: 250})\n .data(gdd2000)\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 // Array in tooltip() provides the additional tooltip fields upon hover-over\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"- The array string in the code cell above is an alternative to writing `vl.tooltip().fieldN('name')` for all three field entries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"#### Column and Row Facets\n- `column`: Facet the data into horizontally-aligned subplots\n- `row`: Facet the data into vertically-aligned subplots\n- [_trellis plot_](https://www.originlab.com/doc/Origin-Help/Trellis-Plot): (also called **Trellis charts**, **Trellis graphs**, **Trellis displays**, **Trellis**) are a means of graphing multivariate data, as an array of _M X N_ panels. As a simple example, two \"primary variables\" might be chosen to represent a common set of axes (repeated in each panel), against which all combinations of two categorical variables (termed \"conditioning variables\") are plotted. Each combination of categorical values is plotted as a separate panel.\n - A trellis plot is one example of the more general technique of presenting data using [small multiples](https://en.wikipedia.org/wiki/Small_multiple) of views.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"vl.markPoint({filled: true})\n .data(gdd2000)\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 vl.column().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"The code block below provides the same data and visualizations as the code block above. However, the `height` and `width` have been set to create a smaller set of multiples. Additional changes:\n- `color` legend was removed by being set to `null`\n - Allows for better use of space and allows for the `size` legend to be at the `bottom` of the chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"vl.markPoint({filled: true})\n .data(gdd2000)\n .encode(\n vl.x().fieldQ('fertility'),\n vl.y().fieldQ('life_expect'),\n vl.size().fieldQ('pop').scale({range: [0, 1000]})\n .legend({orient: 'bottom', titleOrient: 'left'}),\n vl.color().fieldN('cluster')\n .legend(null),\n vl.opacity().value(0.5),\n vl.tooltip().fieldN('country'),\n vl.order().fieldQ('pop').sort('descending'),\n vl.column().fieldN('cluster')\n ) // The column and row encodings are translated into a new specification that uses the facet view composition operator\n .width(130)\n .height(130)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"### Graphical Marks\nVega-Lite includes a number of built-in mark types (not all are listed, for a complete list, see the [Vega-Lite mark documentation](https://vega.github.io/vega-lite/docs/mark.html)):\n- `markArea()`: Filled areas defined by a top-line and a baseline.\n- `markBar()`: Rectangular bars.\n- `markCircle()`: Scatter plot points as filled circles.\n- `markLine()`: Connected line segments.\n- `markPoint()`: Scatter plot points with configurable shapes.\n- `markRect()`: Filled rectangles, useful for heatmaps.\n- `markSquare()`: Scatter plot points as filled squares.\n- `markText()`: Scatter plot points represented by text.\n- `markTick()`: Vertical or horizontal tick marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"#### Point Marks\n> Scatter plot points with configurable shapes\n\n- `markPoint()`\n- This mark type conveys specific points--_scatter plots_ and _dot plots_.\n- Its `x` and `y` encoding channels need to be specified for 2D point positions\n- Uses `color`, `size`, and `shape` encodings to convey additional data fields.\n- **Example:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"vl.markPoint(\n //{filled: true, size: 100}\n // default provides the marks drawn with stroked outlines\n // Removing the \"//\" from the 2nd line would fill the shapes instead and also set a default size for the total pixel area of the point mark\n )\n .view({width: 600})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"### Circle Marks\n>Scatter plot points as filled circles\n\n- `markCircle()`\n- The `circle` mark type is a shorthand for `point` marks drawn as filled circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"vl.markCircle({size: 100})\n .view({width: 400})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"#### Square Marks\n> Scatter plot points as filled squares.\n\n- `markSquare()`\n- The `square` mark type is a shorthand for `point` marks drawn as filled squares.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"vl.markSquare({size: 100})\n .view({width: 400})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"#### Tick Marks\n> Vertical or horizontal tick marks.\n\n- `markTick()`\n- Conveys a data point using a short line segment or \"tick\"\n- Useful for comparing values along a single dimension with minimal overlap\n- A _dot plot_ drawn with tick marks is sometimes referred to as a [_strip plot_](https://datavizproject.com/data-type/strip-plot/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"vl.markTick()\n .view({width: 400})\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"#### Bar Marks\n> Rectangular bars.\n\n- `markBar()`\n- Draws a rectangle with a position, width, and height.\n- **Example:** The plot below is a simple bar chart of the population (`pop`) of each country.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"vl.markBar()\n //.width({step: 12})\n // The bar width is set to a default size.\n // To change the width, uncomment the 2nd line\n // It adds the step property of the markBar object's width attribute\n .data(gdd2000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"- Bars can also be stacked. This can be done by changing the following as shown in the example below:\n - Change the `x` encoding to use the `cluster` field\n - Encode `country` using the `color` channel\n - Disable the legend\n - Use tooltips for the country name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"vl.markBar()\n .view({height: 400})\n .data(gdd2000)\n .encode(\n vl.x().fieldN('cluster'),\n vl.y().fieldQ('pop'),\n vl.color().fieldN('country').legend(null), // the .legend(null) here disables the legend\n vl.tooltip().fieldN('country')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"- The example above creates a bar chart from a zero baseline, and the `y` channel only encodes the non-zero value (or height) of the bar\n- The bar mark can also specify starting and ending points to convey ranges\n - **Example:** See chart below with the following differences\n - Uses the `x` (starting point) and `x2` (ending point) channels to show the range of life expectancies within each regional cluster\n - Uses the `min` and `max` aggregation functions to determine the end points of the range\n - Alternatively, you can use `x` and `width` to provide a starting point plus offset, such that `x2 = x + width`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"vl.markBar()\n .view({width: 400})\n .data(gdd2000)\n .encode(\n vl.x().min('life_expect'),\n vl.x2().max('life_expect'),\n vl.y().fieldN('cluster')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"#### Line Marks\n> Connected line segments.\n\n- `markLine()`\n- Connects plotted points with line segments (a line's slope conveys information about the rate of change)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"vl.markLine(\n // {strokeWidth: 3, opacity: 0.5, intterpolate: 'monotone'}\n // Uncomment the second line to customize the graph above\n // strokeWidth determines the line thickness\n // opacity adds some transparency\n // interpolate adjusts the interpolation used to connect data points by setting the mark's parameter\n // monotone provides smooth lines that also guarantee not to inadvertently generate \"false\" minimum or maximum values as a result of interpolation\n)\n .data(gdd)\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(450)\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"- `line` marks can be used to create _slope graphs_, which highlight the change in value between two comparison points using line slopes\n - **Example:** See chart below\n - Slope graph below compares the populations of each country at minimum and maximum years (1955 to 2005)\n - Also created a new data array filtered to the given years\n - Be default, Vega-Lite places the years close together. To space them out, use the `width step` property to indicate the size (in pixels) of discrete steps along the axis\n - Adjusting the `scale padding` property to change the amount of spacing (as a fraction of the `step` size) along the edges of the axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"vl.markLine({opacity: 0.5})\n .data(gdd.filter(d => d.year === 1955 || d.year === 2005))\n .encode(\n vl.x().fieldO('year').scale({ padding: 0.1 }),\n vl.y().fieldQ('pop'),\n vl.color().fieldN('country').legend(null),\n vl.tooltip().fieldN('country')\n )\n .width({step: 100})\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"#### Area Marks\n> Filled areas defined by a top-line and a baseline.\n\n- `markArea()`\n- Combines aspects of `line` and `bar` marks:\n - Visualizes connections (slopes) among data points, but also shows a filled region, with one edge defaulting to a zero-valued baseline\n- **Example:** The chart below is an area chart of population over time for just the United States","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"// Defines \"dataUS\" which filters all the data in gdd to only the United States as the country.\ndataUS = gdd.filter(d => d.country === 'United States')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"vl.markArea(\n //{interpolate: 'monotone'}\n // Similar to line marks, area marks support an interpolate parameter\n // Uncomment the second line to see the interpolation\n)\n .data(dataUS)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('fertility')\n )\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"- `area` marks also support stacking as shown below\n - By default, stacking is performed relative to a `zero` baseline.\n - Other `stack` options are available:\n - `center`: to stack relative to a baseline in the center of the chart, creating a _streamgraph_ visualization\n - `normalize`: to normalize the summed data at each stacking point to 100%, enabling percentage comparisons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"dataNA = gdd.filter(d =>{\n return d.country === 'United States' \n || d.country === 'Canada' \n || d.country === 'Mexico';\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"vl.markArea()\n .data(dataNA)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('pop'),\n vl.color().fieldN('country')\n )\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"vl.markArea()\n .data(dataNA)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('pop').stack('center'),\n //vl.y().fieldQ('pop').stack('normalize'),\n // switch the 5th and 7th lines to see the chart with either center or normalize\n vl.color().fieldN('country')\n )\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"- To disable stacking, set the `stack` property to `null`\n - Add `opacity` as a default mark property to ensure overlapping areas can be seen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"vl.markArea({opacity: 0.5})\n .data(dataNA)\n .encode(\n vl.x().fieldO('year'),\n vl.y().fieldQ('pop').stack(null),\n vl.color().fieldN('country')\n )\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"- Also supports data-driven baselines, with both the upper and lower series determined by data fields\n - Use the `x` and `x2` (or `y` and `y2`) channels to provide end points for the area mark\n - **Example:** See chart below which visualizes the range of minimum and maximum fertility, per year, for North American countries:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"vl.markArea()\n .data(dataNA)\n .encode(\n vl.x().fieldO('year'),\n vl.y().min('fertility'),\n vl.y2().max('fertility')\n )\n .height(300)\n .width({step: 40})\n .render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"// Code below swaps the x and y channels\nvl.markArea()\n .data(dataNA)\n .encode(\n vl.y().fieldO('year'),\n vl.x().min('fertility'),\n vl.x2().max('fertility')\n )\n .height({step: 40})\n .width(425)\n .render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"### Summary\n- Additional Vega-Lite [marks](https://vega.github.io/vega-lite/docs/mark.html) and [encoding](https://vega.github.io/vega-lite/docs/encoding.html)\n- **Visual Encoding:**\n - See Bertin's taxonomy of visual encodings from [_Sémiologie Graphique_](https://books.google.com/books/about/Semiology_of_Graphics.html?id=X5caQwAACAAJ), as adapted by [Mike Bostock](https://bost.ocks.org/mike/) (see image below)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":574,"value":" $\"Bertin's$
\nBertin's taxonomy of visual encodings from Sémiologie Graphique, as adapted by Mike Bostock.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":584,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"## [Data Transformation](https://observablehq.com/@uwdata/data-transformation)\n\nData transformation is an integral part of visualization: choosing the variables to show and their level of detail is just as important as choosing appropriate visual encodings\n\n### The Movies Dataset\n- From the [vega-datasets](https://vega.github.io/vega-datasets/) collection\n- This data includes variables such as the film name, director, genre, release date, ratings, and gross revenues\n - **Note:** The films are from unevenly sampled years, using data combined from multiple sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"movies = (await require('vega-datasets@1'))['movies.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`${movies.length} rows, ${Object.keys(movies[0]).length} columns!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"printTable(movies.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"### Histograms\n- A **histogram** is a diagram consisting of rectangles whose area is proportional to the frequency of a variable and whose width is equal to the class interval\n- **Example:** See block below\n - Transformation below will involve _binning_ data into discrete groups and _counting_ records to summarize those groups to create a [Historgram](https://en.wikipedia.org/wiki/Histogram)\n - Example shows a scatter plot showing movie ratings from Rotten Tomatoes versus ratings from IMDB users","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"vl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating')\n )\n .height(300)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"- The data above can be _binned_. _Bin_ the data field to group numeric values into discrete groups.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"// The code below results in a set of ten bins of equal step size, each corresponding to a span of ten ratings points\n\nvl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin(true),\n // .bin(true) uses default binning settings\n vl.y().fieldQ('IMDB_Rating')\n )\n .height(300)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"As shown below, `.bin({maxbins: 20})` sets the maximum bin count (`maxbins`) to 20, which doubles the number of bins. Each bin corresponds to a span of five rating points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"vl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),\n vl.y().fieldQ('IMDB_Rating')\n )\n .height(300)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"With the data binned, you can now summarize the distribution of Rotten Tomatoes ratings, as shown in the code block below applying the following:\n- Drop the IMDB ratings and instead use the `y` encoding channel to show an aggregate `count` of records\n- Results in the vertical position of each point indicating the number of movies per Rotten Tomatoes rating bin\n- As the `count` aggregate counts the number of total records in each bin regardless of the field values, we do not need to include a field name in the `y` encoding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":622,"value":"//vl.markCircle()\nvl.markBar()\n // comment out the first line and uncomment the 2nd line to view the histogram\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),\n vl.y().count()\n )\n .height(300)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"A histogram can also be created for IMDB ratings by changing the field in the `x` encoding channel, shown below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"vl.markBar()\n .data(movies)\n .encode(\n vl.x().fieldQ('IMDB_Rating').bin({maxbins: 20}),\n vl.y().count()\n )\n .height(300)\n .width(425)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"**Example:** What happens if both axes are binned of the original plot (see below)\n- Unfortunately, _overplotting_ results in details being lost since many points are atop each other","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"vl.markCircle()\n .view({width: 400, height: 300})\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),\n vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20})\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"- To form a 2D histogram, add a `count` aggregate. Since both the `x` and `y` encoding channels are already taken, different encoding channels must be used to convey the counts. See below for an example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":650,"value":"vl.markCircle()\n .view({width: 400, height: 300})\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),\n vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20}),\n vl.size().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"- A [_heatmap_](https://en.wikipedia.org/wiki/Heat_map)--a two-dimensional histogram--can be created by encoding counts using the `color` channel and change the mark type to `bar.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":655,"value":"vl.markBar()\n .view({width: 400, height: 300})\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating').bin({maxbins: 20}),\n vl.y().fieldQ('IMDB_Rating').bin({maxbins: 20}),\n vl.color().count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"### Aggregations\n- See [full set of available aggregation functions](https://vega.github.io/vega-lite/docs/aggregate.html#ops)\n\n#### Averages and Sorting\n- [_average_ aka the _arithmetic mean_](https://en.wikipedia.org/wiki/Arithmetic_mean)\n- **Example:** The visualization below provides the genre along the `y` axis and plot `average` Rotten Tomatoes ratings along the `x` axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"vl.markBar()\n .view({width: 350})\n .data(movies)\n .encode(\n vl.x().average('Rotten_Tomatoes_Rating'),\n vl.y().fieldN('Major_Genre')\n .sort(vl.average('Rotten_Tomatoes_Rating').order('descending'))\n // The .sort() in the line above tidies up the visualization.\n // Comment the line .sort() line out to view the visualization without sort\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"#### Medians and the Inter-Quartile Range\n- The [**median**](https://en.wikipedia.org/wiki/Median) is a point that split the data evenly. The median is less sensitive to outliers, and is referred to as a [robust statistic](https://en.wikipedia.org/wiki/Robust_statistics)\n- Plot below uses a `median` aggregate and sorts by those values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"vl.markBar()\n .view({width: 425})\n .data(movies)\n .encode(\n vl.x().median('Rotten_Tomatoes_Rating'),\n vl.y().fieldN('Major_Genre')\n .sort(vl.median('Rotten_Tomatoes_Rating').order('descending'))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"- The plot below displays the [**_inter-quartile range_ (IQR)**](https://en.wikipedia.org/wiki/Interquartile_range)\n - The IQR is the range in which the middle half of data values reside\n - A [_quartile_](https://en.wikipedia.org/wiki/Quartile) contains 25% of the data values\n - The IQR consists of the two middle quartiles\n- To visualize ranges, use the `x` and `x2` encoding channels to indicate the starting and ending points. Use the aggregate functions `q1` (the lower quartile boundary) and `q3` (the upper quartile boundary) to provide the IQR.\n - `q2` is the median","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"vl.markBar()\n .view({width: 400})\n .data(movies)\n .encode(\n vl.x().q1('Rotten_Tomatoes_Rating'),\n vl.x2().q3('Rotten_Tomatoes_Rating'),\n vl.y().fieldN('Major_Genre').sort(vl.median('Rotten_Tomatoes_Rating').order('descending'))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"#### Time Units\n- `timeUnit` is a type of transform to map release dates to the `month` of the year.\n - Result is similar to binning, but with meaningful time intervals\n - Time units include:\n - `year`\n - `quarter`\n - `date` (numeric day in month)\n - `day` (day of the week)\n - `hours`\n - Compound units\n - `timeYM` (year-month)\n - `timeHM` (hours-minutes)\n - [Complete list of time units](https://vega.github.io/vega-lite/docs/timeunit.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"vl.markArea()\n .data(movies)\n .encode(\n vl.x().month('Release_Date'),\n vl.y().median('US_Gross')\n //vl.y().median('Worldwide_Gross')\n )\n .height(300)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"vl.markArea()\n .view({width: 400, height: 300})\n .data(movies)\n .transform(\n vl.calculate('datum.Worldwide_Gross - datum.US_Gross').as('NonUS_Gross')\n )\n .encode(\n vl.x().month('Release_Date'),\n vl.y().median('NonUS_Gross')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"#### Filter\n- The `filter` transform creates a new table with a subset of the original data, removing rows that fail to meet a provided [predicate](https://en.wikipedia.org/wiki/Predicate_%28mathematical_logic%29) test\n- Similar to `calculate` transform\n- Expressed using the [Vega expression language](https://vega.github.io/vega/docs/expressions/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"vl.markCircle()\n .view({width: 400, height: 300})\n .data(movies)\n .transform(\n //vl.filter('datum.Major_Genre == \"Romantic Comedy\"')\n vl.filter('year(datum.Release_Date) < 1970')\n )\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().median('IMDB_Rating')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"#### Aggregate\n- Aggregates can be specified separately as a pre-processing step for other transforms\n- The output of an `aggregate` transform is a new data table with records that contain both the `groupby` fields and the computed `aggregate` measures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"vl.markBar()\n .view({width: 400})\n .data(movies)\n .transform(\n vl.groupby('Major_Genre')\n .aggregate(vl.average('Rotten_Tomatoes_Rating').as('Average_Rating'))\n )\n .encode(\n vl.x().fieldQ('Average_Rating'),\n vl.y().fieldN('Major_Genre')\n .sort(vl.field('Average_Rating').order('descending'))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"#### Window\n- `window` performs calculations over sorted groups of data records\n- Can support the following tasks:\n - Ranking\n - Lead/lag analysis\n - Cumulative totals\n - Running sums or averages\n- Values calculated by `window` are written back to the input data table as new fields\n- Operations include the aggregate operations previously seen along with the following specialized operations\n - `rank`\n - `row-number`\n - `lead`\n - `lag`\n- Vega-Lite documentation that lists [all valid window operations](https://vega.github.io/vega-lite/docs/window.html#ops)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":726,"value":"vl.markBar()\n .view({width: 450})\n .data(movies)\n .transform(\n // transforms to remove records without a director\n vl.filter('datum.Director != null'),\n\n // sums up the worldwide gross for all films, grouped by director\n vl.aggregate(vl.sum('Worldwide_Gross').as('Gross')).groupby('Director'),\n\n // sorts by gross and uses the rank operation to calculate rank scores according to\n // that sort order\n vl.window(vl.rank().as('Rank')).sort(vl.field('Gross').order('descending ')),\n\n // Limit the data to only records with a rank value less than or equal to 20\n vl.filter('datum.Rank < 20')\n )\n .encode(\n vl.x().fieldQ('Gross'),\n vl.y().fieldN('Director').sort(vl.field('Gross').order('descending'))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"- [Cumulative distribution](https://en.wikipedia.org/wiki/Cumulative_distribution_function)\n - **Example:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"vl.markLine({interpolate: 'step-before'})\n .view({width: 400, height: 300})\n .data(movies)\n .transform(\n \n // Filters to the subset of films for which we have run time\n vl.filter('datum.Running_Time_min != null'),\n\n // aggregate is applied to count the number of films per duration\n // (implicitly using \"bins\" of 1 minute each)\n vl.groupby('Running_Time_min').aggregate(vl.count().as('Count')),\n\n // window transform is then used to compute a running total of counts across bins\n // sorted by increasing running time\n vl.window(vl.sum('Count').as('Cumulative_Sum')).sort(vl.field('Running_Time_min'))\n \n )\n .encode(\n vl.x().fieldQ('Running_Time_min').title('Duration (min)'),\n vl.y().fieldQ('Cumulative_Sum').title('Cumulative Count of Films')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"antibiotics = (await require('vega-datasets@1'))['burtin.json'].url","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"printTable(await fetch(antibiotics).then(res => res.json())) // JavaScript Fetch API","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"### Configuring Scales and Axes\n\n#### Plotting Antibiotic Resistance: Adjusting the Scale Type","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":753,"value":"// The code below shows that the MIC values span orders of magnitude:\n// most points cluster on the left, with a few large outliers to the right.\n// By default, Vega-Lite uses a linear mapping between the domain values (MIC) and the range values (pixels)\n\nvl.markCircle()\n .view({width: 400})\n .data(antibiotics)\n .encode(\n vl.x().fieldQ('Neomycin')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"vl.markCircle()\n .view({width: 400})\n .data(antibiotics)\n .encode(\n vl.x().fieldQ('Neomycin')\n\n // Changes the scale type. sqrt is the square root scale type.\n // Distances in the pixel range now correspond to the square root of distances in the data domain.\n .scale({type: 'sqrt'})\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"vl.markCircle()\n .view({width: 400})\n .data(antibiotics)\n .encode(\n vl.x().fieldQ('Neomycin')\n\n // Uses the logarithmic scale (log) instead\n .scale({type: 'log'})\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"- [logarithmic scale](https://en.wikipedia.org/wiki/Logarithmic_scale)\n - In a standard linear scale, a visual (pixel) distance of 10 units might correspond to an _addition_ of 10 units in the data domain\n - A logarithmic transform maps between multiplication and addition, such that `log(u) + log(v) = log(u * v)`\n - A visual distance of 10 units corresponds to _multiplication_ by 10 units in the data domain, assuming a base 10 logarithm\n - The `log` scale above defaults to using the logarithm base 10, but we can adjust this by providing a `base` parameter to the scale\n\n#### Styling an Axis\n- The axis can be reversed, see the code below for an example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"vl.markCircle()\n .view({width: 400})\n .data(antibiotics)\n .encode(\n vl.x().fieldQ('Neomycin')\n .scale({type: 'log'}).sort('descending')\n // .sort('descending') reverses the axis\n .axis({orient: 'top'})\n // Updates the axis attribute and puts the title text at the top along with the axis\n .title('Neomyxin MIC (μg/ml, reverse log scale)')\n // .title('') provides the desired title text\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"#### Adjusting Grid Lines, Tick Counts, and Sizing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"vl.markCircle({size: 80})\n // adjusts the pixel size to 80px\n .data(antibiotics)\n .encode(\n vl.x()\n .fieldQ('Neomycin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n // domain helps to balance the plot\n .axis({tickCount: 5})\n // Specifies a target tickCount property for the axis\n // tickCount is treated as a suggestion to Vega-Lite\n .title('Neomycin MIC (μg/ml, reverse log scale)'),\n vl.y()\n //.fieldQ('Streptomycin')\n .fieldQ('Penicillin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n // domain helps to balance the plot\n .axis({tickCount: 5})\n // Specifies a target tickCount property for the axis\n // tickCount is treated as a suggestion to Vega-Lite\n .title('Streptomycin MIC (μg/ml, reverse log scale)')\n ).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"### Configuring Color Legends\n- Utilizes the `color` channel as a nominal data type.\n - Unless specified, the color scheme will automatically be chosen to provide perceptually-distinguishable colors for nominal (equal or not equal) comparisons.\n - An explicit scale mapping from the data `domain` to the color `range`\n- Vega-Lite includes a variety of built-in color schemes.\n - See the [Vega color scheme documentation](https://vega.github.io/vega/docs/schemes/#reference)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"vl.markCircle({size: 80})\n .data(antibiotics)\n .encode(\n vl.x()\n .fieldQ('Neomycin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n .axis({tickCount: 5})\n .title('Neomycin MIC (μg/ml, reverse log scale)'),\n vl.y()\n .fieldQ('Penicillin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n .axis({tickCount: 5})\n .title('Neomycin MIC (μg/ml, reverse log scale)'),\n vl.color()\n .fieldN('Gram_Staining')\n .scale({domain: ['negative', 'positive'], range: ['hotpink', 'purple']})\n // Sets the colors\n .legend({orient: 'left'}) // comment this line out and enable .legend(null) to view plot without a legend\n // Changes the legend orientation\n // .legend(null)\n // Line above when not commented out will result in removing the legend from the plot\n )\n .width(250)\n .height(250)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"vl.markCircle({size: 80})\n .data(antibiotics)\n .transform(\n vl.calculate('split(datum.Bacteria, \" \")[0]')\n .as('Split'),\n vl.calculate(\n 'indexof([\"Salmonella\", \"Staphylococcus\", \"Streptococcus\"], datum.Split) >= 0 ? datum.Split : \"Other\"'\n )\n .as('Genus')\n).encode(\n vl.x()\n .fieldQ('Neomycin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n .axis({tickCount: 5})\n .title('Neomycin MIC (μg/ml, reverse log scale)'),\n vl.y()\n .fieldQ('Penicillin')\n .sort('descending')\n .scale({type: 'log', domain: [0.001, 1000]})\n .axis({tickCount: 5})\n .title('Penicillin MIC (μg/ml, reverse log scale)'),\n vl.color()\n .fieldO('Genus')\n .scale({\n domain: ['Salmonella', 'Staphylococcus', 'Streptococcus', 'Other'],\n range: ['rgb(76,120,168)', 'rgb(84,162,75)', 'rgb(228,87,86)', 'rgb(121,112,110)']\n })\n)\n .width(250)\n .height(250)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"The `color` channel can also be used to encode quantitative values.\n - **Note:** Color is not as effective for conveying quantities as position or size encodings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":815,"value":"vl.markRect()\n .data(antibiotics)\n .encode(\n vl.y()\n .fieldN('Bacteria')\n .sort(\n vl.max('Penicillin')\n .order('descending')\n )\n .axis({\n orient: 'right', // orient axis on the right side of chart\n titleX: 7, // set x-position to 7 pixels right of chart\n titleY: -2, // set y-position to 2 pixels above chart\n titleAlign: 'left', // use left-aligned text\n titleAngle: 0 // undo default title rotation\n }),\n vl.color()\n .fieldQ('Penicillin')\n .scale({type: 'log', scheme: 'plasma', nice: true})\n // nice: true helps to align domain to human-friendly numbers\n .legend({titleOrient: 'right', tickCount: 5})\n .title('Penicillin MIC (μg/ml)')\n )\n .title({\n text: 'Penicillin Resistance of Bacterial Strains',\n anchor: 'start', // anchor and left-align title\n offset: 5 // set title offset from chart\n })\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"## [Multi-View Composition](https://observablehq.com/@uwdata/multi-view-composition)\n- An alternative to \"over-loading\" a single chart is to instead compose multiple charts in a way that facilitates rapid comparisons\n- Some operations for _multi-view composition_:\n - **_layer_**: place compatible charts directly on top of each other\n - **_facet_**: partition data into multiple charts, organized in rows or columns\n - **_concatenate_**: position arbitrary charts within a shared layout\n - **_repeat_**: take a base chart specification and apply it to multiple data fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"printTable(weather.slice(0, 10)) // first ten rows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"printTable(weather.slice(-10)) // last ten rows","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"### Layer\n- Common way of combining multiple charts is to _layer_ marks on top of each other\n- If the underlying scale domains are compatible, we can merge them to form _shared axes_.\n- If either of the _x_ or _y_ encodings are not compatible, we might instead create a dual-axis chart, which overlays marks using separate scales and axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":832,"value":"vl.markArea({opacity: 0.3})\n .data(weather)\n .encode(\n vl.x()\n .month('date'),\n vl.y()\n .average('temp_max'),\n vl.y2()\n .average('temp_min'),\n vl.color()\n .fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"vl.markLine()\n .data(weather)\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2')\n .as('temp_mid')\n )\n .encode(\n vl.x()\n .month('date'),\n vl.y()\n .average('temp_mid'),\n vl.color()\n .fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"// combines the two plots above\n\n{\n const tempMinMax = vl.markArea({opacity: 0.3})\n .data(weather)\n .encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min'),\n vl.color().fieldN('location')\n );\n const tempMid = vl.markLine()\n .data(weather)\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')\n )\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location') \n );\n\n return vl.layer(tempMinMax, tempMid)\n // return vl.layer(tempMid, tempMinMax)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"#### Dual-Axis Charts\n- Default setting: layered charts use a shared domain\n - The values for the x-axis or y-axis are combined across all the layers to determine a shared extent\n - Default behavior assumes that the layered values have the same units\n- If you want to use different y-axis scales, you'll need to specify how you want Vega-Lite to resolve the data across layers\n - One case is to resolve the y-axis scale domains to be independent rather than use a shared domain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"{\n const tempMinMax = vl.markArea({opacity: 0.3})\n .encode(\n vl.x().month('date').title(null).axis({format: '%b'}),\n vl.y().average('temp_max').title('Avg. Temperature °C'),\n vl.y2().average('temp_min')\n );\n \n const precip = vl.markLine({interpolate: 'monotone', stroke: 'grey'})\n .encode(\n vl.x().month('date').title(null),\n vl.y().average('precipitation').title('Precipitation')\n );\n \n return vl.layer(tempMinMax, precip)\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"### Facet\n- Faceting involves subdividing a dataset into groups and creating a separate plot for each group\n- The `column` encoding channel can be used to facet the data by weather type\n - `color` can also be used as a redundant encoding, using a customized color range\n- Faceted charts also support resolving to independent scales or axes across plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"vl.markBar()\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.x()\n .fieldQ('temp_max')\n .bin(true)\n .title('Temperature (°C)'),\n vl.y()\n .count()\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"{\n const colors = {\n domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],\n range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']\n };\n \n return vl.markBar()\n .data(weather)\n .transform(vl.filter('datum.location == \"Seattle\"'))\n .encode(\n vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),\n vl.y().count(),\n vl.color().fieldN('weather').scale(colors),\n vl.column().fieldN('weather')\n )\n .width(150)\n .height(150)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"// example of faceted charts where they support resolving to independent scales or axes across plots\n{\n const tempMinMax = vl.markArea({opacity: 0.3})\n .encode(\n vl.x().month('date')\n .title(null)\n .axis({format: '%b'}),\n vl.y()\n .average('temp_max')\n .title('Avg. Temperature (°C)'),\n vl.y2()\n .average('temp_min'),\n vl.color()\n .fieldN('location')\n );\n\n const tempMid = vl.markLine().encode(\n vl.x().month('date'),\n vl.y().average('temp_mid'),\n vl.color().fieldN('location')\n );\n\n return vl.layer(tempMinMax, tempMid)\n .facet({column: vl.field('location')})\n .data(weather)\n .transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))\n .resolve({axis: {y: 'independent'}})\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null