31:[] 2f:{"title":"China’s coronavirus aviation shutdown, animated","cells":[{"id":0,"value":"md`# China’s coronavirus aviation shutdown, animated\n\n*By [@davidcblood](https://twitter.com/davidcblood)*\n\nImplementation of the [deck.gl](https://deck.gl) [trips layer](https://deck.gl/#/documentation/deckgl-api-reference/layers/trips-layer) showing the dropoff in air traffic to/from approximately 220 Chinese airports between January 23 and February 13, 2020 due to the coronavirus outbreak.\n\nFlights and aircraft positions data provided by [Flightradar24](https://www.flightradar24.com/). Flight paths simplified to 2 per cent point retention for performance using [mapshaper](https://github.com/mbloch/mapshaper).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapsContainer = html`

Domestic

International

Jan 23

Feb 13

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"deckGlJan23 = {\n const jan23Container = mapsContainer.children[1].children[0].children[1];\n // Observable hack per @pessimistress/deck-gl-tutorial\n jan23Container.innerHTML = '';\n\n return new deck.DeckGL({ container: jan23Container, ...deckGlConfig });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"deckGlFeb13 = {\n const feb13Container = mapsContainer.children[1].children[1].children[1];\n // Observable hack per @pessimistress/deck-gl-tutorial\n feb13Container.innerHTML = '';\n\n return new deck.DeckGL({ container: feb13Container, ...deckGlConfig });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Layers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"tripsLayerJan23 = {\n const layer = new deck.TripsLayer({\n // Observable hack per @pessimistress/deck-gl-tutorial - changing the ID will force the layer to refresh when the cell reevaluates\n id: `trips-jan23-${Date.now()}`,\n data: tripsJan23,\n ...layerConfig\n });\n\n deckGlJan23.setProps({ layers: [layer] });\n\n return layer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"tripsLayerFeb13 = {\n const layer = new deck.TripsLayer({\n // Observable hack per @pessimistress/deck-gl-tutorial - changing the ID will force the layer to refresh when the cell reevaluates\n id: `trips-feb13-${Date.now()}`,\n data: tripsFeb13,\n ...layerConfig\n });\n\n deckGlFeb13.setProps({ layers: [layer] });\n\n return layer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Shared deck.gl config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"deckGlConfig = ({\n map: mapboxgl,\n mapboxApiAccessToken:\n 'pk.eyJ1IjoiZGF2aWRiam91cm5vIiwiYSI6ImNrOGhobDg3cjAwa3kzbHF6YXJtZGM5azYifQ.Bx1aDHXGwfji1T8nNuhw3A',\n mapStyle: 'mapbox://styles/davidbjourno/ck8hhho3g024v1ioawzpj2v42',\n initialViewState: {\n latitude: 31.034065257444905,\n longitude: 110.78176070099809,\n zoom: 2.4506851920514707,\n pitch: 0,\n bearing: 0,\n altitude: 1.5\n },\n controller: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"layerConfig = ({\n getPath: d => d.path,\n getTimestamps: d => d.timestamps,\n getColor: d => (d.is_domestic === 0 ? [11, 94, 230] : [230, 0, 126]),\n opacity: 0.6,\n widthMinPixels: 3,\n rounded: false,\n trailLength,\n currentTime\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"currentTime = {\n while (true) {\n const timestamp = Date.now() / 1000; // Playhead i.e. real-world current time in seconds\n const loopTime = loopLength / animationSpeed; // Real-world duration of animation loop in seconds\n const time = Math.round(((timestamp % loopTime) / loopTime) * loopLength); // Animation world current “time”\n\n yield time;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"animationSpeed = 2880","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"loopLength = 86400","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"trailLength = 1296","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"tripsJan23 = (await fetch(\n \"https://gist.githubusercontent.com/davidbjourno/1778e6989f2230f37d9ac6a6422d0b2e/raw/4b9beaa1c6e83b240b3c4c75b93eeff9ee9a71d8/20200123-china-simplified-2pc-deckgl.json\"\n)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"tripsFeb13 = (await fetch(\n \"https://gist.githubusercontent.com/davidbjourno/cf81a95c93a61e15f1e33893d6514fb3/raw/e1adc0de3c1eebd1aca1c192c4cae26588de1515/20200213-china-simplified-2pc-deckgl.json\"\n)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"deck = require.alias({\n h3: {},\n s2Geometry: {}\n})('deck.gl@^8.1.0/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapboxgl = require('mapbox-gl@1.9.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}