29:null 2a:["$","title",null,{"children":"CSV to tile map | Visualization for Transparency Foundation (Fundació ViT) | Observable"}] 2f:T6ad,plotCountry = (data, country, size) => { const countryData = data.filter((d) => d.country === country); const yMax = d3.max(data, (d) => d.value); const plot = Plot.plot({ height: size, width: size, margin: 4, y: { axis: null, domain: [0, yMax] }, x: { axis: null }, marks: [ Plot.areaY(countryData, { x: "year", y: "value", fill: "#1ab76f", fillOpacity: 0.3, curve: "basis" }), Plot.dotY( countryData, Plot.pointerX({ x: "year", y: "value", r: 3, fill: "#1ab76f", stroke: "black", strokeWidth: 1.5, curve: "basis" }) ), Plot.lineY(countryData, { x: "year", y: "value", stroke: "#1ab76f", strokeWidth: 2, curve: "basis" }), Plot.dotY( countryData, Plot.selectLast({ x: "year", y: "value", r: 3, fill: "#1ab76f", curve: "basis" }) ), Plot.dotY( countryData, Plot.pointerX({ x: "year", y: "value", r: 3, fill: "#1ab76f", stroke: "black", strokeWidth: 1.5, curve: "basis" }) ), Plot.text( countryData, Plot.pointerX({ px: "year", py: "value", frameAnchor: "top-left", dy: 15, dx: 3, fontWeight: "bold", fontVariant: "tabular-nums", text: "value", stroke: "white", fill: "black", paintOrder: "stroke" }) ) ] }); return plot; }30:T1016,tileDataEU = { const grid = transformGrid(gridEU); const outerWidth = 640; const gap = 6; const padding = 10; const cols = d3.max(grid, (d) => d.x) + 1; const rows = d3.max(grid, (d) => d.y) + 1; const tileSize = (outerWidth - padding * 2 - gap * (cols - 1)) / cols; const arrowPath = ({ from, to, bend = 0.35 }) => { const x1 = from.col - 0.5; const y1 = from.row - 0.5; const x2 = to.col - 0.5; const y2 = to.row - 0.5; const dx = x2 - x1; const dy = y2 - y1; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len; const ny = dx / len; const mx = (x1 + x2) / 2; const my = (y1 + y2) / 2; const cx = mx + nx * bend; const cy = my + ny * bend; return `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`; }; const arrows = [ { from: { row: 1.3, col: 1.5 }, to: { row: 2.65, col: 2.45 }, bend: 0.45 }, { from: { row: 2.75, col: 6.5 }, to: { row: 1.5, col: 5 }, bend: -0.45 } ]; return html`

Ireland, Belgium, or the Netherlands began remarkably low ...

... while some Northern countries began already above 25%.

${grid.map( (d) => htl.html.fragment`

${d.feature}

${plotCountry(eu_renewables, d.feature, tileSize)}

` )}

`; }31:T568,tileDataFR = html`

${Plot.legend({ color: { domain: ["Domestic tourism", "Foreign"], range: ["#74a9cf", "#fdae6b"] } })}

${transformGrid(gridFR).map( (d) => htl.html.fragment`

${d.feature}

${plotRegion( france_regions_tourism_20241, d.feature, width / d3.max(transformGrid(gridFR), (d) => d.x) )}

` )}

`32:T934,plotDistrict = (data, district, size) => { const originDomain = ["Spain", "Rest of the EU", "Rest of the world"]; const originRange = ["#F0BD0C", "#3B5CD4", "#834F85"]; const originShort = new Map([ ["Spain", "Spain"], ["Rest of the EU", "EU"], ["Rest of the world", "World"] ]); const formatK = (value) => `${d3.format(".1~f")(value / 1000)}K`; const formatPercent = d3.format(".0%"); const districtData = data.filter((d) => d.district === district); const years = Array.from(new Set(districtData.map((d) => +d.year))).sort( d3.ascending ); const valuesByYearOrigin = d3.rollup( districtData, (v) => d3.sum(v, (d) => d.value), (d) => +d.year, (d) => d.origin ); const stackedData = years.flatMap((year) => { const total = d3.sum( originDomain, (origin) => valuesByYearOrigin.get(year)?.get(origin) ?? 0 ); let y0 = 0; return originDomain.map((origin) => { const value = valuesByYearOrigin.get(year)?.get(origin) ?? 0; const share = total ? value / total : 0; const y1 = y0 + share; const d = { year, origin, value, share, total, y0, y1, yDot: y1 }; y0 = y1; return d; }); }); return Plot.plot({ width: size, height: size, margin: 6, axis: null, x: { axis: null }, y: { domain: [0, 1] }, color: { domain: originDomain, range: originRange }, marks: [ Plot.areaY(stackedData, { x: "year", y1: "y0", y2: "y1", fill: "origin", stroke: "#FFF", strokeWidth: 1 }), Plot.dot( stackedData, Plot.pointerX({ x: "year", y: "yDot", r: 3, fill: "origin", stroke: "black", strokeWidth: 1.5 }) ), Plot.text( stackedData, Plot.pointerX({ px: "year", py: "yDot", frameAnchor: "bottom-left", dy: -18, dx: 3, fontWeight: "bold", fontVariant: "tabular-nums", text: (d) => `${originShort.get(d.origin)}: ${formatPercent(d.share)}`, stroke: "white", fill: "black", paintOrder: "stroke" }) ) ] }); }33:T7ed,tileDataBCN = { const gap = 6; const padding = 10; const width = 480; const cols = d3.max(gridBCN2, (d) => d.x) + 1; const maxY = d3.max(gridBCN2, (d) => d.y); const tile = (width - padding * 2 - gap * (cols - 1)) / cols; const height = padding * 2 + (maxY + 1) * tile + maxY * gap; return html`

${Plot.legend({ color: { domain: ["Spain", "Rest of the world", "Rest of the EU"], range: ["#F0BD0C", "#834F85", "#3B5CD4"] } })}

${gridBCN2.map( (d) => html`

${d.feature}

${plotDistrict(barcelonaOrigins, d.feature, tile)}

` )}

`; }34:[{"id":"49e215c1be1fe33d5ba514135c639274ffba3755950ff2f858856b60f32561ba5a061543921ed7d2dfe0fb8e7e10db685d0cb20c78177653f2e35caf84a48154","href":"https://static.observableusercontent.com/files/49e215c1be1fe33d5ba514135c639274ffba3755950ff2f858856b60f32561ba5a061543921ed7d2dfe0fb8e7e10db685d0cb20c78177653f2e35caf84a48154","name":"eu-countries.geojson","type":"application/geo+json","lastModified":1777451747613.175,"size":115922},{"id":"ca97b0700c5bb0b21a646b9c7a7b6c0d6f477535c6a3d35dee297356ef1afed45e02ab21ad80bf9fa3fdc32be0b16d53a1a37826ecc8390ff7af9ae7bcefea32","href":"https://static.observableusercontent.com/files/ca97b0700c5bb0b21a646b9c7a7b6c0d6f477535c6a3d35dee297356ef1afed45e02ab21ad80bf9fa3fdc32be0b16d53a1a37826ecc8390ff7af9ae7bcefea32","name":"eu-countries@1.geojson","type":"application/geo+json","lastModified":1777452460701.707,"size":115921},{"id":"d6384165f1af32048d5995dac5d7450d4c2f60c43c84e72adc766ddaf77bfd1f573a8452c6e3080254f64a6cad6d23036f89f4c5e67debff7453962ccc2f4869","href":"https://static.observableusercontent.com/files/d6384165f1af32048d5995dac5d7450d4c2f60c43c84e72adc766ddaf77bfd1f573a8452c6e3080254f64a6cad6d23036f89f4c5e67debff7453962ccc2f4869","name":"france_regions_tourism_2024@1.csv","type":"text/csv","lastModified":1777485109025.026,"size":1769},{"id":"20d1b314b974136d84541ec0d2e9a325bcc0872ea1f2e1d086cf6b6c1cc3c20aa0b82c2ccc7850d6f90c352494965dabc276b95c2c44a31be311f5cbe4fbee6a","href":"https://static.observableusercontent.com/files/20d1b314b974136d84541ec0d2e9a325bcc0872ea1f2e1d086cf6b6c1cc3c20aa0b82c2ccc7850d6f90c352494965dabc276b95c2c44a31be311f5cbe4fbee6a","name":"france_regions_tourism_2024.csv","type":"text/csv","lastModified":1777484528542.407,"size":804},{"id":"8082fa78607f62ad3a40f0a4364011a1f37f2c7a78a24d3209e4224056bd66358775b5a82a95dddf356b3fffbaf9a466ff8b499aef54e12bc760ba9c255dd1bc","href":"https://static.observableusercontent.com/files/8082fa78607f62ad3a40f0a4364011a1f37f2c7a78a24d3209e4224056bd66358775b5a82a95dddf356b3fffbaf9a466ff8b499aef54e12bc760ba9c255dd1bc","name":"eu_renewables.csv","type":"text/csv","lastModified":1777476318052.977,"size":11170},{"id":"543baab31cf612740efe194f4aa7b0b808efe5b4ffda6dac8d978a40f2769af7e75132b3404df17b6b043fc6c0aee3d3e0f42a49446d1782217bc50a360f678c","href":"https://static.observableusercontent.com/files/543baab31cf612740efe194f4aa7b0b808efe5b4ffda6dac8d978a40f2769af7e75132b3404df17b6b043fc6c0aee3d3e0f42a49446d1782217bc50a360f678c","name":"barcelona_districts_origin@1.csv","type":"text/csv","lastModified":1777564940585.94,"size":37948},{"id":"e2920143446b7b4c02a554f923ae3ec748a9a5b7af7543f0c75dd87e3d6cad174a6f34a3d165da603b4cd9a8071d4cc7a32b0bdc9f0cc30b97db174d8f9b4341","href":"https://static.observableusercontent.com/files/e2920143446b7b4c02a554f923ae3ec748a9a5b7af7543f0c75dd87e3d6cad174a6f34a3d165da603b4cd9a8071d4cc7a32b0bdc9f0cc30b97db174d8f9b4341","name":"barcelona_districts_origin.csv","type":"text/csv","lastModified":1777564091486.534,"size":38468}] 2d:{"id":"8beb82c574fdf0c5","slug":"tile-maps","title":"CSV to tile map","thumbnail":"445908ea2e8df4f7c8c979af5e5f14407a73be00c82b6b3e2c3fb38adee3bb2d","access_level":"public","create_time":"$D2026-04-28T17:16:25.710Z","update_time":"$D2026-06-04T08:29:01.229Z","view_time":null,"first_public_time":"$D2026-09-23T17:45:49.757Z","has_unpublished_edits":null,"fork":true,"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"},"version":920,"publish_version":920,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cab874ceedc4fa","login":"xaquingv","name":"","avatar_url":"https://avatars-next.observableusercontent.com/964250a396a5c55f0dcee877939a870e04f9741dead22595f1d385b85883f4d6","tier":null}],"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSV to tile map","cells":[{"id":0,"value":"# CSV to tile map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"The schema for the tile grid map is a comma-separated string designed in a spreadsheet program.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"---\n## European Union","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"gridEU = `,,,,Finland,Estonia,,\nIreland,,,Sweden,,Lithuania,Latvia,\n,,Netherlands,Denmark,Poland,,,\n,Belgium,Luxembourg,Germany,Czechia,Slovakia,,\n,,France,,Austria,Hungary,Romania,\nPortugal,Spain,,Italy,Slovenia,Croatia,Bulgaria,\n,,,Malta,,,Greece,Cyprus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"EUtile = gridPlot(gridEU)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"euCountries = FileAttachment(\"eu-countries@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"d3_composite = require(\"d3-composite-projections\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"EUgeo = Plot.plot({\n width: 640,\n height: 640,\n margin: 10,\n projection: ({ width, height }) =>\n d3_composite.geoConicConformalEurope().fitSize([width, width], euCountries),\n marks: [\n Plot.geo(euCountries, { stroke: \"#808080\", fill: \"#f0f0f0\" }),\n Plot.text(euCountries.features, {\n x: (d) =>\n d.properties.NAME_LATN !== \"France\" ? d3.geoCentroid(d)[0] : 3,\n y: (d) =>\n d.properties.NAME_LATN !== \"France\" ? d3.geoCentroid(d)[1] : 47,\n text: (d) => d.properties.NAME_LATN,\n fill: \"black\",\n stroke: \"white\",\n strokeWidth: 3,\n paintOrder: \"stroke\",\n textAnchor: \"middle\",\n lineAnchor: \"middle\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"geo2tile = html`

${EUgeo}

${EUtile}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"eu_renewables = await FileAttachment(\"eu_renewables.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"eu_renewables","database":"$undefined"},{"id":514,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"plotCountry(eu_renewables, \"Italy\", 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"---\n## France","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"gridFR = `,,Hauts-de-France,,,Martinique\n,Normandie,Paris Region,Grand Est,,Guadeloupe\nBrittany,Pays de la Loire,Centre-Val de Loire,Bourgogne-Franche-Comté,,French Guiana\n,Nouvelle-Aquitaine,Auvergne-Rhône-Alpes,,,\n,Occitanie,Provence Alpes Côte d’Azur,,,Mayotte\n,,,Corsica,,Réunion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"gridPlot(gridFR)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"france_regions_tourism_20241 = await FileAttachment(\"france_regions_tourism_2024@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"france_regions_tourism_20241","database":"$undefined"},{"id":564,"value":"plotRegion = (data, region, size = 120) => {\n const regionData = data\n .filter(\n (d) => d.region === region && (d.type === \"DOM\" || d.type === \"FOR\")\n )\n .map((d) => ({\n ...d,\n value: +d.value\n }));\n\n const max = d3.max(data, (d) => d.value);\n\n return Plot.plot({\n width: size,\n height: size * 0.8,\n margin: 12,\n axis: null,\n y: { domain: [0, max] },\n color: {\n domain: [\"DOM\", \"FOR\"],\n range: [\"#74a9cf\", \"#fdae6b\"],\n legend: false\n },\n marks: [\n Plot.waffleY(regionData, {\n y: \"value\",\n fill: \"type\",\n unit: 100000,\n gap: 1,\n rx: \"100%\",\n round: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"plotRegion(france_regions_tourism_20241, \"Brittany\", 120)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"---\n## Barcelona","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"gridBCN = `Sarrià-Sant Gervasi,Gràcia,,Nou Barris\nLes Corts,Eixample,Horta-Guinardó,Sant Andreu\nSants-Montjuïc,Ciutat Vella,Sant Martí,`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"gridPlot(gridBCN)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"barcelonaOrigins = await FileAttachment(\"barcelona_districts_origin@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"barcelonaOrigins","database":"$undefined"},{"id":682,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"gridBCN2 = [\n { feature: \"Sarrià-Sant Gervasi\", x: 0, y: 0 },\n { feature: \"Gràcia\", x: 1, y: 0.5 },\n { feature: \"Nou Barris\", x: 3, y: 0.5 },\n { feature: \"Les Corts\", x: 0, y: 1 },\n { feature: \"Eixample\", x: 1, y: 1.5 },\n { feature: \"Horta-Guinardó\", x: 2, y: 1 },\n { feature: \"Sant Andreu\", x: 3, y: 1.5 },\n { feature: \"Sants-Montjuïc\", x: 0, y: 2 },\n { feature: \"Ciutat Vella\", x: 1, y: 2.5 },\n { feature: \"Sant Martí\", x: 2, y: 2 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"plotDistrict(barcelonaOrigins, \"Ciutat Vella\", 120)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"gridPlot = (grid) => {\n const data = transformGrid(grid);\n const w = (width > 640 && 640) || width;\n\n const columns = d3.max(data, (d) => d.x) + 1;\n const rows = d3.max(data, (d) => d.y) + 1;\n\n return Plot.plot({\n width: w,\n height: (w * rows) / columns,\n marks: [\n Plot.rect(data, {\n x: \"x\",\n y: \"y\",\n stroke: \"#808080\",\n interval: 1,\n inset: 6,\n fill: \"#f0f0f0\",\n title: \"state\",\n r: 5\n }),\n Plot.text(data, {\n x: (d) => d.x + 0.5,\n y: (d) => d.y + 0.5,\n text: \"feature\",\n lineWidth: w / rows / 16,\n lineAnchor: \"middle\",\n textAnchor: \"middle\"\n })\n ],\n x: { axis: null, type: \"linear\" },\n y: { axis: null, type: \"linear\", reverse: true }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2e:"$2d:body"