28:null 29:["$","title",null,{"children":"Data visualization with Observable HQ | antonbardera | Observable"}] 2e:[{"id":"531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","href":"https://static.observableusercontent.com/files/531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","name":"testDataJsonExample.json","type":"application/json","lastModified":1718016853318.049,"size":646},{"id":"c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","href":"https://static.observableusercontent.com/files/c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","name":"GironaWeatherData.csv","type":"text/csv","lastModified":1718016853318.049,"size":9013}] 2c:{"id":"607840d338686684","slug":null,"title":"Data visualization with Observable HQ","thumbnail":"b33116f5857b1d526001039aff4c1d617881518003833ac084ef40b8fc0e4f1e","access_level":"public","create_time":"$D2024-06-10T10:54:13.318Z","update_time":"$D2024-06-13T10:22:05.211Z","view_time":null,"first_public_time":"$D2024-06-10T10:54:13.318Z","has_unpublished_edits":null,"fork":true,"stars":9,"starred":false,"owner":{"type":"team","id":"dc63de81f2766bde","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":"starter_2024"},"version":578,"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"},{"type":"team","id":"dc63de81f2766bde","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"04f2816896a958b6","reply_to_id":null,"content":"magnífico!","create_time":"$D2024-06-13T10:07:30.365Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"7e1200cbef5e0ed0","login":"miguel-sevilla-callejo","name":"Miguel Sevilla-Callejo","avatar_url":"https://avatars-next.observableusercontent.com/f0c6dadc25aa5f27faa41f5275eea6824d4313e7ff29cd27ef7d0b95fadd7796","tier":null}},{"id":"b074b12fca4b4dcf","reply_to_id":null,"content":"Buen trabajo ;)","create_time":"$D2024-06-13T10:07:30.405Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d01acbd559373442","login":"marc15","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/c30ce5cfc59321c691e5406e51e98474656ae4ecf829e8cef40c1cf58ad8ba20","tier":null}},{"id":"ecd6eb3706358385","reply_to_id":"b074b12fca4b4dcf","content":"Hola Anton!","create_time":"$D2024-06-13T10:07:42.759Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"6feff29cfbdaa536","login":"geraldo","name":"Gerald Kogler","avatar_url":"https://avatars-next.observableusercontent.com/8c21e82b94f8c70c0962599908a79255ea72bf4dd0f6b63bd738568d52002d9b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"5f306711315b3670","slug":"jornades-sig-lliure","title":"Jornades SIG lliure","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"type":"notebook","body":{"titling":"auto","title":"Data visualization with Observable HQ","cells":[{"id":0,"value":"# Data visualization with Observable HQ\n## Jornades de SIG Lliure","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This page is just a *very first* introduction to **Observable HQ** for the participants on the workshop of the [Jornades de SIG lliure](https://www.jornadassiglibre.org/). 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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"An Observable *notebook* is an interactive, editable document defined by chunks of code called *cells*. Observable notebooks help you explore live data, prototype visualizations, make interactive art, understand algorithms, collaborate on reports, and much more. A *cell* can be pretty much anything. For example, a cell might contain a few paragraphs of text, like this one. Or a cell might contain images, videos, charts, or other graphical and interactive elements. A cell can also contain data structures, like numbers, strings, arrays and objects. Functions, too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"## Adding text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"In Observable, you can both use *Markdown* or","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"HTML to represent text.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"## JavaScript expressions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"You can declare variables and functions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"x = 15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y = x + 2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"Observable uses a *reactive* model of code execution. What that means is that it knows how different cells depend on one another in a notebook. When any cell is updated, all cells that depend on it are automatically re-run. This works with any number of cells, and their order on the page doesn't matter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"xx = [12,4,23,6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"x * 10 +3 +xx[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"z = square(y);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"htmlcreator(\"world\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`## Input elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"viewof value = Inputs.range([0, 100], {label: \"Cantidad\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"The current slider value is **${value}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"The current selection is **${selected}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"You can also create forms with multiple input elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"form.option1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"form.option2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"form.option3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"form.option4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"md`## Let's draw!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"or [SVG](https://www.w3schools.com/graphics/svg_intro.asp).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"md`## Data` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"To load data, you can have attached files (see on the top nav bar) and read them using csv, json, or the corresponding call.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"json = FileAttachment(\"testDataJsonExample.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"weather = await FileAttachment(\"GironaWeatherData.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"You can also import from other notebooks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"import {cars} from \"feb53bc4c58e3602\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"You can also make an API call:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"cultural_grants = d3.json('https://analisi.transparenciacatalunya.cat/resource/aqrw-u8kv.json?$limit=20000')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`## Import libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"To help you get work done quickly, the [Observable standard library](https://github.com/observablehq/stdlib) provides a handful of recommended open-source libraries by default in all notebooks. (Use [require](/@observablehq/introduction-to-require) to load any other library you desire.)\nThis Observable standard library already imported in the notebooks (such as D3, Plot, Leaflet,...), so there's no need to import them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"simpleStatistics = require(\"simple-statistics@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"square(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"square = x => x+x;\n//equivalent to \n//square = function (x) {\n// return x*x;\n//}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"htmlcreator = function(word){\n return htl.html`

Hello ${word}!

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"