31:[{"id":"c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","href":"https://static.observableusercontent.com/files/c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","name":"GironaWeatherData.csv","type":"text/csv","lastModified":1602594589632.606,"size":9013},{"id":"531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","href":"https://static.observableusercontent.com/files/531cf901f3bbdbc846afbf6c61e7cb290574fe154d2bf4c74948862ad325be4f8f81eee039c34ea05c68f1a5709e02596afe70e112a0fc1223a3d8c24511d316","name":"testDataJsonExample.json","type":"application/json","lastModified":1602587416456.215,"size":646}] 2f:{"title":"A first introduction to Observable","cells":[{"id":0,"value":"md`# A first introduction to Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`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":"ojs"},{"id":8,"value":"html`

In Observable, you can both use Markdown or HTML to represent text.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`## Expressions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`You can declare variables and functions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"x = 10;","pinned":true,"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":"md`and show their values. For instance, x is equal to ${x} and z is equal to ${z}. \n\nNote that the other doesn't matters.`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"md`Sometimes you need some input values. There are many ways to do that! Sliders, selectors,...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof value = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`The current slider value is **${value}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof selected = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`The current selection is **${selected}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`## Drawings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`You can also include drawings using Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`## Data` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`To load data, you can have associated files (see on the top nav bar) and read them using csv, json,... calls.`","pinned":false,"hidden":false,"mode":"ojs"},{"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":201,"value":"md`### Data wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`Usually, the data need some kind of transformation. Array functions, such as map, filter, sort, or reduce can be used.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"desiredData = weather.map(d => { \n var newd = {\n date : new Date(d[\"Date time\"]),\n maxTemp : +d[\"Maximum Temperature\"],\n minTemp : +d[\"Minimum Temperature\"],\n condition : d[\"Conditions\"] //d.Conditions\n}\n return newd;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"selectedData = desiredData.filter(d => {\n var startDate = new Date(\"09/01/2020\");\n var endDate = new Date(\"09/30/2020\");\n return d.date >= startDate && d.date <= endDate;\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"sortedData = desiredData.sort((a,b) => {\n return a.maxTemp - b.maxTemp;\n});\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"maxTempSum = desiredData.reduce((accum, d) => accum + d.maxTemp, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"groupedData = desiredData.reduce(function(acumarray, d) {\n //if(!acumarray.hasOwnProperty(d.condition)){ acumarray[d.condition] = [];acumarray[d.condition].push(d);}\n //else {acumarray[d.condition].push(d);}\n (acumarray[d.condition] = acumarray[d.condition] || []).push(d);\n return acumarray;\n }, {});","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"countData = desiredData.reduce(function(acumarray, d) {\n //if(!acumarray.hasOwnProperty(d.condition)){ acumarray[d.condition] = 1;}\n //else {acumarray[d.condition]++;}\n acumarray[d.condition] = (acumarray[d.condition] || 0) + 1;\n return acumarray;\n }, {});","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"}