31:T4cd,md` - Here the rendering consists of one point per row in the dataset, all plotted on top of each other, since we have not yet specified positions for these points. - To differentiate the points for different rows, we will use the visual encoding channels. - Visual Encodings are specified using the [encode](https://vega.github.io/vega-lite/docs/encoding.html) function. It creates a mapping between encoding channels (like [x, y](https://vega.github.io/vega-lite/docs/encoding.html#position), [color, shape](https://vega.github.io/vega-lite/docs/encoding.html#mark-prop), etc) and fields in the dataset. Multiple mappings from data fields to different encoding channels are passed as a list in the encode function (seperated by commas). - The order of operations in Vega-Lite matters. So the order in which methods are called will make a difference. For instance, it is illegal to call encode after calling render. - **Documentation**: - [Vega-Lite API encoding](https://vega.github.io/vega-lite-api/api/#encodings) - list of all possible encoding functions in Vega-Lite API - [Vega-Lite Encoding Doc](https://vega.github.io/vega-lite/docs/encoding.html) - detailed documentation to explore and learn more about encodings.`32:T579,md `

### Concluding thoughts: - Vega-Lite has a lot of functionality. We have just covered the tip of the iceberg. - Most people like vega-lite because of the beautiful default choices and the ease of iterating quickly. - Similar graphs in d3.js takes hundreds of lines. We made these in less than 10 lines. - If you are looking for quick graphs which don't require extreme customization, vega-lite can be a great choice. - Check out more resources below. ### For Further Exploration: - To learn more about the motivation and basic concepts behind Vega-Lite, watch the [Vega-Lite presentation video from OpenVisConf 2017](https://www.youtube.com/watch?v=9uaHRWj04D4). - [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum) - [Data Types, Graphial Marks, and Visual Encoding Channels](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels?collection=@uwdata/visualization-curriculum) - [Data Transformations in Vega-Lite](https://observablehq.com/@uwdata/data-transformation?collection=@uwdata/visualization-curriculum) - [Scales, Axes, and Legends](https://observablehq.com/@uwdata/scales-axes-and-legends?collection=@uwdata/visualization-curriculum) - [Multi-View Composition](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum) `33:[] 2f:{"title":"CSE 412 Section 3: Vega-Lite","cells":[{"id":0,"value":"md`# CSE 412 Section 3: Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`Welcome to Section 3.\n\nToday's agenda:\n- Introduction to vega-lite.\n- Getting hands-on experience with vega-lite.\n\nWe will focus on static visualizations. \n\nNext section will focus on Interactive Visualizations.\n\nCheck out the resources at the end if you want to explore any topic in more detail.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"html` $\"Vega-Lite$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`## What is Vega-Lite?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"\nmd`\n### Vega-Lite:\n- [Declarative](https://en.wikipedia.org/wiki/Declarative_programming) Language.\n- **Purpose:** Interactive Data Visualization with a powerful and concise visualization grammar.\n- Uses [JSON](https://en.wikipedia.org/wiki/JSON) to describe charts.\n- Vega-Lite API allows to generate the corresponding JSON specification using method calls similar to ggplot2.\n- We will mostly use [Vega-Lite API](https://github.com/vega/vega-lite-api) (more convenient and programmatic) - a set of JavaScript methods that produce Vega-Lite JSON specification as output.\n- Vega-Lite JSON specification can be used for advanced purposes and we will take a look at converting from API to JSON specification at the end.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"md`**Note:** In principle, Vega-Lite is all just JSON. Vega-Lite API is just a separate wrapper that allows the ease of working with method calls. JSON format is a good choice for the language because it easily supports programmatic generation which can be easily used and manipulated by other tools, like custom UIs or the API for example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`### Declarative Language?\n- User provides a specification of what they want.\n- Vega-Lite handles the implementation.\n- Specification includes data, graphical marks, encoding channels, etc. This establishes a mapping between data fields and visual encoding channels. We will see what this means in the rest of this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`\n

\n## Imports\n\nTo start, we will import the necessary \\`vega-lite-api\\` library:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`\n

\n## Data\n**Let's bring in some data.**\n\nWe will work with two datasets.\n- **cars:** This is one of the vega-datasets that we worked with in section 1.\n- **weather:** A small explicitly created weather dataset. \n\n**Tip**: It is generally a good idea to use artificial or small datasets during the development process as you can see all the values of a small dataset. Vega-Lite enables shifting datasets very easily without changing encoding channels.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"cars = (await require('vega-datasets@1'))['cars.json']() // import cars","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"printTable(cars.slice(0, 5)) // display first 5 rows.","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"weather = [\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"},{"id":268,"value":"printTable(weather)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`\n

\n## Graphical Marks and Encodings\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`\n- To create a visualization, we invoke multiple methods on the vega-lite (vl) object. \nEach method provides some part of the specification required to render the desired visualization.\n- [mark* methods](https://vega.github.io/vega-lite-api/api/#chart-constructors) - The type of graphical mark (geometric shape) to use. For eg, markPoint can be used for point marks.\n- [data](https://vega.github.io/vega-lite-api/api/data) method: specify the dataset for the visualization.\n- [render](https://vega.github.io/vega-lite-api/api/data#render) method: Compile and render the visualization with the given specification.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`Let's look at an example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"vl.markPoint() // use mark point\n .data(weather) // use weather dataset\n .render() // compile and render the visualization","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`Let's use the position encoding to separate the overlapping points in the example above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"vl.markPoint() // use mark point\n .data(weather) // use weather dataset\n .encode(\n vl.y().field('city').type('nominal'), //map the city field to y channel with nominal type.\n vl.x().field('precip').type('quantitative')\n )\n .render() // compile and render the visualization","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`\n- [field](https://vega.github.io/vega-lite-api/api/#references) method is used to specify the field in the dataset as the target.\n- type method is used to specify the type of the field - *nominal, ordinal, quantitative, or temporal*.\n- The above two methods can be combined into one by using the following methods:\n - [fieldN](https://vega.github.io/vega-lite-api/api/fieldN) for nominal fields.\n - [fieldO](https://vega.github.io/vega-lite-api/api/fieldO) for ordinal fields.\n - [fieldQ](https://vega.github.io/vega-lite-api/api/fieldQ) for quantitative fields.\n - [fieldT](https://vega.github.io/vega-lite-api/api/fieldT) for temporal fields.\n\n*The code section below converts the code in the previous section to equivalent code with shortened methods.* \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"vl.markPoint() // use mark point\n .data(weather) // use weather dataset\n .encode(\n vl.y().fieldN('city'), // same as field('city').type('nominal')\n vl.x().fieldQ('precip') // same as field('precip').type('quantitative')\n )\n .render() // compile and render the visualization","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`### 👉Practice 1\n\nLet's try more marks, field types, and encoding channels.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`\n1. Try changing markPoint to markSquare, markCircle, markArea, markBar, etc.\n2. Try adding more encoding channels like color, shape (only works with markPoint), size, etc.\n\n3. Try randomly changing fieldN to fieldQ or fieldO to see the effect of types on visualization.\n\nLook at the comments in the code below to follow.\n\n**Note**: Repeated encodings on the same field is called Redundant Encoding. We'll learn more about how this can help in perception later in the course.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"vl.markPoint() // Change markPoint to: markSquare, markCircle, markArea, or markBar\n .data(weather)\n .encode(\n vl.y().fieldN('city'),\n vl.x().fieldQ('precip'),\n // add color channel to city field, nominal type\n \n // add shape channel to city field, nominal type\n // Note: For shape channel to work, change the mark to markPoint\n \n // add size channel to precip field, quantitative type\n \n // add opacity channel to precip field, quantitative type\n \n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`==> *Check end of notebook for solutions*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`We will learn more about how to make smart choices about visual encoding channels throughout this course.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`\n

\n## Data Transformations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`In the Data-Wrangling section, we used arquero to perform various data transformations.\n\nVega-Lite has the ability to perform a large number of common transformations directly through its API. \n\nWe'll explore some here but there are a lot lot more!\nHere is the documentation for all the [Data Transformations](https://vega.github.io/vega-lite/docs/transform.html) that you can do with Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`#### Here is the cars dataset again:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"printTable(cars.slice(0,10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"md`Let's say we want to understand the relationship between the \\`Cylinders\\` in a car and the \\`Miles_per_Gallon\\`.\n### 👉Practice 2\nUsing what you have learnt, try to render a scatterplot that shows \\`Cylinders\\` on the x axis and the \\`Miles_per_Gallon\\` on the y axis. You have all the tools to make this now.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"md`==> *Check end of notebook for solutions*

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`Now let's say instead we are interested in understanding the \\`Miles_per_Gallon\\` that a car provides as a function of \\`Cylinders\\` rather than just the scatterplot. One way to approach this problem would be to look at the average \\`Miles_per_Gallon\\` on the y channel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"vl.markCircle({color:'firebrick'})\n .data(cars)\n .encode(\n vl.x().fieldO('Cylinders'),\n vl.y().average('Miles_per_Gallon'), // computes average of miles per gallon grouped over other channels.\n ).render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`\n### 👉Practice 3\nIn the code above, try replacing average with median, max, min, count and see if the results make sense.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"md`\n

\n## Scales, Axes, and Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"md`So far, we have only used the default configurations given by vega-lite. Although Vega-Lite makes smart choices, a lot of situtations require a more fine-grained control of the visualizations. In this section, we will learn about how to use scales, axes, and legends in Vega-Lite.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"md` \n> \"Scales are functions that map from an input domain to an output range.\" \n-Mike Bostock\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`By default Vega-Lite uses a linear mapping between the domain values and the range values. To get a better overview of the data, we can apply a different scale transformation. Let's look at an example to understand [Scales](https://vega.github.io/vega-lite/docs/scale.html#type). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"md`In the code above, we plot the \\`Horsepower\\` of the weather dataset on the x channel and \\`Miles_per_Gallon\\` on the y channel. Here, Vega-Lite uses linear scales by default. However, we can change this scale to a number of different scales like log scale, sqrt scale, etc. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"md`##### log Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower').scale({type:'log'}), // use log scale\n vl.y().fieldQ('Miles_per_Gallon').scale({type:'log'}) // use log scale\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":980,"value":"md`Voilà! We can see an almost inverse linear relationship in the two variables of interest.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"md`##### sqrt Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon').scale({type:'sqrt'}), // use sqrt scale\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"md`We can apply different scales to different encoding channels to present the insights that we wish to reveal through our data!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"md`### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"md`In the charts above, Vega-Lite picks the titles for the different axes based on the data field mapped to that specific scale. However, we can customize the titles any way we want. In the example above, we have \\`Miles_per_Gallon\\` on the y channel with underscores which doesn't look very presentable. Let's change that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon') // add custom title\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`**Note:** Passing null to title method will remove the title.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"md`We can also give a title to the overall chart by using the title method directly on the encoded object. For example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"plot = {\n return vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')\n )\n .title('Miles per Gallon vs Horsepower') // Title for the overall chart\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"md`We can change the position of the axis by using the axis method and providing the orient property. For example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower')\n .axis({\n orient: 'top' // place x axis on the top\n }),\n vl.y().fieldQ('Miles_per_Gallon')\n .axis({\n orient: 'right' // place y axis on the right\n })\n .title('Miles per Gallon'),\n )\n .title('Miles per Gallon vs Horsepower')\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1071,"value":"md`### Legends and some more of Scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md`In the example below, we plot \\`Cylinders\\` on x axis and \\`Miles_per_Gallon\\` on the y axis. We also use color channel for the \\`Cylinders\\` field that gives us an auto generated legend.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldQ('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Cylinders')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1102,"value":"md`We can customize the default legend generated by Vega-Lite by using the legend method. Let's explore how to do that!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"md`As a starting step, we can change the position of the legend by passing the orient property to the legend method. Let's move the legend to the bottom of the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldQ('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Cylinders')\n .legend(\n {orient: 'bottom'} // move legend at bottom\n )\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`Let's move the legend title to the left by using the titleOrient property.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldQ('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Cylinders')\n .legend(\n {orient: 'bottom', titleOrient: 'left'} // move legend at bottom, legend title to left.\n )\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1138,"value":"md`Up to this point, we have used scales only on position channels like x and y. We can also use scales on other channels. Here, we'll explore the scales for color channel. In the example below we have used the *tableau10* scheme.\nCheck out the inbuilt [Vega-Lite Color Schemes](https://vega.github.io/vega-lite/docs/scale.html#scheme) for more information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldQ('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Cylinders')\n .scale({scheme: 'tableau10'})\n .legend(\n {orient: 'bottom', titleOrient: 'left'} // move legend at bottom, legend title to left.\n )\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`\n

\n## Multi-View Composition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"md`Now consider this. Being a car expert, you realize that the cars with different origins should not be compared with each other as done in some of the graphs above. Below we look at how to visualize the different origins seperately.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"md`Vega-Lite provides two very handy encoding channels called **row** and **column**. We can use these to seperate out the visualizations based on some data field, \\`Origin\\` in our case.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"vl.markCircle({color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldO('Cylinders'),\n vl.y().average('Miles_per_Gallon'),\n vl.column('Origin')\n ).render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`### 👉Practice 4\nIn the code above, change column to row and see the changes. \n\n**Note:** Column and Row are based on the more general facet operator. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"md`### Layer Operator\nWith the help of layer operator, Vega-Lite allows us to develop different compatible charts separately and directly place them on top of each other.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"md`In the example below, we have a layered chart to visualize \\`Miles_per_Gallon\\` for different numbers of \\`Cylinders\\`. In the first layer, we see the entire dataset shown as points in the firebrick color. In the second layer, we only see the teal ticks representing the average for each cylinder. With the help of layer operator, we can visualize the two related charts together.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"{\n const averageTicks = vl.markTick({filled:true, color:'teal',\n 'thickness': 2})\n .data(cars)\n .encode(\n vl.x().fieldO('Cylinders'),\n vl.y().average('Miles_per_Gallon').title('Miles per Gallon'),\n );\n \n const allPoints = vl.markPoint({filled:true, color:'firebrick'})\n .data(cars)\n .encode(\n vl.x().fieldO('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon'),\n vl.opacity().value(0.3)\n );\n \n return vl.layer(allPoints, averageTicks)\n .title('Cylinders vs Miles per Gallon')\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"md`### Concatenate\nIf we want to lay multiple charts next to each other, we can use the vconcat operator for vertical concatenation or hconcat operator for horizontal concatenation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1298,"value":"md`\n### 👉Practice 5\nIn the code above, try replacing layer with hconcat or vconcat and see the results.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`Here is an example of using the hconcat operator to visualize Miles per Gallon against Horsepower and Acceleration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"horsepower_acceleration = {\n const mpgHorsepower = vl.markPoint({filled:true, color:'firebrick'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')\n )\n .title('Miles per Gallon vs Horsepower');\n \n const mpgAcceleration = vl.markPoint({filled:true, color:'steelblue'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Acceleration'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')\n )\n .title('Miles per Gallon vs Acceleration');\n \n return vl.hconcat(mpgHorsepower, mpgAcceleration).render()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1325,"value":"md`Check out the [Multi-View Composition notebook](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum) to learn more about these and other powerful operators like facet, repeat, etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"md`\n

\n## JSON Specification`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1441,"value":"md`\nIn this section, we will learn how to convert from the API calls (everything we have done so far) to JSON specification.\nInternally, Vega-Lite is just a JSON specification of the visualizations. The API allows us to work with Vega-Lite using method calls rather then manipulating the JSON. However, if needed, we can go one level down and start working directly with the JSON specification.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"md`\n### Converting from API to JSON\n\nTo look at the JSON output produced by the API calls, use the \\`toSpec\\` method in place of the \\`render\\` method.\nWhile the \\`render\\` method displays the chart, the \\`toSpec\\` method returns a JavaScript object with the JSON specification.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"md`In the example below, we will look at the Miles per Gallon vs Horsepower chart from the cars dataset that we used before. Instead of rendering, we will look at the specification.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"specification = vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')\n )\n .title('Miles per Gallon vs Horsepower') // Title for the overall chart\n .toSpec() // return the JSON specification","pinned":true,"hidden":false,"mode":"ojs"},{"id":1501,"value":"md`\n### Displaying the JSON specification\n\nTo render the visualization, we will need to import the \\`vega-embed\\` function as follows.\n\\`vega-embed\\` function takes in JSON specification as input and displays the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"embed = require(\"vega-embed@3\") // import vega-embed function and store it locally as embed.\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1513,"value":"embed(specification)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1515,"value":"md`Let's make some changes to the JSON specification. Before making the changes, we will clone the object to prevent affecting previous charts and then make changes on the cloned object.\n\n**Note:** JSON is a very common data interchange format. What this means is that to exchange objects across the web, you can't simply send Javascript objects. They are first converted to string (\\`JSON.stringify\\`) by the sender, then sent through the network, and then converted back to Javascript object (\\`JSON.parse\\`) by the receiver.\n\nFor more information on JSON, check [this](https://en.wikipedia.org/wiki/JSON) Wikipedia entry.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"specification_copy = JSON.parse(JSON.stringify(specification)) // make a deep copy","pinned":true,"hidden":false,"mode":"ojs"},{"id":1587,"value":"md`**Note:** In the line above, we have used a very common hack to clone a JavaScript object. We are not actually sending the object over a network. However, when we convert an object to string and parse it back, we get a new deep copy of the object. \nTip: You can use \\`JSON.stringify\\` to port your specification from observable to your final project.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"specification_copy.title = \"Relationship between Miles per Gallon and Acceleration\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1539,"value":"specification_copy.encoding.x = {\n field: \"Acceleration\",\n type: \"quantitative\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"specification_copy","pinned":true,"hidden":false,"mode":"ojs"},{"id":1519,"value":"embed(specification_copy) // run this cell to see the changes","pinned":true,"hidden":false,"mode":"ojs"},{"id":1548,"value":"md`By making changes to the JSON specification directly and using \\`vega-embed\\` function on the new specification, we were able to change the chart as seen above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md`\n

\n## Solutions to Practice\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`### Practice 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"vl.markPoint() // Change markPoint to: markSquare, markCircle, markArea, or markBar\n .data(weather)\n .encode(\n vl.y().fieldN('city'),\n vl.x().fieldQ('precip'),\n // add color channel to city field, nominal type\n vl.color().fieldN('city'),\n // add shape channel to city field, nominal type\n vl.shape().fieldN('city'),\n // add size channel to precip field, quantitative type\n vl.size().fieldQ('precip'),\n // add opacity channel to precip field, quantitative type\n vl.opacity().fieldQ('precip'),\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"md`

\n### Practice 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"vl.markCircle({color:'firebrick'}) // all kinds of named css colors can be passed here.\n .data(cars)\n .encode(\n vl.x().fieldQ('Cylinders'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.tooltip(['Name', 'Origin']) // optional teaser\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`**Optional Teaser:** Try to hover over the points in the graph above. Cool, right? This was done using the tooltip channel. Try to see if that makes sense in the code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`\n

\n## Acknowledgements\n\nDeveloped by [Aayush Chhabra](https://www.aayushchhabra.com) at the University of Washington based on the work from Jeffrey Heer [@jheer](https://observablehq.com/@jheer), Dominik Moritz, Jake VanderPlas, Brock Craft, Jane Hoffswell and others..\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}