2f: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) 30:[{"id":"be6ab50c8b15d89a0a267a75ebce2375e59b05a0d12224fe64def7913fecb35fa416253c9a8bfd0d103719f1a7ca5bf361c4987f137397347eeaf24ae1257ecf","href":"https://static.observableusercontent.com/files/be6ab50c8b15d89a0a267a75ebce2375e59b05a0d12224fe64def7913fecb35fa416253c9a8bfd0d103719f1a7ca5bf361c4987f137397347eeaf24ae1257ecf","name":"LogoSimple@1.png","type":"image/png","lastModified":1751472926506.175,"size":601126},{"id":"5290f7b336bb598040ffc2b770c1869ea4dfdb4fa932bc1ab1c6f504c240ca98feff754062518aafe7bad6aa7ea7c1dcbabf8c8bedac136a347171f9d5ee4446","href":"https://static.observableusercontent.com/files/5290f7b336bb598040ffc2b770c1869ea4dfdb4fa932bc1ab1c6f504c240ca98feff754062518aafe7bad6aa7ea7c1dcbabf8c8bedac136a347171f9d5ee4446","name":"Minard.png","type":"image/png","lastModified":1751538458334.443,"size":687027}] 2d:{"title":"Dia 4 — Codificació visual","cells":[{"id":0,"value":"# Dia 4 — Codificació visual\n","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":314,"value":"minard = FileAttachment(\"Minard.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"*(Charles Joseph Minard, 1869)*","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":190,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":197,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":246,"value":"logosimple1 = FileAttachment(\"LogoSimple@1.png\").image({ width: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":284,"value":"### 🖍️ Anem a pintar dades!","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":305,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":257,"value":"dades = [10, 30, 20, 40]","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":109,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":275,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":352,"value":"dadesObj = [\n { nom: \"Maria\", edat: 10 },\n { nom: \"Eva\", edat: 3 },\n { nom: \"Joana\", edat: 20 },\n { nom: \"Nour\", edat: 40 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":111,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":113,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":115,"value":"
","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}