2f:T5fb,function ramp(name) { let canvas; let colors; let dark; if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) { colors = d3[`scheme${name}`][n]; dark = d3.lab(colors[0]).l < 50; } else { const interpolate = d3[`interpolate${name}`]; colors = []; dark = d3.lab(interpolate(0)).l < 50; for (let i = 0; i < n; ++i) { colors.push(d3.rgb(interpolate(i / (n - 1))).hex()); } } if (n < 128) { canvas = htl.svg`
","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"## 🎯 Objectiu de la sessió\n\nEn aquesta sessió apandrem a:\n- Fer grafics combinats amb l'opcio Mark.\n- Aprendre a fer l'us correcte del color. ","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"### Marks\nExemple de com utilitzar marks:","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"Plot.plot({\n marks: [\n Plot.areaY(aapl, { x: \"Date\", y: \"Close\", opacity: 0.25, fill: \"skyblue\" }),\n Plot.lineY(aapl, { x: \"Date\", y: \"Close\", stroke: \"darkblue\" }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"aapl","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"Per crear el gràfic hem de seguir aquests passos:\n\n1. Cridar la llibreria **Plot**\n2. Indicar quin tipus de gràfic volem utilitzar. En aquest cas, **plot**.\n3. Aquesta opcio necessita un objecte on a dins tingui el paràmetre **marks**. A dins hi hem afegit tots els gràfics que voliem mostrar:\n - Plot.areaY(aapl, { x: \"Date\", y: \"Close\", opacity: 0.25, fill: \"skyblue\" }),\n - Plot.lineY(aapl, { x: \"Date\", y: \"Close\", stroke: \"darkblue\" }),\n - Plot.ruleY([0])\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":259,"value":"### 🎨 Color\n El color és important per...\n - Comunicació visual: El color ajuda a transmetre informació de manera més ràpida i intuïtiva.\n - Estètica i narrativa: El color reforça l'estil, la marca i pot guiar la història que expliquem amb les dades.\n - Accessibilitat: Escollir bé els colors garanteix que els gràfics siguin llegibles per a tothom, incloses persones amb daltonisme.\n","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"#### Formes d'assignar color","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"Inputs.color({ value: \"#00a800\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"#### HEX","pinned":false,"hidden":false,"mode":"md"},{"id":491,"value":"#00A800","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"#### RGB","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"rgb(0, 168, 0)","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"#### TEXT","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"\"green\"","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"#### HSL","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"hsl(120, 100%, 33%)","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":512,"value":"### Esquemes de color","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"**Escala categorica:**","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"Utilitzada per mostrar categoria","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"Observable10 = swatches(\"Observable10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"**Escala continua:**","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"Utilitzada per mostrar quantitat","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"Blues = ramp(\"Blues\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"**Escala divergent:**","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"Utilitzada per mostrar valors contraris","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"RdYlBu = ramp(\"RdYlBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":564,"value":"### Eines per l'accessibilitat\n- Comprova el contrast entre colors de fons i de text.\n- No depenguis només del color per expressar informació: afegeix etiquetes o formes.\n- Fes servir paletes amigables amb el daltonisme o utilitza eines per comprobar que facis un us correcte del color:\n - [Color Brewer](https://colorbrewer2.org)\n - [Viz Palette](https://projects.susielu.com/viz-palette)\n\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":70,"value":"## EXERCICIS","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"1 - Pinta aquest gràfic per ressaltar un país i seguir veient els altres","pinned":false,"hidden":false,"mode":"md"},{"id":708,"value":"infections","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"Plot.plot({\n color: {\n range: [\"#E5E2D9\", \"#E68700\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(infections, {\n x: \"parsedDate\",\n y: \"new_cases_smoothed\",\n z: \"id\",\n stroke: (infection) => infection.id === \"ESP\",\n sort: (infection) => infection.id === \"ESP\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":345,"value":"2 - Fer un gràfic de punts amb les dades pingüins relacionat la massa corporal amb la fondària màxima. Pinta els punts segons a quina espècia pertany cada pingüí.","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"viewPenguins","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewPenguins = penguins","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"Plot.dot(penguins, {\n x: \"body_mass_g\",\n y: \"culmen_depth_mm\",\n fill: \"species\"\n}).plot({\n y: { grid: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":700,"value":"3 - Utilitza el color perenfatitzar la correlació entre la riquesa d’un país i el seu accés a les vacunes.","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"vaccinated","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"Plot.plot({\n height: 640,\n x: { type: \"log\" },\n r: { range: [5, 0.05 * width] },\n color: {\n scheme: \"greens\"\n },\n marks: [\n Plot.dot(vaccinated, {\n y: \"people_fully_vaccinated_per_hundred\",\n x: \"gdp_per_capita\",\n r: \"population\",\n stroke: \"#808080\",\n strokeWidth: 0.75,\n fill: \"people_fully_vaccinated_per_hundred\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":350,"value":"4 (Opcional) - Fes un gràfic dividit de barres horitzontals on es conti quantes femelles i quants mascles hi ha a cada illa. La de l'esquerra ha de mostrar els pingüins femella i la de la dreta els homes. Pinta les dues categòricament per mascle o femella. Per no haver de fer servir un reduce, ves a la documentació i investiga com utilitzar groupY.","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"Plot.plot({\n width: 700,\n height: 200,\n marginLeft: 75,\n x: {\n label: \"Nombre de pingüins\",\n tickFormat: Math.abs,\n labelAnchor: \"center\"\n },\n y: {\n label: \"Illa\"\n },\n color: {\n legend: true,\n type: \"ordinal\",\n scheme: \"RdBu\",\n domain: [\"Femella\", \"Mascle\"]\n },\n marks: [\n Plot.barX(\n penguins,\n Plot.groupY(\n { x: (d) => -d.length },\n {\n y: \"island\",\n filter: (d) => d.sex === \"FEMALE\",\n fill: () => \"Femella\"\n }\n )\n ),\n Plot.barX(\n penguins,\n Plot.groupY(\n { x: (d) => d.length },\n {\n y: \"island\",\n filter: (d) => d.sex === \"MALE\",\n fill: () => \"Mascle\"\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":90,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":523,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"**Appendix**","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"function swatches(name) {\n const colors = d3[`scheme${name}`];\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;\n const canvas = svg`