29:null 2a:["$","title",null,{"children":"Introduction to the Observable HQ notebooks and the Plot library | antonbardera | Observable"}] 2f:T98d,# The Plot library **Visual encoding** is the way in which data is mapped into visual structures, upon which we build the images on a screen. Each data item is represented using **marks** or geometrical primitives. The changes in the mark’s appearance based on a data attribute are called **channels**. The [Plot library](https://github.com/observablehq/plot/blob/main/README.md) is a JavaScript library for exploratory data visualization, but it doesn’t have chart types like most of the charting libraries. Instead, each visualization is defined by the visual encoding, i.e., the marks and channels. Plot library internally uses **D3** and you can configure highly complex visualizations, but Plot’s goal is to help you get a meaningful visualization quickly. So, the great advantage with respect to D3 is that in Plot simple things are simple, but not in D3. ## Marks and channels There are several mark types: - [Dots](https://observablehq.com/@observablehq/plot-dot?collection=@observablehq/plot) - [Bars](https://observablehq.com/@observablehq/plot-bar?collection=@observablehq/plot) - [Line](https://observablehq.com/@observablehq/plot-line?collection=@observablehq/plot) - [Area](https://observablehq.com/@observablehq/plot-area?collection=@observablehq/plot) - [Text](https://observablehq.com/@observablehq/plot-text?collection=@observablehq/plot) - ... Here, there's the [complete list](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot#marks) of the different mark types in Plot. Then, through the use of visual channels, we will be able to modify each mark according to the data values. All marks support the following optional channels: - **fill**: a fill color; bound to the color scale - **fillOpacity**: a fill opacity; bound to the opacity scale - **stroke**: a stroke color; bound to the color scale - **strokeOpacity**: a stroke opacity; bound to the opacity scale - **strokeWidth**: a stroke width (in pixels) - **opacity**: an object opacity; bound to the opacity scale Then, each mark will have some specific channels. For instance, the *Dot* mark has the following optional channels: **x** (the horizontal position), **y** (the vertical position), **r** (the radius), **rotate** (the rotation angle in degrees clockwise), and **symbol** (the categorical symbol). Let's see an example of how to create a Plot 2D scatterplot from the *cars* dataset that you used in last week's task.30:T5e6,## Scales Plot uses [scales](https://observablehq.com/@observablehq/plot-scales) to map abstract values in your data to visual values in Plot, such as x- or y- position, or color. Thus, scales are functions that map values in the data domain to the graphical domain. For instance, in the previous example, it takes *Horsepower* data values and converts them to pixels positions in the plot. In Plot, scales are named: **x** or **y** for position; **fx** or **fy** for facet position (we will see facets in the latter part of this notebook); **r** for radius; or **color**. A plot can have multiple scales but at most one scale of a given name. Mark channels are bound to scales; for example, a dot’s **x** channel is bound to the **x** scale. The channel name and the scale name are often the same, but not always; for example, a bar’s **y1** and **y2** channels are both bound to the **y** scale. A scale is configured primarily by its input **domain** and output **range**: the domain is a set of abstract values typically derived from data, such as a time interval [*start*, *end*] or temperature interval [*cold*, *hot*]; the range is a set of visual values, such as an extent of the chart in pixels [*left*, *right*] or a color interval [*blue*, *red*]. ### Continuous scales This kind of scale may be used for any type of continuous variables, numerical or time-based. By default, Plot computes the domain from the minimum and maximum values, but we can modify it in the *plot()* function call.31:T554,### Discrete scales Some data is merely ordinal and some categorical (a.k.a. nominal) such as the origin of the car makers. Plot obtains the domain from all the different values existing on the data. To encode such data as position, a point or band scale is required. A point scale divides space into uniformly-spaced discrete values and it is commonly used for scatterplots (dot marks) of ordinal data (see the box plot example below). A band scale divides space into uniformly-spaced and -sized discrete intervals and it is commonly used for bar charts (bar marks). ### Color scales While position is the most salient, and thus more important, encoding, many visualizations also employ a [color](https://observablehq.com/@observablehq/plot-scales?collection=@observablehq/plot#cell-40) encoding. This encoding may be from a continuous variable, where the default type of quantitative color scale is linear, or discrete variable, where a few colors are defined (note that if the size of the categorical domain exceeds the number of colors in the scheme, colors will be reused). In case of continuous variables, several [color schemes](https://github.com/observablehq/plot/blob/main/README.md#color-options) are already defined on Plot (in fact, on D3). Let's see how to use them. In case we want to codify the *Displacement* to a color channel, we have to do:32:[{"id":"531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","href":"https://static.observableusercontent.com/files/531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","name":"testDataJsonExample.json","type":"application/json","lastModified":1671645491167.226,"size":646},{"id":"c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","href":"https://static.observableusercontent.com/files/c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","name":"GironaWeatherData.csv","type":"text/csv","lastModified":1671645491167.226,"size":9013}] 2d:{"id":"caabcd075f9ab030","slug":null,"title":"Introduction to the Observable HQ notebooks and the Plot library","thumbnail":"6ec9ca4143663b6f977e4b6dc6fa4ad47f3af2cb7aa4a36dc2bc9ef58f9f812f","access_level":"public","create_time":"$D2022-12-21T17:58:11.167Z","update_time":"$D2022-12-22T12:25:24.296Z","view_time":null,"first_public_time":"$D2022-12-21T17:58:11.167Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"dc63de81f2766bde","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":"starter_2024"},"version":551,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}],"members":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Introduction to the Observable HQ notebooks and the Plot library","cells":[{"id":0,"value":"# Introduction to the Observable HQ notebooks and the Plot library\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"This page is just a *very first* introduction to **Observable HQ** for the students of the Multimèdia i Interfícies d'Usuari course. We will present this platform since it is:\n- Simple\n- Allows an easy prototyping\n- Easy to share your work with your colleagues\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":360,"value":"In Observable, you can both use ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":354,"value":"**Markdown** or","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":358,"value":"HTML to represent text.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":367,"value":"[Markdown](https://www.markdownguide.org/basic-syntax/) is a lightweight markup language for creating formatted text using a plain-text editor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":189,"value":"## JavaScript expressions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":93,"value":"You can declare variables and functions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"y = x + 2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"x = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"{\n let f = 0;\n f =20;\n return f;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"xx = [12,4,23,6]\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"x * 10 +3 +xx[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"and show their values. For instance, x is equal to ${x} and z is equal to ${z}. \n\nNote that the order doesn't matter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"z = square(y);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"square=x=>x*x;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"htmlcreator = function(word){\n return html`

Hello ${word}!

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"htmlcreator(\"world\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"md`## Input elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"Sometimes you need some input values. There are many ways to do that! Sliders, selectors,...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":388,"value":"Observable has the project [Inputs](https://observablehq.com/collection/@observablehq/inputs) that provides lightweight interface components — buttons, sliders, dropdowns, tables, and the like — help you explore data and build interactive displays. For a walkthrough of how you might use these to support data analysis, see [Hello, Inputs!](/@observablehq/hello-inputs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":377,"value":"viewof value = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"viewof age = Inputs.range([0, 80], {label: \"Age\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"age","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"The current slider value is **${value}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":384,"value":"viewof selected = Inputs.select([\"clear\", \"cloudy\", \"rainy\", \"windy\"], {label: \"Select the desired weather\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"The current selection is **${selected}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":430,"value":"You can also create forms with multiple input elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":426,"value":"viewof form = Inputs.form({\n option1: Inputs.checkbox([\"A\", \"B\", \"C\"], {label: \"Select some\"}),\n option2: Inputs.range([0, 100], {label: \"Amount\", step: 1}),\n option3: Inputs.radio([\"A\", \"B\"], {label: \"Select one\"}),\n option4: Inputs.select([\"A\", \"B\"], {label: \"Select one\"})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"form.option1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"form.option2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"form.option3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"form.option4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"*Tiny task*: create a radio button that allows to choose between summer, autumn, winter, or spring and show the selected option in the next cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":194,"value":"md`## Drawings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"You can also include drawings using [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"{\n const context = DOM.context2d(128, 128);\n context.fillStyle = 'rgb(200, 20, 30)';\n context.fillRect(10, 10, 50, 50);\n context.fillStyle = 'rgba(20, 200, 30, 0.4)';\n context.fillRect(50, 30, 120, 60);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"md`or SVG (you can learn more about SVG on this [link](https://www.w3schools.com/graphics/svg_intro.asp))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":396,"value":"viewof width = Inputs.range([10, 100], {label: \"Width\", value: 30, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"viewof height = Inputs.range([10, 100], {label: \"Height\", value: 30, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":198,"value":"md`## Data` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"To load data, you can have attached files (see on the top nav bar) and read them using csv, json,... calls.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"json = FileAttachment(\"testDataJsonExample.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"weather = await FileAttachment(\"GironaWeatherData.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"md`You can also download any object by clicking on the cell menu.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"md`## Import libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":502,"value":"cars = require(\"@observablehq/cars\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"In this first example, we want to compare the *Horsepower* and the *Weight_in_lbs* by using a scatterplot.\n\n**Question**: Which are the data elements? Which are the marks that are commonly used in scatterplots? Which visual channels do we use to encode the data?\n\nGreat answers (I hope so 😉)! Let's plot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":506,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\"})\n ]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"We can also have multiple marks on the same plot and tune their appearance. For instance, we could add a linear regression line:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":511,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\", fill:\"red\", opacity:0.4}),\n Plot.linearRegressionX(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"To explore the data, there are many different kinds of [marks](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot#marks). Take your time to think about which is more suitable for your interests. For instance, we could also analyze the horsepower distribution depending on the car's origin. A possible option would be:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":515,"value":"Plot.plot({\n marks: [\n Plot.boxY(cars, {x:\"Origin\", y:\"Horsepower\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":517,"value":"## Another example\n\nLast week, we work with a weather dataset from the city of Girona and we map it to the data array we wanted:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":520,"value":"weather","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"niceWeather = weather.map(d => ({\n date : new Date(d[\"Date time\"]),\n maxTemp : +d[\"Maximum Temperature\"],\n minTemp : +d[\"Minimum Temperature\"],\n condition : d[\"Conditions\"], //d.Conditions\n precipitation : +d[\"Precipitation\"]\n})\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"With Plot, it is quite simple to draw the evolution of the maximum temperature:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":528,"value":"Plot.plot({\n marks: [\n Plot.line(niceWeather, {x:\"date\", y:\"precipitation\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"*Task*: Create a plot that shows for each day the maximum and minimum temperatures with blue and red lines, respectively. Could you also add a line with the mean value between them? Or could you also paint the area between the minimum and maximum temperatures?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":538,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":541,"value":"Plot.plot({\n x: {\n domain: [0, 250],\n //type: \"log\" //take care with the zero's!\n },\n y: {\n domain: [0, 6000],\n },\n marks: [\n Plot.dot(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\", fill:\"red\", opacity:0.4}),\n Plot.linearRegressionX(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":546,"value":"Plot.plot({\n color: {\n scheme: \"reds\"\n },\n marks: [\n Plot.dot(cars, {x:\"Horsepower\", y:\"Weight_in_lbs\", fill:\"Displacement\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"