31:[{"id":"c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","href":"https://static.observableusercontent.com/files/c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","name":"GironaWeatherData.csv","type":"text/csv","lastModified":1664955112488.365,"size":9013},{"id":"531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","href":"https://static.observableusercontent.com/files/531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","name":"testDataJsonExample.json","type":"application/json","lastModified":1664955112488.365,"size":646}] 2f:{"title":"A very first introduction to Observable","cells":[{"id":0,"value":"# A *very* first introduction to Observable","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"This page is just a *very first* introduction to **Observable** for the students of the [Visual Tools to Empower Citizens](http://www.mastervisualtoolsudg.com/) master's degree. We will use this platform during the course 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"},{"id":360,"value":"In Observable, you can both use ","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"**Markdown** or","pinned":true,"hidden":false,"mode":"md"},{"id":358,"value":"HTML to represent text.","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":189,"value":"md`## Expressions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"You can declare variables and functions:","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"x = 15;","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"x * 10 +3","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"y = x + 2;","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":38,"value":"z = square(y);","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"htmlcreator(\"world\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`## Input elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"Sometimes you need some input values. There are many ways to do that! Sliders, selectors,...","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":377,"value":"viewof value = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"viewof age = Inputs.range([0, 80], {label: \"Age\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"age","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"The current slider value is **${value}**","pinned":true,"hidden":false,"mode":"md"},{"id":384,"value":"viewof selected = Inputs.select([\"clear\", \"cloudy\", \"rainy\", \"windy\"], {label: \"Select the desired weather\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"The current selection is **${selected}**","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"You can also create forms with multiple input elements:","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"viewof form = Inputs.form({\n potato: 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"},{"id":428,"value":"form.potato","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"form.option2","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"form.option3","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"form.option4","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":194,"value":"md`## Drawings`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":82,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":396,"value":"viewof width = Inputs.range([10, 100], {label: \"Width\", value: 30, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof height = Inputs.range([10, 100], {label: \"Height\", value: 30, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":198,"value":"md`## Data` ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":122,"value":"json = FileAttachment(\"testDataJsonExample.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"weather = await FileAttachment(\"GironaWeatherData.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`You can also download any object by clicking on the cell menu.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`## Import libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"square=x=>x*x;","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"htmlcreator = function(word){\n return html`

Hello ${word}!

`;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}