27:null 28:["$","title",null,{"children":"Dia 4 — Codificació visual | Laia's | Observable"}] 2d:T534,Com es pot veure a l'exemple, l'origen de coordenades (0,0) es considera a dalt a la dreta i les x's van d'esquerra a dreta i les y's de dalt a baix. #### Primitives - [``rect``](https://www.w3schools.com/graphics/svg_rect.asp): Rectangle, *propietats*: ``width, height, x, y, rx, ry`` - [``circle``](https://www.w3schools.com/graphics/svg_circle.asp): Cercle, *propietats*: ``r, cx, cy`` - [``line``](https://www.w3schools.com/graphics/svg_line.asp): Línia o segment, *propietats*: ``x1, y1, x2, y2`` - [``polygon``](https://www.w3schools.com/graphics/svg_polygon.asp): Polígon tancat, *propietats*: ``points`` (p. ex. ``points="100,10 150,190 50,190"``) - [``polyline``](https://www.w3schools.com/graphics/svg_polyline.asp): Polígon obert, *propietats*: ``points`` - [``text``](https://www.w3schools.com/graphics/svg_text.asp): Polígon obert, *propietats*: ``x, y, dx, dy, rotate, textLength`` N'hi ha més! Podeu consultar-les a la [pàgina de referència de l'SVG](https://www.w3schools.com/graphics/svg_intro.asp). #### Etiquetes generals Hi ha certes característiques que són generals: - ``fill``: color interior de l'element - ``stroke``: color de la vora de l'element - ``stroke-width``: gruixudària de la vora de l'element (en píxels) - ``x, y``: posició de l'element (en general, punt superior-esquerre) 2e:[{"id":"be6ab50c8b15d89a0a267a75ebce2375e59b05a0d12224fe64def7913fecb35fa416253c9a8bfd0d103719f1a7ca5bf361c4987f137397347eeaf24ae1257ecf","href":"https://static.observableusercontent.com/files/be6ab50c8b15d89a0a267a75ebce2375e59b05a0d12224fe64def7913fecb35fa416253c9a8bfd0d103719f1a7ca5bf361c4987f137397347eeaf24ae1257ecf","name":"LogoSimple@1.png","type":"image/png","lastModified":1751614484101.272,"size":601126},{"id":"5290f7b336bb598040ffc2b770c1869ea4dfdb4fa932bc1ab1c6f504c240ca98feff754062518aafe7bad6aa7ea7c1dcbabf8c8bedac136a347171f9d5ee4446","href":"https://static.observableusercontent.com/files/5290f7b336bb598040ffc2b770c1869ea4dfdb4fa932bc1ab1c6f504c240ca98feff754062518aafe7bad6aa7ea7c1dcbabf8c8bedac136a347171f9d5ee4446","name":"Minard.png","type":"image/png","lastModified":1751614484101.272,"size":687027}] 2b:{"id":"b24412af13dfd463","slug":null,"title":"Dia 4 — Codificació visual","thumbnail":"d6dad00f7da0a08707ab90bccd335b29c3f2ce88c5c4c28d91b486d7659271ad","access_level":"public","create_time":"$D2025-07-04T07:34:44.101Z","update_time":"$D2025-07-05T09:32:02.132Z","view_time":null,"first_public_time":"$D2025-07-05T09:38:40.144Z","has_unpublished_edits":null,"fork":{"id":"18e79756f431c16c","slug":null,"title":"Dia 4 — Codificació visual","owner":{"id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d731b32f3012da30","login":"laias","name":"Laia's","avatar_url":"https://avatars-next.observableusercontent.com/be24205c7ed3d33bf874278d51cb377c2d0246a6222168762353f5f1973f8a76","tier":"starter_2024"},"version":350,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e5bb3ad8262f4d8","login":"laia2","name":"Laia","avatar_url":"https://avatars-next.observableusercontent.com/9582edf1c51ba105ebf719ebab95f698e1e0902126e3b0aad3431a2320f9bafa","tier":null}],"members":[{"type":"individual","id":"3e5bb3ad8262f4d8","login":"laia2","name":"Laia","avatar_url":"https://avatars-next.observableusercontent.com/9582edf1c51ba105ebf719ebab95f698e1e0902126e3b0aad3431a2320f9bafa","tier":null,"role":"editor"},{"type":"team","id":"d731b32f3012da30","login":"laias","name":"Laia's","avatar_url":"https://avatars-next.observableusercontent.com/be24205c7ed3d33bf874278d51cb377c2d0246a6222168762353f5f1973f8a76","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dia 4 — Codificació visual","cells":[{"id":0,"value":"# Dia 4 — Codificació visual\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## 🎯 Objectiu de la sessió\nIntroducció de la codificació visual i de la creació d'elements gràfics en Support Vector Graphics (SVG).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"### 🤔 Què fem quan creem un gràfic?\nQuan creem un gràfic estem convertint una o més dades (que poden ser numèriques o categòriques o d'altres tipus) en una representació visual que depèn d'aquestes. Aquest procés es coneix com la *codificació visual* i els elements gràfics que varien segons les dades s'anomenen *variable visuals*.\n### 📊 Marques i canals\nCada element de dades es representa mitjançant *marques* (*marks* en anglès) o primitives geomètriques. Els canvis en l'aspecte de la marca basats en un atribut de dades s'anomenen canals (*channels* en anglès).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"Per exemple, en un diagrama de dispresió, la marca correspon a cadascun dels punts (o cercles) del diagrama i codifiquem dues dades mitjançant els canals de la coordenada X i Y, respectivament. En el diagrama de sota, cada punt representa una dada (pingüí) i la coordenada X varia en funció de la longitud del culmen (mida del bec) i la coordenada Y varia en funció de la massa corporal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"Plot.plot({\n marks: [\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"body_mass_g\",\n fill: \"red\",\n opacity: 0.4\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"❓ Com és la codificació visual en aquests tipus de diagrames?\n\n- **Diagrama de barres**\n- **Diagrama de sectors**\n- **Diagrama de línia**\n\nperò també hi ha codificacions més complexes! \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"minard = FileAttachment(\"Minard.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"*(Charles Joseph Minard, 1869)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"### 🖼️ Prèvia: Com es guarden les imatges al PC?\n\nBàsicament existeixen dues tipologies de formats: \n- **Mapa de bits**: graella de píxels (p.ex. jpg, png,...)\n- **Imatge vectorial**: codificació de primitives geomètriques com punts, línies\n\n### 👩‍🎨 Com podem crear representacions gràfiques?\n\n[Scalable Vector Graphics](https://www.w3schools.com/graphics/svg_intro.asp) (SVG, en català gràfics vectorials escalables) ens permet definir figures gràfiques a partir de codificar-ne unes primitives. És una codificació a partir d'etiquetes similar a l'HTML, però unes etiquetes que representen *primitives* gràfiques. Un exemple de codi SVG seria i la seva representació:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"### EXERCICI\n\nCreeu el codi SVG que genera una imatge (sense la graella) semblant a aquesta que teniu a continuació:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"logosimple1 = FileAttachment(\"LogoSimple@1.png\").image({ width: 500 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"### 🖍️ Anem a pintar dades!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"viewof alcada = Inputs.range([0, 100], {\n label: \"Alçada\",\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"dades = [10, 30, 20, 40]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"dadesObj = [\n { nom: \"Maria\", edat: 10 },\n { nom: \"Eva\", edat: 3 },\n { nom: \"Joana\", edat: 20 },\n { nom: \"Nour\", edat: 40 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"