2f:[] 2d:{"title":"Income map of France","cells":[{"id":0,"value":"# Income map of France\n\nSee [**final version here**](https://eurostat.github.io/gridviz/examples/demos/FR_income.html).\n\nThis is a gridded map showing the income of France at 200m resolution. Each cell is described by the average monthly income in €, and population. Various styles are available to show income and population together. The map is based on [GridViz](https://github.com/eurostat/gridviz/) library and its [shape/color/size style](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-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":842,"value":"viewof year = Inputs.radio([\"2015\", \"2017\", \"2019\"], {\n label: \"Year\",\n value: \"2019\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"viewof styleSel = Inputs.radio(\n new Map([\n [\"only color\", \"col\"],\n [\"with population as size\", \"size\"],\n [\"with population as transparency\", \"alpha\"]\n ]),\n { value: \"size\", label: \"Style\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof pnb = Inputs.range([2, 30], {\n value: 4,\n label: \"Level of detail\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"viewof stretch = Inputs.range([0.0, 0.8], {\n value: 0.1,\n label: \"Population distribution\",\n step: 0.01\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: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"## Map definition with GridViz","pinned":false,"hidden":false,"mode":"md"},{"id":918,"value":"colR = d3.scaleLinear([0, 0.4, 1], [\"#377eb8\", \"#ffff33\", \"#e41a1c\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"colorFunction = (cell) => {\n const v = cell.revind;\n let t = (v - 1200) / (3700 - 1200);\n t = t > 1 ? 1 : t < 0 ? 0 : t;\n return colR(t);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"styleColor = [\n new g.ShapeColorSizeStyle({\n color: colorFunction,\n blendOperation: (z) => (z < 20 ? \"multiply\" : \"source-over\")\n }),\n strokeStyle\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"styleColorSize = [\n new g.ShapeColorSizeStyle({\n size: (cell, r, z, max) => r * scale(cell.ind / max),\n viewScale: (cells) => d3.max(cells, (cell) => +cell.ind),\n color: colorFunction,\n blendOperation: (z) => (z < 20 ? \"multiply\" : \"source-over\")\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"styleColorAlpha = [\n new g.ShapeColorSizeStyle({\n viewScale: (cells) => d3.max(cells, (cell) => +cell.ind),\n color: (cell, r, z, max) => {\n const v = cell.revind;\n let t = (v - 1200) / (3700 - 1200);\n t = t > 1 ? 1 : t < 0 ? 0 : t;\n const color = d3.color(colR(t));\n color.opacity = scale(cell.ind / max);\n return color;\n },\n blendOperation: (zf) => (zf < 20 ? \"multiply\" : \"source-over\")\n }),\n strokeStyle\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"scale = g.powerScale(stretch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"strokeStyle = new g.StrokeStyle({\n strokeColor: (cell) => (cell.revind ? \"#666\" : \"\"),\n visible: (z) => z < 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"styleDict = {\n return {\n col: styleColor,\n size: styleColorSize,\n alpha: styleColorAlpha\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"map = new g.Map(container, { x: 3761000, y: 2890000, z: 30 }).addZoomButtons()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"datasets = {\n const ddd = (year) =>\n 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/inc/\" +\n year +\n \"/\" +\n resolution +\n \"m/\"\n ),\n {\n preprocess: (c) => {\n //compute income per inhabitant per month\n c.revind = Math.round(c.ind_snv / c.ind / 12);\n }\n }\n );\n return { \"2015\": ddd(\"2015\"), \"2017\": ddd(\"2017\"), \"2019\": ddd(\"2019\") };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"gridLayer = new g.GridLayer(datasets[year], [], {\n minPixelsPerCell: pnb,\n cellInfoHTML: (c) =>\n \"Income: \" +\n c.revind +\n \" € per month per person
Population: \" +\n c.ind\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"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: (zf) => \"#ffffff60\",\n visible: (z) => z < 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"backgroundLayer2 = new g.BackgroundLayer(\n ges.giscoBackgroundLayer(\"OSMPositronBackground\", 18, \"EPSG3035\", {\n filterColor: () => \"#ffffff60\",\n visible: (z) => z >= 50\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"labelLayer = new g.LabelLayer(ges.getEuronymeLabelLayer(\"FR\", 20, { ex: 2.5 }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"(map.layers = [backgroundLayer1, backgroundLayer2, gridLayer, labelLayer])","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"{\n gridLayer.styles = styleDict[styleSel];\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":676,"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":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"}],"files":"$W2f","stdlib":"1","titling":"auto"}