2f:[] 2d:{"title":"Isometric fence map","cells":[{"id":0,"value":"# Isometric fence map\n\nThis is a map showing the population of France by age group as an isometric fence map. This is inspired by the fabulous [USGS geologic isometric fence diagrams (1953)](https://pubs.usgs.gov/pp/0228/). See also [here](https://socks-studio.com/2023/10/15/the-hidden-territory-usgss-1950s-to-1970s-isometric-geological-diagrams/).\n\nThe maps is based on [GridViz](https://github.com/eurostat/gridviz/) library and its [isometric fence style](https://eurostat.github.io/gridviz/docs/reference#isometric-fence-style).\n\nData: [INSEE-FR Filosofi grid](https://www.insee.fr/fr/statistiques/7655515).\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 2}px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof angle = Inputs.range([-180, 180], {\n value: 55,\n label: \"Angle\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"viewof heiF = Inputs.range([0.1, 4], {\n value: 1.2,\n label: \"Height exageration\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"viewof stretch = Inputs.range([0.0, 30], {\n value: 9,\n label: \"Heights distribution\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof pnb = Inputs.range([5, 50], {\n value: 20,\n label: \"Level of detail\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"viewof showHorizontal = Inputs.toggle({\n label: \"Horizontal\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"viewof showVertical = Inputs.toggle({\n label: \"Vertical\",\n value: true\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"viewof showLabels = Inputs.toggle({ label: \"City names\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"viewof showBackground = Inputs.toggle({\n label: \"Background\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"style = new g.IsoFenceStyle({\n color: {\n ind_0_17: colorScale(0.2),\n ind_18_64: colorScale(0.4),\n ind_65p: colorScale(0.9)\n },\n angle: angle,\n height: (cell, resolution, z, max) =>\n heiF * resolution * scale(+cell.ind / max),\n viewScale: (cells) => d3.max(cells, (cell) => +cell.ind),\n sVert: showVertical,\n sHor: showHorizontal\n //cornerLineStrokeColor: () => \"#999\",\n //cornerLineWidth: (c, r, zf, angle) => (angle % 90 < 5 ? 0 : 0.8 * zf)\n //blendOperation: (zf) => (zf < 10 ? \"multiply\" : \"source-over\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"scale = g.logarithmicScale(-stretch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"colorScale = d3.interpolateSpectral","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"g = require(\"gridviz@3.0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"ges = require(\"gridviz-eurostat@2.0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"map = new g.Map(container, { x: 3750000, y: 2700000, z: 800 }).addZoomButtons()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"dataset = new g.MultiResolutionDataset(\n [200, 400, 600, 1000, 2000, 5000, 10000, 20000, 50000, 100000],\n (resolution) =>\n new g.TiledGrid(\n map,\n \"https://raw.githubusercontent.com/jgaffuri/tiled-grid-france-filosofi/main/out/csv/met/ind/2019/\" +\n resolution +\n \"m/\"\n ),\n {\n preprocess: (c) => {\n c.ind_0_17 = +c.ind_0_3 + +c.ind_4_5 + +c.ind_6_10 + +c.ind_11_17;\n c.ind_18_64 = +c.ind_18_24 + +c.ind_25_39 + +c.ind_40_54 + +c.ind_55_64;\n c.ind_65p = +c.ind_65_79 + +c.ind_80p;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"f = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"gridLayer = new g.GridLayer(dataset, [], {\n minPixelsPerCell: pnb,\n cellInfoHTML: (c) =>\n \"Population: \" +\n c.ind +\n \"
By age:
<18: \" +\n f(c.ind_0_17) +\n \"
18-64:\" +\n f(c.ind_18_64) +\n \"
>64:\" +\n f(c.ind_65p)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"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: (z) => z >= 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"backgroundLayer2 = new g.BackgroundLayer(\n ges.giscoBackgroundLayer(\"OSMPositronBackground\", 18, \"EPSG3035\", {\n visible: (z) => z < 50\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"labelLayer = new g.LabelLayer(ges.getEuronymeLabelLayer(\"FR\", 20, { ex: 2.5 }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"(map.layers = [backgroundLayer1, backgroundLayer2, gridLayer, labelLayer])","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"{\n gridLayer.styles = [style];\n gridLayer.minPixelsPerCell = pnb;\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"{\n labelLayer.visible = () => showLabels;\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"{\n backgroundLayer1.visible = (z) => showBackground && z >= 50;\n backgroundLayer2.visible = (z) => showBackground && z < 50;\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"style.legends.push(\n new g.ColorCategoryLegend({\n title: \"Age\",\n colorLabel: [\n [colorScale(0.2), \"<= 17\"],\n [colorScale(0.4), \"18-64\"],\n [colorScale(0.9), \" > 65\"]\n ].reverse()\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"/*{\n const step = function () {\n style.angle += 10;\n map.redraw();\n setTimeout(step, 10);\n };\n step();\n}*/","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}