31:[] 2f:{"title":"deck.gl Country Layers","cells":[{"id":0,"value":"md`# deck.gl Country Layers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"lightSettings = {\n return {\n lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],\n ambientRatio: 0.7,\n diffuseRatio: 0.6,\n specularRatio: 0.2,\n lightsStrength: [0.8, 0.0, 0.8, 0.0],\n numberOfLights: 1\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"{\n const geojsonLayer = new deck.GeoJsonLayer({\n data,\n opacity: 1,\n filled: true,\n extruded: true,\n lightSettings,\n elevationScale:5000,\n getElevation: f => f.properties.name.length*10,\n getFillColor: f => colorScale(f.properties.name.length),\n getLineColor: f => [255, 255, 255],\n \n pickable: true,\n onHover\n });\n \n deckgl.setProps({layers: [geojsonLayer]});\n \n return geojsonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"tooltip = container.querySelector('#tooltip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"data = d3.json('https://raw.githubusercontent.com/bumbeishvili/d3js-boilerplates/gh-pages/Maps/World/world_countries.json')","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"scale = d3.scaleLinear().domain([7,20]).range([0,5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"Math.round(scale(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"colorArr = ['#EBF8FC','#BCD2E8','#99BBDD','#8C92CA','#9248AB','#8E007F']\n.map(d=>d3.hcl(d))\n.map(d=>d.rgb())\n.map(d=>[Math.round(d.r),Math.round(d.g),Math.round(d.b)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"colorScale = {\n const COLOR_SCALE = colorArr;\n \n \n\n return x => {\n const i = Math.round(scale(x));\n if (x < 0) {\n return COLOR_SCALE[i] || COLOR_SCALE[0];\n }\n return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n // This token is for demo purpose only and rotated regularly. Get your own token at https://www.mapbox.com\n mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',\n mapStyle: 'mapbox://styles/mapbox/dark-v9',\n latitude: 49.254,\n longitude: 20.13,\n zoom: 1,\n maxZoom: 16,\n pitch: 45\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"onHover = {\n return function(info) {\n const {x, y, object} = info;\n if (object) {\n tooltip.style.top = `${y}px`;\n tooltip.style.left = `${x}px`;\n tooltip.innerHTML = `\n

${object.properties.name}

\n `;\n } else { \n tooltip.innerHTML = '';\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"deck = require('deck.gl@~5.2.0/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}