31:[{"id":"95d1ef326788c1a9d0f35be22650bb839a047fc3caa4eda977dc0743ac82dab4ba3b499e9058dfe471b2e5c275c03cb5e432518fed829d7844b11f4e6224dbc6","href":"https://static.observableusercontent.com/files/95d1ef326788c1a9d0f35be22650bb839a047fc3caa4eda977dc0743ac82dab4ba3b499e9058dfe471b2e5c275c03cb5e432518fed829d7844b11f4e6224dbc6","name":"banner.png","type":"image/png","lastModified":1702026733714.724,"size":356512}] 2f:{"title":"Gridviz text style","cells":[{"id":0,"value":"# Gridviz text style","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"Using text to visualize gridded data with [gridviz](https://github.com/eurostat/gridviz).","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof type = Inputs.radio([\"text\", \"emoji\", \"typewriter\"], {\n label: \"Type\",\n value: \"text\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof threshold = Inputs.range([0, 50], {\n label: \"Population threshold\",\n step: 0.5,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof placenames = Inputs.toggle({ label: \"Show placenames\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"viewof fontFamily = Inputs.select(\n [\n // you can add any google font to this list\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: \"Special Elite\"\n }\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: 9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"emojis = [\"🌑\", \"🌒\", \"🌓\", \"🌔\", \"🌕\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"characters = {\n // put whatever you want here! https://copypastecharacter.com/all-characters\n return [\"∫\", \"∬\", \"∭\"];\n //return [\"-\", \"=\", \"≡\", \"≣\"];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"Define text style","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"textStyle = new g.TextStyle({\n color: () => \"#000\",\n fontFamily: () => fontFamily,\n text: (cell, resolution) => {\n const value = cell[\"2018\"];\n if (type == \"emoji\") {\n // emojis\n if (value < threshold * resolution * 0.25) {\n return emojis[0];\n } else if (value < threshold * resolution * 0.5) {\n return emojis[1];\n } else if (value < threshold * resolution * 0.75) {\n return emojis[2];\n } else if (value < threshold * resolution * 1) {\n return emojis[3];\n } else if (value >= threshold * resolution * 1) {\n return emojis[4];\n }\n } else {\n // text\n if (value < threshold * resolution * 0.1) {\n return characters[0];\n } else if (value < threshold * resolution * 0.6) {\n return characters[1];\n } else if (value >= threshold * resolution * 0.6) {\n return characters[2];\n }\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"typeWriterStyles = [\n new g.TextStyle({\n color: () => \"#000\",\n fontFamily: () => fontFamily,\n text: (cell, resolution) => {\n const value = cell[\"2018\"];\n // text\n return \"E\";\n }\n }),\n new g.TextStyle({\n color: () => \"#000\",\n fontFamily: () => fontFamily,\n text: (cell, resolution) => {\n const value = cell[\"2018\"];\n // text\n if (\n value > threshold * resolution * 0.25 &&\n value < threshold * resolution * 1.25\n ) {\n return \"U\";\n }\n }\n }),\n new g.TextStyle({\n color: () => \"#000\",\n fontFamily: () => fontFamily,\n text: (cell, resolution) => {\n const value = cell[\"2018\"];\n // text\n if (value >= threshold * resolution * 1.25) {\n return \"R\";\n }\n }\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"Define dataset (multi-resolution)","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"dataset = 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":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"Define grid layer, based on dataset","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"gridLayer = new g.GridLayer(dataset, [], {\n minPixelsPerCell: 5,\n cellInfoHTML: (cell) => \"\" + cell[\"2018\"] + \" inhabitant(s)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"Define label layer","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"labelLayer = new g.LabelLayer(ges.getEuronymeLabelLayer())","pinned":true,"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\"), { w: 600, h: 600 , x: 4000000, y: 2960000,z:2000 })\n.addZoomButtons()","pinned":true,"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 = [gridLayer, labelLayer]","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"Redraw map on style change","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"{\n gridLayer.styles = type == \"typewriter\" ? typeWriterStyles : [textStyle];\n gridLayer.minPixelsPerCell = pixNb;\n map.redraw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"Redraw map on labels on/off","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"{\n labelLayer.visible = () => placenames;\n map.redraw();\n}","pinned":true,"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":541,"value":"style = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"parseFont = fontFamily.split(\" \").join(\"+\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"/*function getFlagEmoji(countryCode) {\n const codePoints = countryCode\n .toUpperCase()\n .split(\"\")\n .map((char) => 127397 + char.charCodeAt());\n return String.fromCodePoint(...codePoints);\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"//getFlagEmoji(\"FR\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"g = require(\"gridviz@3.0.25\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"ges = require(\"gridviz-eurostat@2.0.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}