2f:[{"id":"1729eced94f9363ebfb7482a51f0a773c66e3f1cbd1f14af975b0e054d26d0d648a51a151fc260a7a6b8a8e4f61ccc9da1cbdeba790d1637997f61374a077244","href":"https://static.observableusercontent.com/files/1729eced94f9363ebfb7482a51f0a773c66e3f1cbd1f14af975b0e054d26d0d648a51a151fc260a7a6b8a8e4f61ccc9da1cbdeba790d1637997f61374a077244","name":"solo-boat.json","type":"application/json","lastModified":1688993743438.129,"size":8957},{"id":"654f02a3e609322cd0333f9f3b0e9de044096625d1e0674e12bc9989868a81bf83a862557313233d427b364203d6636d5b408281d21caaeec587c49ee2d99c1b","href":"https://static.observableusercontent.com/files/654f02a3e609322cd0333f9f3b0e9de044096625d1e0674e12bc9989868a81bf83a862557313233d427b364203d6636d5b408281d21caaeec587c49ee2d99c1b","name":"output.json","type":"application/json","lastModified":1688996393056.66,"size":1524050}] 2d:{"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\nThanks to [@aendrew](https://observablehq.com/@aendrew) for the invaluable input.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mutable animPlace = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"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 const time = Math.round(loopLength * mutable animPlace);\n yield time;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"animControl = {\n var input = DOM.range(0, 1);\n input.value = mutable animPlace;\n input.oninput = () => mutable animPlace = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"htl.html`${dt}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapsContainer = html`

\n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"mutable dt = datefns.format( new Date( (currentTime * 1000) + (1670936515 * 1000)), 'dd-MM-yyyy HH:mm')","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":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: all_boats,\n ...layerConfig\n });\n\n deckGlJan23.setProps({ layers: [layer, iconLayer] });\n\n return layer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"ICON_MAPPING = {\n return {\n marker: {x: 0, y: 0, width: 128, height: 128, mask: true}\n }\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"iconLayer = new deck.IconLayer({\n id: 'icon-layer',\n data: [{}],\n pickable: true,\n // iconAtlas and iconMapping are required\n // getIcon: return a string\n iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',\n iconMapping: ICON_MAPPING,\n getIcon: d => 'marker',\n\n sizeScale: 5,\n getPosition: d => [1.271273,50.87034],\n getSize: d => 5,\n getColor: d => [140, 140, 0]\n });","pinned":true,"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.eyJ1IjoiY25uZGlnaXRhbCIsImEiOiJiYjIwMTgxNDZmNjgyODllMjAxYTYwOTAxYmY2MzI2MyJ9.8F6TQITXymFzCXy8tBqGgg',\n mapStyle: 'mapbox://sprites/mapbox/streets-v8',\n initialViewState: {\n latitude: 50.975746,\n longitude: 1.412314,\n zoom: 9,\n pitch: 0,\n bearing: 0,\n altitude: 1.5\n },\n controller: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"all_boats_raw = FileAttachment(\"output.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"all_boats = all_boats_raw.filter ( d => true )","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"palette_base = [\"#1f77b4\",\"#ff7f0e\",\"#2ca02c\",\"#d62728\",\"#9467bd\",\"#8c564b\",\"#e377c2\",\"#7f7f7f\",\"#bcbd22\",\"#17becf\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"palette = [...palette_base,...palette_base]","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"types = [...new Set( all_boats_raw.map( d => d.type ) )]","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"colors = R.compose(\n R.fromPairs,\n R.zip( types )\n)(palette.map( d => {\n let rgb = d3.color(d);\n return [rgb.r, rgb.g, rgb.b ]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"getColor = d => colors[d.type]","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"layerConfig = ({\n getPath: d => d.path,\n getTimestamps: d => d.timestamps,\n getColor: getColor,\n opacity: 0.9,\n widthMinPixels: 3,\n rounded: true,\n trailLength,\n currentTime\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"animationSpeed = 60 * 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"loopLength = 71841","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"trailLength = 60 * 5","pinned":true,"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":74,"value":"soloBoat = FileAttachment(\"solo-boat.json\").json()","pinned":true,"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"},{"id":163,"value":"R = import(\"https://cdn.skypack.dev/ramda\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"datefns = import(\"https://cdn.skypack.dev/date-fns\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}