41:null 42:["$","title",null,{"children":"Dia 25 – Mapes, més mapes i no tant mapes | Visualization for Transparency Foundation (Fundació ViT) | Observable"}] 48:T509,

🌍 GeoJSON 🗺️ TopoJSON

🌍 GeoJSON	🗺️ TopoJSON
`{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "Regió A" }, "geometry": { "type": "Polygon", "coordinates": [[[0,0], [0,1], [1,1], [1,0], [0,0]]] } }, { "type": "Feature", "properties": { "name": "Regió B" }, "geometry": { "type": "Polygon", "coordinates": [[[1,0], [1,1], [2,1], [2,0], [1,0]]] } } ] }`	`{ "type": "Topology", "objects": { "regions": { "type": "GeometryCollection", "geometries": [ { "type": "Polygon", "properties": { "name": "Regió A" }, "arcs": [[0]] }, { "type": "Polygon", "properties": { "name": "Regió B" }, "arcs": [[1]] } ] } }, "arcs": [ [[0,0],[0,1],[1,0],[0,-1],[-1,0]], [[1,0],[0,1],[1,0],[0,-1],[-1,0]] ], "transform": { "scale": [1, 1], "translate": [0, 0] } }`

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "Regió A" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[0,0], [0,1], [1,1], [1,0], [0,0]]]
      }
    },
    {
      "type": "Feature",
      "properties": { "name": "Regió B" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[1,0], [1,1], [2,1], [2,0], [1,0]]]
      }
    }
  ]
}

{
  "type": "Topology",
  "objects": {
    "regions": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Polygon",
          "properties": { "name": "Regió A" },
          "arcs": [[0]]
        },
        {
          "type": "Polygon",
          "properties": { "name": "Regió B" },
          "arcs": [[1]]
        }
      ]
    }
  },
  "arcs": [
    [[0,0],[0,1],[1,0],[0,-1],[-1,0]],
    [[1,0],[0,1],[1,0],[0,-1],[-1,0]]
  ],
  "transform": {
    "scale": [1, 1],
    "translate": [0, 0]
  }
}

49:T4cf,worldGridString = `,,,,,,ISL,,,,,,,NOR,SWE,FIN,EST,,,,,,,,,,,,,,,,,, ,,,,,,,,,,IRL,GBR,,,,LTU,LVA,,,,,,,,,,,,,,,,,, ,CAN,,,,,,,,,,,NLD,DNK,POL,,BLR,,,,,,,,,,,,,,,,,, ,USA,,,,,,,,,,BEL,LUX,DEU,CZE,SVK,UKR,,,,,,,,,,,,,,,,,, ,MEX,,BHS,,,,,,,AND,FRA,CHE,LIE,AUT,HUN,ROU,MDA,,,,,,,RUS,,,,,,,,,, GTM,BLZ,,CUB,HTI,DOM,ATG,,,,PRT,ESP,MCO,ITA,SVN,SRB,BGR,,,,,,,,KAZ,,,,,,,,,, SLV,HND,,JAM,,KNA,LCA,BRB,,,,,MLT,SMR,HRV,BIH,MKD,,,GEO,AZE,,UZB,KGZ,,MNG,,PRK,,JPN,,,,, ,NIC,,,,VCT,DMA,,,,,,,,ALB,MNE,GRC,,TUR,,ARM,,TKM,TJK,,,CHN,KOR,,,,,,, ,,CRI,,,TTO,GRD,,,,CPV,,MAR,DZA,,,,CYP,LBN,SYR,IRQ,IRN,AFG,PAK,NPL,BTN,MMR,LAO,,,,,,, ,,,PAN,,,,,,,,GMB,SEN,MRT,TUN,LBY,EGY,PSE,ISR,JOR,SAU,KWT,BHR,,IND,BGD,THA,KHM,VNM,,,,,, ,,,,COL,VEN,GUY,SUR,,,GNB,GIN,GHA,BFA,MLI,NER,SDN,ERI,,YEM,OMN,ARE,QAT,,LKA,,MYS,,,PHL,,,,, ,,,,ECU,BOL,BRA,,,,SLE,CIV,TGO,BEN,NGA,TCD,SSD,ETH,DJI,,,,,,,,SGP,BRN,,,,,,, ,,,,PER,PRY,URY,,,,,,LBR,GNQ,GAB,CMR,CAF,UGA,SOM,,SYC,,,MDV,,,,IDN,PNG,,PLW,FSM,MHL,, ,,,,CHL,ARG,,,,,,,STP,,COG,COD,RWA,KEN,,,,,,,,,,TLS,,,,,NRU,KIR,TUV ,,,,,,,,,,,,,,AGO,ZMB,MWI,BDI,TZA,,COM,,,,,,,,AUS,,,SLB,,WSM, ,,,,,,,,,,,,,,NAM,BWA,ZWE,MOZ,,,MDG,MUS,,,,,,,,NZL,,,VUT,FJI,TON ,,,,,,,,,,,,,,,ZAF,SWZ,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,LSO,,,,,,,,,,,,,,,,,,`4a:[{"id":"0f8ddda02b56f3e99969aeac2ec07d97de7afab72f3a3243cd60a0e8a121362f0c1ef345882846504b0e9771d2f6c78ced5152bb595ec841ca6ec4ab7651491f","href":"https://static.observableusercontent.com/files/0f8ddda02b56f3e99969aeac2ec07d97de7afab72f3a3243cd60a0e8a121362f0c1ef345882846504b0e9771d2f6c78ced5152bb595ec841ca6ec4ab7651491f","name":"stk-country.json","type":"application/json","lastModified":1753360047977.017,"size":33007},{"id":"ec778e8bcbef5d164ded77d934d9948775e6538f12595ee0d8b716cad76193814f0bc0cd794525af07961c1185730d4e480fa1d70fbff1256e1c3df34a93d41f","href":"https://static.observableusercontent.com/files/ec778e8bcbef5d164ded77d934d9948775e6538f12595ee0d8b716cad76193814f0bc0cd794525af07961c1185730d4e480fa1d70fbff1256e1c3df34a93d41f","name":"eu-nuts-2.geojson","type":"application/geo+json","lastModified":1753366381117.009,"size":1642617},{"id":"e6750c8920a69ce1b22fc7868fc9e7958274f5f15410322a5762900fdfbd6c1d180bcfcd7984e5958ab17b2d13bb268d9f22779cfc601dfd5320f9a1d3b11f2e","href":"https://static.observableusercontent.com/files/e6750c8920a69ce1b22fc7868fc9e7958274f5f15410322a5762900fdfbd6c1d180bcfcd7984e5958ab17b2d13bb268d9f22779cfc601dfd5320f9a1d3b11f2e","name":"eu_unemployment.csv","type":"text/csv","lastModified":1753367136596.657,"size":2872}] 46:{"id":"fa0ab983a5645122","slug":"dia-25-mapes-mes-mapes-i-no-tant-mapes","title":"Dia 25 – Mapes, més mapes i no tant mapes","thumbnail":"2c95a6d4ca8d27060348029f868c2480898f83ec8bbe472eca56e477e07b2124","access_level":"public","create_time":"$D2025-07-24T11:56:21.666Z","update_time":"$D2026-04-29T19:51:54.309Z","view_time":null,"first_public_time":"$D2025-07-24T17:38:20.363Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024","bio":"Visualization can transform the reach of open data and revolutionize transparency and accountability.","following":false},"version":373,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null,"role":"editor"},{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"24ed33e539e5f14f","slug":"retech","title":"30-Day Women Dataviz Workshop","owner":{"id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)"}},"type":"notebook","body":{"titling":"auto","title":"Dia 25 – Mapes, més mapes i no tant mapes","cells":[{"id":0,"value":"# Dia 25 – Mapes, més mapes i no tant mapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"--- \n## 🎯 Objectiu de la sessió\nEn aquesta sessió explorarem com representar dades sobre mapes fent servir `Plot`. Aprendrem a treballar amb formats geoespacials, a entendre les projeccions, i a combinar marques com per crear diferents tipus de mapes: **mapes coroplètics**, **de símbols proporcionals** i de **rajoles** (_tile grid maps_). També veurem com l’ús de diferents escales de color pot alterar la percepció i la lectura del mapa.\n\nL’objectiu és entendre **quines decisions visuals prenem quan mapegem dades** i com aquestes decisions afecten la interpretació de la informació.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"---\n> ### 📌 **Lectura imprescindible** \n[“When Maps Shouldn’t Be Maps”](https://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/) d’en **Matt Ericson** és un dels textos més clars i contundents sobre **quan NO fer servir un mapa**. Ens recorda que els mapes tenen una força visual immensa —i, per això mateix, poden **distorsionar** o **confondre** si les dades que mostrem no tenen una relació geogràfica significativa.\n\n> És una lectura essencial per evitar caure en el reflex de mapar-ho tot. Fer un mapa hauria de ser una decisió informada, no automàtica.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"---\n## 🌍 La marca `geo`\nLa marca `geo` de `Plot` ens permet **dibuixar formes geogràfiques a partir de dades espacials**. Accepta formats com `GeoJSON` i funciona de manera semblant a com faríem servir `rect` o `line`, però projectant coordenades geogràfiques sobre un pla.\n\nAquesta marca serveix com a base per fer mapes: tant si volem dibuixar fronteres com si volem acolorir regions segons una variable. No mostra res per si sola —necessita les geometries, i aquestes venen en formats especials.\n\n> 📕 Llegeix més a la [**documentació de `Plot`**](https://observablehq.com/plot/marks/geo).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"---\n## 📁 Formats espacials: GeoJSON i TopoJSON\nPer dibuixar un mapa, necessitem geometries: contorns de països, regions, municipis... Aquestes dades no venen en `CSV`, sinó en formats geoespacials com:\n\n- `GeoJSON`, que guarda coordenades (latitud i longitud) per a cada punt del contorn.\n- `TopoJSON`, una versió comprimida que reutilitza línies comunes (com les fronteres compartides) per fer fitxers més petits.\n\n`Plot` pot llegir directament aquests formats —només cal passar-los a la marca geo.\n\n> 📕 Llegeix més a [**Everything about `GeoJSON`**](https://medium.com/random-gis-talks/everything-about-geojson-67ddc6eda11e).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"$48","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"---\n## 🗺️ Projeccions: aplanar un món rodó\nLes coordenades geogràfiques són esfèriques (latitud i longitud), però les pantalles són planes. Les projeccions són fórmules que transformen la Terra en un mapa.\n\n`Plot` permet especificar projeccions com `equal-earth` o `albers`, entre d’altres. Canviar la projecció pot alterar la forma, l’àrea o la posició dels països, així que cal escollir amb cura segons què volem mostrar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof projection = Inputs.select(\n [\n \"equirectangular\",\n \"orthographic\",\n \"stereographic\",\n \"mercator\",\n \"equal-earth\",\n \"azimuthal-equal-area\",\n \"azimuthal-equidistant\",\n \"conic-conformal\",\n \"conic-equal-area\",\n \"conic-equidistant\",\n \"gnomonic\",\n \"transverse-mercator\"\n ],\n { label: \"Tria una projecció\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"countriesMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"Plot.plot({\n width,\n projection: { type: projection, rotate: [0, 0] },\n marks: [\n Plot.geo(countriesMap, {\n stroke: \"#000\",\n strokeWidth: 0.3\n }),\n Plot.geo(landMap, {\n stroke: \"#000\",\n strokeWidth: 1.2\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"---\n## 🎯 Mapes de símbols proporcionals\nCombinen dues marques:\n\n- `geo` per dibuixar les formes del mapa (per exemple, els països o regions).\n- dot (o rect o altres) per posar-hi símbols al damunt, amb mida proporcional a una variable (com la població, emissions, o nombre de projectes).\n\nAquest tipus de mapa és útil per **mostrar quantitats absolutes**, ja que podem comparar la mida dels cercles directament. Sovint posem els símbols al centroide de la regió (amb `geoCentroid` o `centroid`).\n\nNecesitem doncs, les **dades geogràfiques**, en `GeoJSON`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"import {\n land50m as landMap,\n countries50m as countriesMap\n} from \"@visionscarto/geo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"Plot.plot({\n width: 640,\n projection: { type: \"equal-earth\", rotate: [-10, 0] },\n marks: [\n Plot.geo(countriesMap, {\n stroke: \"#000\",\n strokeWidth: 0.3\n }),\n Plot.geo(landMap, {\n stroke: \"#000\",\n strokeWidth: 1.2\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"I les **dades a visualitzar**, en aquest cas l'_stock_ de migrants per país:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"viewof tableStkCountry = Inputs.table(stkCountry.map((d) => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"stkCountry = FileAttachment(\"stk-country.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Cada objecte a aquest `Array` té una `key` amb l'identificador de país, i un objecte `value` amb les dades:\n```js\nkey: \"AFG\"\n value: Object {\n country: \"Afghanistan\"\n alpha3: \"AFG\"\n region: \"AS\"\n stk_total: 144098\n pct_total: 0.4\n lat: 33.93911\n lon: 67.709953\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"En aquest cas, l'objecte ja conté les coordenades de latitud i longitud amb el centroide del país.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Plot.plot({\n width,\n projection: { type: \"equal-earth\", rotate: [-10, 0] },\n r: { range: [2, 50] },\n marks: [\n Plot.geo(landMap, {\n fill: \"#f3f3f3\"\n }),\n Plot.geo(countriesMap, {\n stroke: \"#bdbdbd\",\n strokeWidth: 0.3\n }),\n Plot.geo(landMap, {\n stroke: \"#d0d0d0\",\n strokeWidth: 1.5\n }),\n Plot.circle(stkCountry, {\n r: (d) => d.value.stk_total,\n x: (d) => d.value.lon,\n y: (d) => d.value.lat,\n fill: (d) => d.value.region,\n fillOpacity: 0.1,\n stroke: (d) => d.value.region,\n strokeWidth: 1.2\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"---\n## 🖍️ Coropletes\nEls mapes coroplètics (_choropleths_) pinten les **regions amb colors segons una variable**. És el tipus de mapa que fem només amb la marca `geo`, usant una escala de color (`fill`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"euNuts2 = FileAttachment(\"eu-nuts-2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Com que és Europa, necessitem un tipus específic de projecció composta 😇","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"d3_composite = require(\"d3-composite-projections\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"Plot.plot({\n width: 480,\n height: 480,\n projection: ({ width, height }) =>\n d3_composite.geoConicConformalEurope().fitSize([width, width], euNuts2),\n marks: [Plot.geo(euNuts2)]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"Aquest fitxer té tots els nivells d'administrador, per la qual cosa haurem de filtrar-los al nivell de regió adequat, és a dir, el que coincideixi amb les nostres dades. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"europe_nuts2 = ({\n ...euNuts2,\n features: euNuts2.features.filter((d) => d.properties.LEVL_CODE === 2)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"europe_countries = ({\n ...euNuts2,\n features: euNuts2.features.filter((d) => d.properties.LEVL_CODE === 0)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"I les dades que volem visualitzar són les **dades d'atur per regió europea**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"eu_unemployment = await FileAttachment(\"eu_unemployment.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"eu_unemployment","database":"$undefined"},{"id":144,"value":"### 🔗 _Joins_\nPer poder acolorir les regions segons la taxa d’atur, hem de **combinar dues fonts de dades diferents**: d’una banda tenim les **geometries** (`europe_nuts2`, que contenen els contorns de cada regió amb un `id`), i de l’altra les **dades numèriques** (`eu_unemployment`, que contenen l’atur per regió, també amb un `id` com a clau comuna).\n\nCom que `Plot` no fa aquest join automàtic, el fem nosaltres dins el paràmetre `fill` de la marca `geo`: per a cada geometria `d`, busquem a `eu_unemployment` l’objecte que tingui el mateix `id`. Si el trobem, en retornem el valor per acolorir la regió. Si no, retornem un color per defecte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"### 🎨 Escales de color\nCal anar amb compte amb l’escala. El color pot canviar totalment la lectura del mapa, així que cal triar-lo pensant en què volem destacar:\n\n- Una **escala `linear`** ensenya les diferències absolutes. Aquest tipus d'escala és fàcil d'usar i intuïtiva, ja que s'alinea amb la nostra comprensió natural dels gradients de color.\n- Una **escala `quantize`** divideix els valors en grups. En casos de distribucions molt asimètriques, podrien agrupar la majoria dels punts de dades en una categoria, aïllant els valors atípics.\n- Una **escala `threshold`** permeten establir definicions de passos específiques basades en la nostra experiència amb les dades. Es poden determinar aquests llindars mitjançant l'algoritme de ruptures naturals de Jenks, que identifica divisions significatives a les dades.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"viewof type = Inputs.select([\"linear\", \"quantize\", \"threshold\"], {\n label: \"Select a method\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Plot.plot({\n height: 180,\n color: {\n label: \"Unemployment in %\",\n type: type,\n domain: type === \"threshold\" ? [0, 2.5, 5, 10, 15] : [0, 20],\n n: 10,\n scheme: \"RdPu\"\n },\n marks: [\n Plot.rectY(\n eu_unemployment,\n Plot.binX(\n { y: \"count\" },\n { x: \"value\", inset: -0.2, interval: 0.5, fill: \"value\" }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Plot.plot({\n width: 640,\n height: 640,\n projection: ({ width, height }) =>\n d3_composite\n .geoConicConformalEurope()\n .fitSize([width, width], europe_nuts2),\n color: {\n legend: true,\n label: \"Unemployment in %\",\n type: type,\n domain: type === \"threshold\" ? [0, 2.5, 5, 10, 15] : [0, 20],\n n: 10,\n scheme: \"RdPu\"\n },\n marks: [\n Plot.geo(europe_nuts2, {\n //El join es fa aqui\n fill: (d) =>\n eu_unemployment.find((n) => n.id === d.id)\n ? eu_unemployment.find((n) => n.id === d.id).value\n : \"#000\"\n }),\n Plot.geo(europe_countries, {\n stroke: \"#f0f0f0\",\n strokeWidth: 1.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---\n## 🟦 Mapes de rajoles (Tile grid maps)\nEls mapes de rajoles substitueixen la geografia real per una malla de quadrats (o hexàgons) amb una posició similar. És una simplificació que elimina el soroll geogràfic per fer comparacions més clares.\n\nAquests mapes són útils per evitar distorsions de mida i per comparar regions amb àrees molt desiguals, com passa sovint entre països grans i petits.\n\nEn `Plot`, no hi ha una marca específica per fer-ho, però podem usar `rect` o `dot` amb dades que ens diguin les coordenades x i y de cada regió dins de la graella, o amb una graella d'`html` si volem gràfics més complexes en cada rajola.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"### 🗺️ Fem un mapa del món\nAquesta és la **graella** que representa el món en una malla de 18 files × 40 columnes. Cada codi ISO3 ocupa una cel·la; les cel·les buides són espai en blanc:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"Abans de poder pintar els països com a rajoles, convertim la taula de text (`worldGridString`) en un array d’objectes `{ feature, x, y }`que ens indica quin país hi ha a cada cel·la i en quina posició.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"transformGrid = (gridString) => {\n return gridString\n .trim()\n .split(\"\\n\")\n .map((row, y) =>\n row.split(\",\").map((feature, x) => (feature ? { feature, x, y } : null))\n )\n .flat()\n .filter(Boolean);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"worldGrid = transformGrid(worldGridString)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"

d.x) + 1}, 1fr);\n grid-template-rows: repeat(${d3.max(worldGrid, d => d.y) + 1}, auto);\n gap: 2px;\n\">\n ${worldGrid.map(d => htl.html.fragment`\n

${d.feature}

\n `)}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"Fem servir `CSS Grid` per posicionar cada país en una malla regular:\n```css\n grid-template-columns: repeat({d3.max(worldGrid, d => d.x) + 1}, 1fr);\n grid-template-rows: repeat({d3.max(worldGrid, d => d.y) + 1}, auto);\n```\n\nCol·loca aquest `div` a la posició corresponent segons les coordenades `x` i `y`:\n```css\n grid-column: {d.x + 1};\n grid-row: {d.y + 1};\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"### 📊 Mini gràfics a les rajoles\nCada país del mapa de rajoles pot mostrar molt més que només el seu codi.\n\nSi tenim dades per país (com ara la seva producció d’energia), podem **inserir una petita visualització dins de cada cel·la**.\n\nLes dades:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"import { electricityDataEmber } from \"@udg-master-data-science/data-playground\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"electricityDataEmber","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"Per això fem servir la funció `plotCountry`, que crea un petit gràfic d’àrea apilada per país:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"function plotCountry(data, country, size) {\n const countryData = data.filter((d) => d.id === country);\n const plot = Plot.plot({\n height: size,\n width: size,\n y: { axis: null },\n x: { axis: null },\n color: {\n type: \"categorical\",\n domain: [\n \"Nuclear\",\n \"Hydro\",\n \"Solar\",\n \"Wind\",\n \"Other Fossil\",\n \"Gas\",\n \"Coal\"\n ],\n range: [\n \"#fff0b0\",\n \"#ffda6d\",\n \"#ffaa00\",\n \"#ffaa00\",\n \"#969fb5\",\n \"#6d7991\",\n \"#4d5066\"\n ]\n },\n marks: [\n Plot.areaY(countryData, {\n x: \"year\",\n y: \"value\",\n fill: \"source\",\n curve: \"basis\"\n })\n ]\n });\n\n return plot;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"📈 Aquesta funció:\n\n- **Filtra** les dades pel país indicat.\n- **Dibuixa** una àrea apilada que mostra l’evolució de l’energia per font (solar, nuclear, gas...).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"plotCountry(electricityData, \"DEU\", 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"Ara només cal substituir el `

{d.feature}

` del codi anterior per una crida a `plotCountry(...)`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"🔁 Exemple combinat dins del grid:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"```css\n

\n {worldGrid.map(d => htl.html.fragment`\n

\n {plotCountry(electricityDataEmber, d.feature, 60)}\n

\n `)}\n

\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"🧠 **Resultat:** Cada país mostra dins la seva cel·la la tendència de producció d’energia —un mini dashboard global a cop d’ull.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"Plot.legend({\n color: {\n domain: [\"Nuclear\", \"Hydro\", \"Solar & Wind\", \"Oil\", \"Gas\", \"Coal\"],\n range: [\"#fff0b0\", \"#ffda6d\", \"#ffaa00\", \"#969fb5\", \"#6d7991\", \"#4d5066\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"

d.x) + 1}, 1fr);\n grid-template-rows: repeat(${d3.max(worldGrid, d => d.y) + 1}, auto);\n gap: 3px;\n\">\n ${worldGrid.map(d => htl.html.fragment`\n

\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n font-size: 10px;\n font-family: sans-serif;\n\n \">\n ${plotCountry(electricityData,d.feature, width / d3.max(worldGrid, d => d.x))}\n

\n `)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"order = [\"Coal\", \"Gas\", \"Other Fossil\", \"Wind\", \"Solar\", \"Hydro\", \"Nuclear\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"electricityData = electricityDataEmber.sort(\n (a, b) => order.indexOf(a.source) - order.indexOf(b.source)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 47:"$46:body"