31:T47c,gridLayer = new g.GridLayer(dataset, [style], { minPixelsPerCell: agg, cellInfoHTML: attribute == "TOT_P_2021" ? (cell) => +cell[attribute] ? `Population: ${cell[attribute]} inhab.
` : undefined : attribute == "residential_floor_area" ? (cell) => +cell[attribute] ? `Residential floor area: ${cell[attribute]} m²
` : undefined : attribute == "res_area_by_pop" ? (cell) => +cell[attribute] == -2 ? undefined : +cell[attribute] == -1 ? "Residential building area and no population" : cell[attribute] != undefined ? `${cell[attribute].toFixed(1)} m²/person
` : undefined : attribute == "pop_by_res_area" ? (cell) => +cell[attribute] == -2 ? undefined : +cell[attribute] == -1 ? "Population but no residential building area" : cell[attribute] != undefined ? `${cell[attribute].toFixed(1)} persons/100m²
` : undefined : (cell) => "*" })32:[] 2f:{"title":"Population grid - 100m resolution","cells":[{"id":0,"value":"# Population grid - 100m resolution\n\nThis map shows estimated population at 100m resolution for some European countries.\n\nThis is the result of a [dasymetric disaggregation](https://en.wikipedia.org/wiki/Dasymetric_map) of the 1km resolution population grid of [Eurostat](https://ec.europa.eu/eurostat/web/gisco/geodata/grids) with residential floor area computed at 100m resolution from different topographic/cadastral databases (see [here](https://observablehq.com/@eurostat-ws/building-demography)). The visualisation uses [GridViz library](https://github.com/eurostat/gridviz/).","pinned":false,"hidden":false,"mode":"md"},{"id":1041,"value":"TODO: show legends.","pinned":false,"hidden":false,"mode":"md"},{"id":1001,"value":"viewof layer = Inputs.radio(\n new Map([\n [\"Population (100m)\", \"pop100m\"],\n [\"Residential floor area (100m)\", \"res\"],\n [\"Population (1000m)\", \"pop1000m\"],\n [\"Population by res. area (100m)\", \"pop_by_res_area\"],\n [\"Res. area per population (100m)\", \"res_area_by_pop\"]\n ]),\n {\n value: \"pop100m\",\n label: \"Layer\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 2}px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"viewof showBackground = Inputs.toggle({\n label: \"Background\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"viewof showBoundaries = Inputs.toggle({\n label: \"Boundaries\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"viewof showLabels = Inputs.toggle({ label: \"City names\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"viewof stretch = Inputs.range([-20, 25], {\n label: \"Stretch\",\n step: 0.1,\n value: -4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"viewof agg = Inputs.range([0.5, 50], {\n label: \"Aggregation factor\",\n step: 0.5,\n value: 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":909,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":317,"value":"map = new g.Map(container, {\n x: 4430000,\n y: 2870000,\n z: 2000,\n zoomExtent: [2, 5000]\n}).addZoomButtons()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"### Datasets","pinned":false,"hidden":false,"mode":"md"},{"id":1119,"value":"preprocess100m = (c) => {\n //population by 100m² residential area\n c.pop_by_res_area =\n c.residential_floor_area == 0 && c.TOT_P_2021 == 0\n ? -2\n : c.residential_floor_area == 0\n ? -1 //resident population without residential buildings !\n : (100 * c.TOT_P_2021) / c.residential_floor_area;\n\n //residential area per population\n c.res_area_by_pop =\n c.residential_floor_area == 0 && c.TOT_P_2021 == 0\n ? -2\n : c.TOT_P_2021 == 0\n ? -1 //residential buildings without population\n : c.residential_floor_area / c.TOT_P_2021;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"dataset100m = new g.MultiResolutionDataset(\n [100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000],\n (resolution) =>\n new gp.TiledParquetGrid(\n map,\n \"https://raw.githubusercontent.com/jgaffuri/europop100m/main/pub/tiles_parquet/\" +\n resolution +\n \"/\"\n ),\n { preprocess: preprocess100m }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"dataset1000m = 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/population2/\" +\n resolution +\n \"m/\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"dataset = layer == \"pop1000m\" ? dataset1000m : dataset100m","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"### Style","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"colorScale = (t) => d3.interpolateViridis(1 - t) //interpolateYlGnBu","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"scale = g.logarithmicScale(stretch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"style = new g.ShapeColorSizeStyle({\n color: (cell, resolution, z, [min, max]) => {\n const v = +cell[attribute];\n if (attribute == \"pop_by_res_area\") {\n if (v == -2) return undefined;\n if (v == -1) return \"red\"; //\"LightSalmon\"; //population but no residential building area\n return colorScale(scale(v / 5));\n }\n if (attribute == \"res_area_by_pop\") {\n if (v == -2) return undefined;\n if (v == -1) return \"red\"; //\"black\"; //residential building area and no population\n if (v > 500) return colorScale(1);\n if (v > 200) return colorScale(0.8);\n if (v > 100) return colorScale(0.6);\n if (v > 50) return colorScale(0.4);\n if (v > 0.0001) return colorScale(0.2);\n return colorScale(0);\n }\n if (v < 0) return \"red\";\n if (v == 0) return undefined;\n\n return colorScale(scale((v - min) / (max - min)));\n },\n viewScale: (cells) => d3.extent(cells, (cell) => +cell[attribute]),\n blendOperation: (zf) => (zf < 10 ? \"multiply\" : \"source-over\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"strokeStyle = new g.StrokeStyle({\n strokeColor: (cell) => (+cell[attribute] ? \"#666\" : undefined),\n visible: (z) => z < 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"attribute = layer == \"pop100m\"\n ? \"TOT_P_2021\"\n : layer == \"pop1000m\"\n ? \"TOT_P_2021\"\n : layer == \"res\"\n ? \"residential_floor_area\"\n : layer == \"pop_by_res_area\"\n ? \"pop_by_res_area\"\n : layer == \"res_area_by_pop\"\n ? \"res_area_by_pop\"\n : \"Error\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"### Layers","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"backgroundLayer1 = 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: () => \"#ffffff60\",\n visible: () => false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"backgroundLayer2 = new g.BackgroundLayer(\n gridvizEurostat.giscoBackgroundLayer(\n \"OSMPositronBackground\",\n 18,\n \"EPSG3035\",\n {\n visible: () => false\n }\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"boundariesLayer = new g.GeoJSONLayer(\n gridvizEurostat.getEurostatBoundariesLayer()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"labelLayer = new g.LabelLayer(gridvizEurostat.getEuronymeLabelLayer(\"EUR\", 20))","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"{\n map.layers = [\n backgroundLayer1,\n backgroundLayer2,\n gridLayer,\n boundariesLayer,\n labelLayer\n ];\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"{\n backgroundLayer1.visible = (z) => showBackground && z >= 50;\n backgroundLayer2.visible = (z) => showBackground && z < 50;\n boundariesLayer.visible = () => showBoundaries;\n labelLayer.visible = () => showLabels;\n gridLayer.styles = [style, strokeStyle];\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"g = require(\"gridviz@3.0.17\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"gp = require(\"gridviz-parquet@1.0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"gridvizEurostat = require(\"gridviz-eurostat\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}