2f:T442,Conceptes Bàsics: 👈 **Obre l'editor** fent clic a la vora esquerra o prement `option + tab`. 🔷 **Una cel·la** és un bloc de contingut. Quan l’edites, veuràs el codi dins d’una caixa blava. El resultat (output) apareix a sobre. ✍️ **Tipus de cel·les**: - `Markdown`: per escriure text amb estil. - `JavaScript`: per afegir codi interactiu. - `HTML`: per afegir codi html. - Altres: afegir dades, inputs, taules, plots, etc. Pots canviar el tipus de cel·la amb el menú a l’esquerra. ▶️ **Executar la cel·la**: Fes clic al botó ▶️ o prem `shift + enter`. El codi també s’executa automàticament si tanques la cèl·la. ➕ **Crear una nova cel·la**: Fes clic entre cel·les al marge esquerre o prem `command + enter` quan n’estàs editant una. 🚚 **Reordenar cel·les**: Arrossega la cel·la pel marge esquerre o utilitza les fletxes `↑ ↓` a la barra d’eines. 🗃 **Adjuntar dades**: Fes clic a 📎 (a dalt a la dreta) per pujar un fitxer o prem `shift + command + u`. També pots carregar dades des d’un URL o a través de la cel·la.30:[{"id":"f1391e0fa4e5879ba4374d7fed0070d53abc5646394a3b492e123c9449e78b6f4b0765f0ebbe4081cd0c895c2cbbe769d6c4c71f6d317b52d9b5cce1e406b0a3","href":"https://static.observableusercontent.com/files/f1391e0fa4e5879ba4374d7fed0070d53abc5646394a3b492e123c9449e78b6f4b0765f0ebbe4081cd0c895c2cbbe769d6c4c71f6d317b52d9b5cce1e406b0a3","name":"Relaci__d_alts_c_rrecs_i_altres_directius_de_l_Administraci__de_la_Generalitat_i_les_seves_retribucions_20250701.csv","type":"text/csv","lastModified":1751349002056.65,"size":73286}] 2d:{"title":"Dia 1 — Introducció a l'Observable","cells":[{"id":0,"value":"# Dia 1 — Introducció a l'Observable\n","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## 🎯 Objectiu de la sessió\nIniciació a l'entorn d’Observable, entendre com funciona i començar a crear cèl·les senzilles amb text, inputs i fitxers.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"### 🔍 Què és Observable?\nObservable és una eina per crear notebooks interactius amb JavaScript.\nPermet combinar codi, text i visualitzacions de forma senzilla i col·laborativa.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":117,"value":"### Documentació\n\nObservable documentation: https://observablehq.com/documentation/\n\nTutorials: https://observablehq.com/@observablehq/observable-overview-video","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"### Exemples d'ús\n\nStorytelling: https://observablehq.com/@zykel/characterization\n\nDashboard: https://observablehq.com/@ambassadors/interactive-plot-dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":43,"value":"## EXERCICI","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"PAS 1 — Crear dues variables en dos blocs de JS","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"nom = \"Laia\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"edat = 26","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":67,"value":"PAS 2 — Posar aquestes variables en una cel·la HTML","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"

El meu nom es ${nom}

\n\n

I tinc ${edat} anys

","pinned":true,"hidden":false,"mode":"html"},{"id":111,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":74,"value":"PAS 3 — Crear dos inputs diferents (Checkbox i Range) i modificar el seu contingut","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"viewof checkboxes = Inputs.checkbox([\"Opció A\", \"Opció B\"], {\n label: \"Select some\",\n value: [\"Opció A\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":90,"value":"PAS 4 — Mostrar els valors dels inputs en una cel·la HTML","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"

El valor del Checkbox es ${checkboxes}

El valor del Range es ${range}

","pinned":true,"hidden":false,"mode":"html"},{"id":115,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":102,"value":"PAS 5 — Importar fitxer de dades\n\nLink: https://analisi.transparenciacatalunya.cat/Sector-P-blic/Relaci-d-alts-c-rrecs-i-altres-directius-de-l-Admi/x9au-abcn/explore/query/SELECT%0A%20%20%60departament%60%2C%0A%20%20%60vinculacio%60%2C%0A%20%20%60cognoms_nom%60%2C%0A%20%20%60sexe%60%2C%0A%20%20%60denominacio_lloc%60%2C%0A%20%20%60inici_periode%60%2C%0A%20%20%60retribucio_anual_prevista%60%2C%0A%20%20%60assimilacio_retributiva%60%2C%0A%20%20%60lloc_eventual%60%2C%0A%20%20%60tipologia_lloc%60/page/filter","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"data = await FileAttachment(\"Relaci__d_alts_c_rrecs_i_altres_directius_de_l_Administraci__de_la_Generalitat_i_les_seves_retribucions_20250701.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"data","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}