31:T53a,clcLabels = ({ 1: "Continuous urban fabric", 2: "Discontinuous urban fabric", 3: "Industrial or commercial units", 4: "Road and rail networks and associated land", 5: "Port areas", 6: "Airports", 7: "Mineral extraction sites", 8: "Dump sites", 9: "Construction sites", 10: "Green urban areas", 11: "Sport and leisure facilities", 12: "Non-irrigated arable land", 13: "Permanently irrigated land", 14: "Rice fields", 15: "Vineyards", 16: "Fruit trees and berry plantations", 17: "Olive groves", 18: "Pastures", 19: "Annual crops associated with permanent crops", 20: "Complex cultivation patterns", 21: "Land principally occupied by agriculture with significant areas of natural vegetation", 22: "Agro-forestry areas", 23: "Broad-leaved forest", 24: "Coniferous forest", 25: "Mixed forest", 26: "Natural grasslands", 27: "Moors and heathland", 28: "Sclerophyllous vegetation", 29: "Transitional woodland-shrub", 30: "Sands", 31: "Bare rocks", 32: "Sparsely vegetated areas", 33: "Burnt areas", 34: "Glaciers and perpetual snow", 35: "Inland marshes", 36: "Peat bogs", 37: "Salt marshes", 38: "Salines", 39: "Intertidal flats", 40: "Water courses", 41: "Water bodies", 42: "Coastal lagoons", 43: "Estuaries", //"44": "Sea and ocean", 48: "No data" })32:T645,drawLegend = (legendItems) => { let container = document.getElementById("container-div"); // remove existing legend node let existing = document.getElementById("christmas-legend"); if (existing) existing.remove(); if (container && showLegend && layerSelection == "Land cover") { console.log("legend redraw"); let legendContainer = document.createElement("div"); legendContainer.id = "christmas-legend"; // santa hat let santa = document.createElement("div"); santa.id = "legend-santa"; // title let title = document.createElement("div"); title.id = "legend-title"; title.innerHTML = "Land cover type"; // items let itemsContainer = document.createElement("div"); itemsContainer.id = "legend-items"; legendItems.forEach((item) => { let itemDiv = document.createElement("div"); // emoji let emoji = document.createElement("div"); emoji.style.display = "inline-block"; emoji.style.minWidth = "30px"; emoji.innerHTML = item[1]; // label let label = document.createElement("div"); label.style.display = "inline-block"; label.innerHTML = item[2]; itemDiv.appendChild(emoji); itemDiv.appendChild(label); itemsContainer.appendChild(itemDiv); }); // lights let lights = document.createElement("div"); lights.id = "lights"; legendContainer.appendChild(santa); //legendContainer.appendChild(title); legendContainer.appendChild(lights); legendContainer.appendChild(itemsContainer); container.appendChild(legendContainer); } }33:T53b,html` `34:T4a1,html` `35:T1fd8,snowglobe = html` `36:T9ec,makeItSnow = { // Snow from https://codepen.io/radum/pen/xICAB (function () { var COUNT = 300; var masthead = div; let existing = document.getElementById("gridviz-snow"); if (existing) existing.remove(); var canvas = document.createElement("canvas"); canvas.id = "gridviz-snow"; canvas.style.pointerEvents = "none"; var ctx = canvas.getContext("2d"); var width = masthead.clientWidth; var height = masthead.clientHeight; var i = 0; var active = false; function onResize() { width = masthead.clientWidth; height = masthead.clientHeight; canvas.width = width; canvas.height = height; ctx.fillStyle = "#FFF"; var wasActive = active; active = width > 600; if (!wasActive && active) requestAnimFrame(update); } var Snowflake = function () { this.x = 0; this.y = 0; this.vy = 0; this.vx = 0; this.r = 0; this.reset(); }; Snowflake.prototype.reset = function () { this.x = Math.random() * width; this.y = Math.random() * -height; this.vy = 1 + Math.random() * 1.5; this.vx = 0.5 - Math.random(); this.r = 1 + Math.random() * 2; this.o = 0.5 + Math.random() * 0.5; }; canvas.style.position = "absolute"; canvas.style.left = canvas.style.top = "0"; var snowflakes = [], snowflake; for (i = 0; i < COUNT; i++) { snowflake = new Snowflake(); snowflake.reset(); snowflakes.push(snowflake); } // shim layer with setTimeout fallback const requestAnimFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); function update() { ctx.clearRect(0, 0, width, height); if (!active) return; for (i = 0; i < COUNT; i++) { snowflake = snowflakes[i]; snowflake.y += snowflake.vy; snowflake.x += snowflake.vx; ctx.globalAlpha = snowflake.o; ctx.beginPath(); ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); if (snowflake.y > height) { snowflake.reset(); } } requestAnimFrame(update); } onResize(); window.addEventListener("resize", onResize, false); masthead.appendChild(canvas); })(); }37:[{"id":"11e7abdf5151b182c8980e009ca3e704b9588d6b8e88c8604681af739009a6115ae5be9fcf939b939f54a4063c62a9eaaf4ba6fae47af5fc1be1015886b073af","href":"https://static.observableusercontent.com/files/11e7abdf5151b182c8980e009ca3e704b9588d6b8e88c8604681af739009a6115ae5be9fcf939b939f54a4063c62a9eaaf4ba6fae47af5fc1be1015886b073af","name":"merry_christmas.mp3","type":"audio/mpeg","lastModified":1702900585462.556,"size":988912},{"id":"86b901041b71dc78133fa9330a02ef72678ebd9c8af6226e6b808535563d3ab4af7c663a27fdb9800e9b68f3d1d9ca70923da36675b1ac9ba9687891ac2d1339","href":"https://static.observableusercontent.com/files/86b901041b71dc78133fa9330a02ef72678ebd9c8af6226e6b808535563d3ab4af7c663a27fdb9800e9b68f3d1d9ca70923da36675b1ac9ba9687891ac2d1339","name":"hat.png","type":"image/png","lastModified":1702383222762.051,"size":3659},{"id":"88efc3c4d1069e00730298876c6ceff95da488d980195710f8c2466136c1e5b0ebf5a17caef38521cab574682966fe2f493cefddfbd8eac199bcf6440a7d8600","href":"https://static.observableusercontent.com/files/88efc3c4d1069e00730298876c6ceff95da488d980195710f8c2466136c1e5b0ebf5a17caef38521cab574682966fe2f493cefddfbd8eac199bcf6440a7d8600","name":"image.png","type":"image/png","lastModified":1702566109936.215,"size":160452}] 2f:{"title":"Gridviz Christmas map","cells":[{"id":0,"value":"# Gridviz Christmas map","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"Merry Christmas! with [gridviz](https://github.com/eurostat/gridviz).","pinned":false,"hidden":false,"mode":"md"},{"id":1377,"value":"{\n let audio = html`

`;\n\n audio.volume = 0.2; // adjust default volume here\n setTimeout(() => {\n audio.play();\n }, 5000);\n return audio;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"div = {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof layerSelection = Inputs.radio([\"Land cover\",\"Population\"], {value: \"Land cover\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof placenames = Inputs.toggle({ label: \"Placenames\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"viewof showBackground = Inputs.toggle({\n label: \"Background map\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"viewof showLegend = Inputs.toggle({\n label: \"Legend\",\n value: width < 768 ? false : true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"viewof pixNb = Inputs.range([2, 20], {\n label: \"Min pixels per cell\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof exponent = Inputs.range([0.1, 1], {\n label: \"Size exponent (population only)\",\n step: 0.05,\n value: 0.3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"viewof emoji = Inputs.select(\n [\n \"🔔\",\n \"🍴\",\n \"🎁\",\n \"👶\",\n \"🕯️\",\n \"🎅\",\n \"👼\",\n \"🎶\",\n \"🤶\",\n \"❄️\",\n \"☃️\",\n \"⛄\",\n \"🌟\",\n \"🔥\",\n \"🎄\",\n \"🍷\",\n \"🦌\",\n \"🍪\",\n \"🥛\",\n \"🧝‍♀️\",\n \"🧦\",\n \"🧝‍♂️\",\n \"🧑‍🎄\",\n \"🧝\"\n ],\n { label: \"Population emoji\", value: \"🧑‍🎄\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"//scaleSqrt is equvalent to scalePow().exponent(0.5). If the exponent is decreased (i.e. 0.3), it shows more small values.\nsizeScale = d3.scalePow().exponent(exponent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"populationTextStyle = new g.TextStyle({\n color: () => \"#000\",\n fontFamily: () => fontFamily,\n text: (cell, resolution, stats, zoom) => emoji,\n viewScale: (cells, resolution, z) => {\n // make calculations using all cells in the current view\n let extent = d3.extent(cells, (cell) => +cell[\"2018\"]);\n sizeScale.domain(extent).range([5 * z, 1.1 * resolution]);\n //minimum size is 3 screen pixels, which is in ground meters: 5 * z\n //maximum ssize is a bit bigger than a grid cell: for example, 1.1 * resolution\n drawLegend();\n return extent;\n },\n fontSize: (cell, resolution, z, [min, max]) => sizeScale(cell[\"2018\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"landCoverTextStyle = new g.TextStyle({\n viewScale: (cells, resolution, z) => {\n // update legend to only show categories in view\n let categoriesInView = cells.map((c) => c.clc);\n let uniqueCategoriesInView = categoriesInView.filter(onlyUnique);\n let viewLegendItems = [];\n uniqueCategoriesInView.forEach((cat) => {\n if (allLegendItems.find((item) => item[0] == cat)) {\n viewLegendItems.push([cat, corineToChristmas[cat], clcLabels[cat]]);\n }\n });\n drawLegend(viewLegendItems);\n },\n text: (cell, resolution, z) => {\n const c = +cell.clc;\n //moving rabbit\n // if (c == 18 && Math.random() < 0.9) return;\n //moving deer\n //if ((c == 26 || c == 27) && Math.random() < 0.9) return;\n return corineToChristmas[c];\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"corineToChristmas = ({\n 1: \"🎅\",\n 2: \"🤶\",\n 3: \"🎁\", //🔔\n // 4: \"🛷\",\n // 6: \"✈️\",\n 7: \"🎅\",\n 9: \"⛄\",\n 10: \"🎄\",\n 11: \"⛸️\",\n 15: \"🍷\",\n 18: \"🐇\",\n 20: \"⛄\",\n 22: \"🎄\",\n 23: \"🌳\",\n 24: \"🎄\",\n 25: \"🌿\",\n 26: \"🦌\",\n 27: \"🦌\",\n 29: \"🌿\",\n 31: \"🏔️\", //\"🥌\",\n 33: \"🔥\",\n 34: \"❄️\",\n 40: \"🧊\",\n 41: \"🧊\",\n 42: \"🧊\",\n 43: \"🧊\"\n\n /*\n 🌳\n ⛸️\n 🥌\n ⛷️\n 🛷\n \"🔔\", \n \"🍴\",\n \"🎁\",\n \"👶\",\n \"🕯️\",\n \"👼\",\n \"🎶\",\n \"🤶\",\n \"❄️\",\n \"☃️\",\n \"⛄\",\n \"🌟\",\n \"🔥\",\n \"🍷\",\n \"🦌\",\n \"🍪\",\n \"🥛\",\n \"🧝‍♀️\",\n \"🧦\",\n \"🧝‍♂️\",\n \"🧑‍🎄\",\n \"🧝\"\n */\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"Define datasets (multi-resolution)","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"populationDataset = new g.MultiResolutionDataset(\n [1000, 2000, 5000, 10000, 20000, 50000, 100000],\n (resolution) =>\n new g.TiledGrid(\n map,\n \"https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population/\" +\n resolution +\n \"m/\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"landCoverDataset = new g.MultiResolutionDataset(\n [500, 1000, 2000, 5000, 10000, 20000, 50000, 100000],\n (resolution) =>\n new g.TiledGrid(\n map,\n \"https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/clc/\" +\n resolution +\n \"m/\"\n )\n)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"Define grid layer, based on dataset","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"populationGridLayer = new g.GridLayer(populationDataset, [], {\n cellInfoHTML: (cell) =>\n \"\" +\n spaceAsThousandSeparator(parseInt(cell[\"2018\"])) +\n \" christmas elves\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"landCoverGridLayer = new g.GridLayer(landCoverDataset, [], {\n cellInfoHTML: (cell) =>\n cell.clc == 7 ? \"Santa Claus!!\" : clcLabels[cell.clc]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"Define background and label layers","pinned":false,"hidden":false,"mode":"md"},{"id":874,"value":"filterColor=\"#c6e6ff55\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"backgroundLayer = new g.BackgroundLayer({\n url: \"https://raw.githubusercontent.com/jgaffuri/mbxyz/main/pub/elevation_shading/\",\n resolutions: Array.from(\n { length: 9 },\n (_, i) => 28.00132289714475 * Math.pow(2, 10 - i)\n ),\n origin: [0, 6000000],\n filterColor: () => filterColor\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"haloColor=\"white\" //\"#e5f4ff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"labelLayer = new g.LabelLayer(\n ges.getEuronymeLabelLayer(\"EUR\", 20, {\n color: () => \"#000\",\n fontFamily: fontFamily,\n haloColor: () => haloColor,\n exSize: 2\n //ex: 10\n // style: () => \"bold 1em Arial\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"Define map","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"map = new g.Map(document.getElementById(\"container-div\"), {\n w: width,\n h: width / 2,\n x: 4000000,\n y: 2500000,\n z: 1000,\n zoomExtent: [10, 10000],\n selectionRectangleColor: \"#A84F85\"\n}).addZoomButtons()","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"Define map layers stack: The grid layer and the labels on top.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"map.layers = [backgroundLayer, populationGridLayer, landCoverGridLayer, labelLayer]","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"Redraw map on changes","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"{\n populationGridLayer.styles = [populationTextStyle];\n populationGridLayer.minPixelsPerCell = pixNb;\n populationGridLayer.visible = () => layerSelection == \"Population\";\n landCoverGridLayer.styles = [landCoverTextStyle];\n landCoverGridLayer.minPixelsPerCell = pixNb;\n landCoverGridLayer.visible = () => layerSelection == \"Land cover\";\n labelLayer.visible = () => placenames;\n backgroundLayer.visible = () => showBackground;\n map.setBackgroundColor(\"#c6e6ff\");\n map.redraw();\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"Draw a christmas legend","pinned":false,"hidden":false,"mode":"md"},{"id":1042,"value":"allLegendItems = {\n // [id, emoji, label]\n let legendItems = [];\n for (let category in corineToChristmas) {\n legendItems.push([\n category,\n corineToChristmas[category],\n clcLabels[category]\n ]);\n }\n return legendItems;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"## CSS","pinned":false,"hidden":false,"mode":"md"},{"id":1183,"value":"Legend CSS","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"Tooltip CSS","pinned":false,"hidden":false,"mode":"md"},{"id":1200,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"## Snow","pinned":false,"hidden":false,"mode":"md"},{"id":1291,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"oldsnow = {\n // var duration = 15000 * 1000;\n // var animationEnd = Date.now() + duration;\n // function randomInRange(min, max) {\n // return Math.random() * (max - min) + min;\n // }\n // (function frame() {\n // var timeLeft = animationEnd - Date.now();\n // var ticks = Math.max(200, 500 * (timeLeft / duration));\n // confetti.default({\n // particleCount: 1,\n // startVelocity: 0,\n // ticks: ticks,\n // origin: {\n // x: Math.random(),\n // y: 0.014\n // },\n // colors: [\"#ffffff\"],\n // shapes: [\"circle\"],\n // gravity: randomInRange(0.4, 0.6),\n // scalar: randomInRange(0.1, 1),\n // drift: randomInRange(-0.4, 0.4),\n // flat: false,\n // decay: 1\n // });\n // if (timeLeft > 0) {\n // requestAnimationFrame(frame);\n // }\n // })();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"## Font magic","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"Thanks to https://observablehq.com/@josesho/using-google-fonts","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"viewof fontFamily = Inputs.select(\n [\n // you can add any google font to this list\n \"Mountains of Christmas\",\n \"Source Serif Pro\",\n \"Source Sans Pro\",\n \"Alegreya\",\n \"Inter\",\n \"Lato\",\n \"Laila\",\n \"Merriweather\",\n \"PT Serif\",\n \"Roboto Slab\",\n \"Rubik\",\n \"Special Elite\"\n ],\n {\n label: \"Desired font\",\n // options:,\n value: \"Mountains of Christmas\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"style = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"parseFont = fontFamily.split(\" \").join(\"+\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":1189,"value":"christmasColors = [\"#F5624D\", \"#CC231E\", \"#34A65F\", \"#0F8A5F\", \"#235E6F\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"{\n return getDiscretePalette(christmasColors);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"getDiscretePalette = (colors) => {\n let node = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 70);\n let cellWidth = width / colors.length;\n let cellHeight = 70;\n for (let i = 0; i < colors.length; i++) {\n node\n .append(\"rect\")\n .attr(\"width\", cellWidth + \"px\")\n .attr(\"height\", cellHeight + \"px\")\n .attr(\"x\", cellWidth * i)\n .attr(\"y\", 1)\n .attr(\"fill\", colors[i]);\n }\n\n return node.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"function onlyUnique(value, index, array) {\n return array.indexOf(value) === index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"spaceAsThousandSeparator = function (number) {\n return number.toLocaleString(\"en\").replace(/,/gi, \" \");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"confetti = import(\n \"https://unpkg.com/canvas-confetti@1.9.2/dist/confetti.module.mjs?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"g = require(\"gridviz@3.0.31\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"ges = require(\"gridviz-eurostat@2.0.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}