30:T453,tanakaStyle = [ new gridviz.ShapeColorSizeStyle({ color: (cell) => { const v = cell["2018"]; const breaks = [1500, 6000, 20000, 60000, 150000]; const colors = [ "#ffffd4", "#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404" ]; for (let i = 0; i < breaks.length; i++) { if (v < breaks[i]) return colors[i]; } return colors[colors.length - 1]; }, blendOperation: (zf) => (zf < 50 ? "multiply" : "source-over") }), new gridviz.SideTanakaStyle({ classifier: (cells) => { return (c) => { const v = c["2018"]; if (v === undefined) return undefined; if (v < 0) return 0; if (v < 1000) return 1; if (v < 2000) return 2; if (v < 5000) return 3; if (v < 10000) return 4; if (v < 20000) return 5; if (v < 30000) return 6; return 7; }; }, width: (side, sideValue, resolution, z, sidesScale) => (Math.abs(sideValue) * z) / 2, limit: "steep" // none step steep //revert: true, }) ]31:[{"id":"95d1ef326788c1a9d0f35be22650bb839a047fc3caa4eda977dc0743ac82dab4ba3b499e9058dfe471b2e5c275c03cb5e432518fed829d7844b11f4e6224dbc6","href":"https://static.observableusercontent.com/files/95d1ef326788c1a9d0f35be22650bb839a047fc3caa4eda977dc0743ac82dab4ba3b499e9058dfe471b2e5c275c03cb5e432518fed829d7844b11f4e6224dbc6","name":"banner.png","type":"image/png","lastModified":1699975594894.377,"size":356512}] 2e:{"title":"Hello, gridviz","cells":[{"id":0,"value":"# Hello, gridviz","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Gridviz is a JavaScript library which allows you to visualise gridded data (or any tabular dataset with x/y position) in the browser using a large variety of advanced cartographic styles.
\nCheck out the project on GitHub.\n","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"gridviz = require(\"gridviz@3.0.31\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof style = Inputs.radio(\n new Map([\n [\"Squares\", squareColorStyle],\n [\"Lego\", legoStyle],\n [\"Ridgelines\", joyplotStyle],\n [\"Pillars\", pillarStyle],\n [\"Mosaic\", mosaicStyle],\n [\"Dot Density\", dotDensityStyle],\n [\"Tanaka\", tanakaStyle]\n ]),\n {\n label: \"Select a style\",\n value: squareColorStyle // Set the default value to tanakaStyle\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"container = DOM.element(\"div\", {\n id: \"map\",\n style: `width:${width}px;height:${Math.max(width / 2, 600)}px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":17,"value":"map = new gridviz.Map(container, {\n x: 4200000,\n y: 2950000,\n z: 1200\n}).addZoomButtons()","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"dataset = new gridviz.MultiResolutionDataset(\n //array of resolutions, in CRS unit (m)\n [1000, 2000, 5000, 10000, 20000, 50000, 100000],\n\n //function which returns the URL for each resolution value\n (resolution) =>\n new gridviz.TiledGrid(\n map,\n \"https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population/\" +\n resolution +\n \"m/\",\n { onlyDrawWhenAllTilesReady: true }\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"gridLayer = new gridviz.GridLayer(dataset, [], {\n cellInfoHTML: (c) => \"\" + c[\"2018\"] + \" inhabitant(s)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"update = {\n map.layers = [gridLayer, labelLayer];\n gridLayer.styles = style;\n map.redraw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"year = \"2018\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"labelLayer = new gridviz.LabelLayer(\n gridvizEurostat.getEuronymeLabelLayer(\"EUR\", 50, {\n ex: 1.8,\n fontFamily: \"Arial\",\n exSize: 1.8,\n color: () => \"black\",\n haloColor: () => \"#ffffff\",\n haloWidth: () => 3\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"squareColorStyle = [\n new gridviz.SquareColorWebGLStyle({\n tFun: (cell, resolution, z, viewScale) =>\n Math.sqrt(cell[\"2018\"] / (resolution * 10)),\n color: (t) => d3.interpolateOrRd(t),\n blendOperation: (zf) => (zf < 50 ? \"multiply\" : \"source-over\")\n }),\n new gridviz.StrokeStyle({\n strokeColorCol: \"2018\",\n strokeColor: (v) => (+v ? \"#666\" : \"\"),\n maxZoom: 80\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"legoStyle = gridviz.LegoStyle.get(\n (cell) => cell[\"2018\"],\n [1500, 6000, 20000, 60000, 150000],\n [\"#ffffd4\", \"#fee391\", \"#fec44f\", \"#fe9929\", \"#d95f0e\", \"#993404\"]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"joyplotStyle = [\n new gridviz.JoyPlotStyle({\n height: (c, r, z, scale) => scale(c[\"2018\"]),\n viewScale: gridviz.viewScale({\n valueFunction: (c) => +c[\"2018\"],\n maxSizeFactor: 5,\n stretching: gridviz.powerScale(0.4)\n }),\n lineColor: () => \"white\",\n lineWidth: (y, ys, r, z) => 0.1 * r,\n fillColor: () => \"black\"\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"pillarStyle = [\n new gridviz.PillarStyle({\n height: (cell, resolution, z) => 0.3 * cell[\"2018\"],\n simple: (resolution, z) => z > 1000\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"mosaicStyle = [\n new gridviz.MosaicStyle({\n color: (cell) => {\n if (cell[\"2018\"] > 150000) return \"#993404\";\n else if (cell[\"2018\"] > 60000) return \"#d95f0e\";\n else if (cell[\"2018\"] > 20000) return \"#fe9929\";\n else if (cell[\"2018\"] > 6000) return \"#fec44f\";\n else if (cell[\"2018\"] > 1500) return \"#fee391\";\n else return \"#ffffd4\";\n }\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"dotDensityStyle = [\n new gridviz.DotDensityStyle({\n dotNumber: (c, r, z) => c[\"2018\"] / z / 5,\n dotSize: (r, z) => 1.2 * z,\n color: () => \"#FF5733\"\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"euronymURL = \"https://raw.githubusercontent.com/eurostat/euronym/main/pub/v2/UTF/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"gridvizEurostat = require(\"gridviz-eurostat\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}