2f:[] 2d:{"title":"deck.gl | HexagonLayer + Camera Animation","cells":[{"id":0,"value":"# deck.gl | HexagonLayer + Camera Animation","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"deck.gl [HexagonLayer example](https://deck.gl/examples/hexagon-layer/)","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"- You can find a website version of it [here](http://www.youjin.info/vite-react-deckgl/). It's made with [vite](https://vitejs.dev/guide/) app and react framework. Code can be found in the [git repo](https://github.com/helloeujin/vite-react-deckgl).","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"# Camera animation","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"using FlyToInterpolator","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"{\n const button = html``\n button.onclick = () => { \n update('Edinburgh')\n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"{\n const button = html``\n button.onclick = () => { \n update('London')\n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"{\n const button = html``\n button.onclick = () => { \n update('England')\n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"# Camera animation","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"update = (city) => {\n const cityData = cities.filter((d) => d.name === city)[0];\n deckgl.setProps({\n initialViewState: {\n longitude: cityData.longitude,\n latitude: cityData.latitude,\n zoom: cityData.zoom,\n pitch: 40.5,\n bearing: -27,\n transitionDuration: 3000,\n transitionInterpolator: new deck.FlyToInterpolator(),\n transitionEasing: d3.easeSinInOut\n }\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"# Layers","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n layers,\n initialViewState: viewState,\n controller: true\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"colorRange = {\n return [\n [1, 152, 189],\n [73, 227, 206],\n [216, 254, 181],\n [254, 237, 177],\n [254, 173, 84],\n [209, 55, 78]\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"layers = [\n new deck.GeoJsonLayer({\n id: \"base-world\",\n data: worldUrl,\n stroked: true,\n filled: true,\n lineWidthMinPixels: 0.5,\n getLineColor: [8, 17, 29],\n getFillColor: [8, 17, 29] // Land color\n }),\n\n new deck.HexagonLayer({\n id: \"heatmap\",\n colorRange,\n data,\n elevationRange: [0, 3000],\n elevationScale: data && data.length ? 50 : 0,\n extruded: true,\n getPosition: (d) => [d.lng, d.lat],\n radius: 500, // 1000\n upperPercentile: 100,\n pickable: true,\n opacity: 1,\n material,\n lightSettings,\n transitions: {\n elevationScale: 3000\n }\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"lightSettings = {\n return {\n lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],\n ambientRatio: 0.4,\n diffuseRatio: 0.6,\n specularRatio: 0.2,\n lightsStrength: [0.8, 0.0, 0.8, 0.0],\n numberOfLights: 2\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewState = ({\n longitude: -1.415727,\n latitude: 52.232395,\n zoom: 6,\n minZoom: 3,\n maxZoom: 6,\n pitch: 40.5,\n bearing: -27\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"material = ({\n ambient: 0.64,\n diffuse: 0.6,\n shininess: 32,\n specularColor: [51, 51, 51]\n // specularColor: [255, 255, 255]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"# Data\n- data: Personal injury road accidents in GB from 1979\n- data source: [DATA.GOV.UK](https://www.data.gov.uk/)","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"cities = [\n {\n name: 'Seoul',\n longitude: 126.9780,\n latitude: 37.5665,\n zoom: 7\n },\n {\n name: 'London',\n longitude: 0.1276,\n latitude: 51.5072,\n zoom: 7\n },\n {\n name: 'New York',\n longitude: 74.0060,\n latitude: 40.7128,\n zoom: 7\n },\n {\n name: 'Edinburgh',\n longitude: -3.3457638,\n latitude: 55.9413208,\n zoom: 7\n },\n {\n name: 'England',\n longitude: -1.415727,\n latitude: 52.232395,\n zoom: 6\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"data = await d3.csv(dataUrl, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"dataUrl = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"worldUrl = \"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deck = require.alias({\n h3: {}\n})(\"deck.gl@latest/dist.min.js\") //@8.8.25 or @latest","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}