31:T4db,canvas = { const canvas = context.canvas; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; while (true) { camera((state) => { //if (!state.dirty) return; regl.clear({ color: [0, 0, 0, 0], depth: 1 }); mapImageBuffer.use(() => { regl.clear({ color: colorToVector('steelblue'), depth: 1 }); mapCommand({ ...landMassBuffers, color: colorToVector('rgba(255, 255, 255, 1)') }); }); projectedMapCommand({ ...backgroundMesh, color: colorToVector('steelblue'), altitude: -1e-3, texture: mapImageBuffer.color[0], projectionTransition }); drawScreen({ trail: !(mutable paused) && leaveTrail !== false, visibleCountries: new Uint8Array(4) .fill(0) .map((_, i) => { const { value } = countries.find(({value}) => value === i) || {}; if (typeof value === 'number') { return Number(selectedCountries.indexOf(value.toString()) >= 0); } return 0; }) }); }); yield canvas; await Promises.tick(1000/60); } }32:T40b,drawScreen = ({ trail, visibleCountries }) => { const trailLength = trail ? 1 : Math.min(framesPerMonth / 110, 0.95); const backgroundTexture = screenTextures[0]; const screenTexture = screenTextures[1]; // draw the screen into a temporary framebuffer to retain it as the background on the next frame framebuffer({ color: screenTexture }); framebuffer.use(function () { drawTexture(backgroundTexture, { opacity: mutable paused ? 0 : trailLength }); drawPoints({ trail, visibleCountries }); //drawMap(); }); // enable blending to support drawing on top of an existing background (e.g. a map) projectedMapCommand({ ...backgroundMesh, color: colorToVector('rgba(0, 0, 255, .8)'), altitude: 0.0, texture: screenTexture, projectionTransition }); // save the current screen as the background for the next frame const temp = backgroundTexture; screenTextures[0] = screenTexture; screenTextures[1] = temp; }33:T4bb,pointsCommand = regl({ primitive: 'points', depth: { enable: false }, stencil: { enable: false }, frag: pointsFrag, vert: pointsVert, attributes: { a_points: { buffer: regl.prop('waypoints'), stride: 6 * 4, offset: 0 }, a_times: { buffer: regl.prop('waypoints'), stride: 6 * 4, offset: 4 * 4 }, a_type: regl.prop('types') }, uniforms: { u_max_distance: regl.prop('maxDistance'), u_size: regl.prop('size'), u_current_time: regl.prop('currentTime'), u_taxi: regl.prop('timeAtHarbour'), u_show_types: regl.prop('showTypes'), ...colors.reduce((o, color, i) => ({ ...o, [`u_colors[${i}]`]: colorToVector(color) }), {}) }, /* blend: { enable: true, func: { srcRGB: 'src color', srcAlpha: 1, dstRGB: 'one', dstAlpha: 1 }, }, */ /* uniforms: { u_scale: regl.prop('scale'), u_angle: regl.prop('angle'), u_translate: regl.prop('translate'), u_rotate: regl.prop('rotate'), u_size: regl.prop('size'), }, */ viewport: { width: framebuffer.width, height: framebuffer.height }, count: regl.prop('count'), })34:T5dc,pointsVert = ` precision highp float; attribute vec4 a_points; attribute vec2 a_times; attribute float a_type; uniform ivec4 u_show_types; uniform float u_current_time; uniform float u_size; uniform float u_taxi; uniform vec4 u_colors[4]; uniform float u_max_distance; uniform mat4 uProjectionView; varying vec4 v_color; ${requireGLSL([ 'intermediatePointOnChord', 'distanceBetween', 'directProjection' ])} void main(void) { v_color = u_colors[int(a_type)]; float embark = a_times[0]; float disembark = a_times[1]; vec2 from_lat_lon = vec2(a_points[0], a_points[1]); vec2 to_lat_lon = vec2(a_points[2], a_points[3]); float dist = distanceBetween(from_lat_lon, to_lat_lon) / 1000.0; bool shown = u_show_types[int(a_type)] == 1 && dist <= u_max_distance; if (shown && embark - u_taxi <= u_current_time && disembark + u_taxi >= u_current_time && v_color.a > 0.0) { float alt = 0.0; vec2 pos = vec2(0, 0); if (embark > u_current_time) { pos = from_lat_lon; } else if (disembark < u_current_time) { pos = to_lat_lon; } else { float time_travelled = u_current_time - embark; float travel_time = disembark - embark; float relative = time_travelled / travel_time; pos = intermediatePointOnChord(from_lat_lon, to_lat_lon, relative); } gl_PointSize = u_size; gl_Position = directProjection(vec2(pos[1], pos[0]), -alt); } else { // Don't show non active gl_Position = vec4(0, 0, 0, 0); } } `35:T5bb,currentFleetByCountry = ships .reduce((arr, ship) => { const item = arr.find(d => d.id === ship.nationality); const sailedOnYears = years .reduce((arr, year, i) => { const startOfYear = parseDate(parseDate(year).getUTCFullYear(), 0).getTime(); const nextYear = parseDate(parseDate(year).getUTCFullYear(), 12).getTime(); arr[i] = ship.voyages .filter(idx => { const [startDate, endDate] = voyages[idx].dateRange.map(d => d.getTime()); if (startDate <= startOfYear && endDate >= nextYear) { // Sailed whole year return true; } else if (startDate > startOfYear && startDate < nextYear) { // Started sailing that year return true; } else if (endDate > startOfYear && endDate < nextYear) { // Finished sailing that year return true; } return false; }) .length + arr[i]; return arr; }, new Uint32Array(years.length).fill(0)) if (item) { item.values = sailedOnYears.reduce((arr, val, i) => { arr[i] = val + item.values[i]; return arr; }, new Uint32Array(years.length).fill(0)); item.max = Math.max(...item.values); } else { arr.push({ id: ship.nationality, values: sailedOnYears, max: Math.max(...sailedOnYears) }); } return arr; }, new Array());36:T1c00,waypointData = { const harbourDistanceTolerance = 5e3; // Metres const maxDistanceBetweenLogEntries = 7.5e6; // Metres const speedRange = [0.05, 140]; // Kph const timeAtHarbour = 1000 * 60 * 60 * 24 * daysAtHarbour; if (this && this.dataLoaded === 1) { yield this; } else { const totalWaypointCount = Math.ceil(waypointsRaw.reduce((t, { waypoints }) => t + waypoints, 0) * 1.2); const dateRange = [ (parseDate(waypointsRaw[0].dates[0]).getTime()), parseDate(waypointsRaw[waypointsRaw.length - 1].dates[1]).getTime() ]; let currentDataChunk = 0; let count = 0; while (!voyagesRaw.length) { yield { dateRange, dataLoaded: 0 } } const waypointsArr = new Array(totalWaypointCount).fill(new Float32Array([0, 0, 0, 0, 0, 0])); const countryArr = new Uint8Array(totalWaypointCount).fill(0); const waypointsOnVoyage = new Array(voyagesRaw.length) .fill(0) .map(d => new Array()); const voyageDates = new Array(voyagesRaw.length) .fill(0) .map(d => new Float32Array(2).fill(0)); let waypoints = regl.buffer({ data: waypointsArr }); let types = regl.buffer({ data: countryArr }); const updateWaypointMetadata = ({ date, ship, voyageIndex }, index) => { // Calculate voyage date range const [dateStart, dateEnd] = voyageDates[voyageIndex]; if (!dateStart) { voyageDates[voyageIndex][0] = date; } else { voyageDates[voyageIndex][0] = Math.min(date, dateStart); } if (!dateEnd) { voyageDates[voyageIndex][1] = date; } else { voyageDates[voyageIndex][0] = Math.max(date, dateEnd); } // Add to voyage waypointsOnVoyage[voyageIndex].push(index); // Add country infromation const country = countries.find(({ id }) => id === ship.nationality); countryArr[index] = country ? country.value : 99; }; let previousWayPoints = {}; const addWaypoints = waypoints => { for (let i = 0; i < waypoints.length; i++) { const waypoint = waypoints[i]; const date = parseDate(waypoint.date).getTime(); const voyage = voyagesRaw[parseInt(waypoint.voyage)]; const lat = parseFloat(waypoint.lat); const lon = parseFloat(waypoint.lon); let ship; if (voyage) { ship = shipsRaw[voyage.ship]; } let dataForNextWaypoint = { date, lat, lon, voyage: waypoint.voyage }; if (voyage && typeof lat === 'number' && typeof lon === 'number') { const coords = [lat, lon]; if (previousWayPoints[voyage]) { const prev = previousWayPoints[voyage]; let prevCoords = [prev.lat, prev.lon]; if (typeof prevCoords[0] !== 'number' || typeof prevCoords[1] !== 'number') { prevCoords = [lat, lon]; } const distance = distanceBetweenCoords(prevCoords, coords); if (prev.voyage !== waypoint.voyage) { if (distance > harbourDistanceTolerance) { // If voyage is new, and at same harbour prevCoords = [lat, lon]; } // Don't stay too long at harbour if (date - prev.date > timeAtHarbour) { prev.date = date - timeAtHarbour; } } const kph = speedBetweenCoords( prevCoords, coords, prev.date, date ); // Always animate short movement (<5km) let animateMovement = distance < harbourDistanceTolerance; if (!animateMovement) { // Hide // - too long distance between logbook entries (>2000km) // - too slow (and fast) ships (errors in data) animateMovement = distance < maxDistanceBetweenLogEntries && kph > speedRange[0] && kph < speedRange[1]; } waypointsArr[count] = new Float32Array([ // Hide too slow (and fast) ships (errors in data) ...(animateMovement ? prevCoords : coords), ...coords, prev.date, date ]); } else { waypointsArr[count] = new Float32Array([ ...coords, ...coords, date - timeAtHarbour, date ]); } updateWaypointMetadata({ date, ship, voyageIndex: waypoint.voyage }, count); dataForNextWaypoint = { date, lat, lon, voyage: waypoint.voyage, index: count }; count++; if (count > totalWaypointCount) { console.log('Too many waypoints!'); } } // Save data for next waypoint previousWayPoints[ship] = dataForNextWaypoint; } }; yield { dateRange, count, waypointsOnVoyage, voyageDates, waypointsArr, waypoints, types, dataLoaded: 0 }; while (currentDataChunk < waypointsRaw.length) { addWaypoints(await unzipCSV(waypointsRaw[currentDataChunk].promise)); waypoints = waypoints({ data: waypointsArr }); types = types({ data: countryArr }); currentDataChunk++; yield { dateRange, count, waypointsOnVoyage, voyageDates, waypointsArr, waypoints, types, dataLoaded: currentDataChunk / (waypointsRaw.length + 1) }; if (currentDataChunk === 1) { // Give initial draw yield { dateRange, count, waypointsOnVoyage, voyageDates, waypointsArr, waypoints, types, dataLoaded: currentDataChunk / (waypointsRaw.length + 1), firstRender: true }; await Promises.delay(1); } await Promises.delay(1); } // Add harbour time to end of voyage Object.keys(previousWayPoints) .forEach(ship => { const { index, voyage, date, lat, lon } = previousWayPoints[ship]; // Is actual waypoint? if (typeof index === 'number') { waypointsArr[count] = new Float32Array([ ...[lat, lon], ...[lat, lon], date, date + timeAtHarbour ]); updateWaypointMetadata({ date, ship, voyageIndex: voyage }, count); count++; if (count > totalWaypointCount) { console.log('Too many waypoints!'); } } }); waypoints = waypoints({ data: waypointsArr }); types = types({ data: countryArr }); currentDataChunk++; yield { dateRange, count, waypointsOnVoyage, voyageDates, waypointsArr, waypoints, types, dataLoaded: 1, firstRender: true }; } };37:[{"id":"6cb672a18ddf954051c09006aaa3985ea4fdd33946977618fb862092baed492ed786c0afa3ac041784f5f4ac7b1da034ebd019c890df515d6aef2a36aae33430","href":"https://static.observableusercontent.com/files/6cb672a18ddf954051c09006aaa3985ea4fdd33946977618fb862092baed492ed786c0afa3ac041784f5f4ac7b1da034ebd019c890df515d6aef2a36aae33430","name":"ships.csv.gz","type":"application/gzip","lastModified":1587494883487.73,"size":10946},{"id":"dab27a177e59921d722cd76acb19f58632ab6c957e3d01d804e7d16d7ae9f003710a6de5655501149e0d973b7e4bc23ce0d21e7d843e2d2a09489bfa0396a3a0","href":"https://static.observableusercontent.com/files/dab27a177e59921d722cd76acb19f58632ab6c957e3d01d804e7d16d7ae9f003710a6de5655501149e0d973b7e4bc23ce0d21e7d843e2d2a09489bfa0396a3a0","name":"places.csv.gz","type":"application/gzip","lastModified":1587494896732.248,"size":12310},{"id":"5756557c746b24099ad5fcb434a921f0ef3e3f3968c6c90ede802bd2060fe1cb43d3f85d9f62573d6f8c70da03d3f3c08db917d093afd2595fe3db3b2dc3e0f3","href":"https://static.observableusercontent.com/files/5756557c746b24099ad5fcb434a921f0ef3e3f3968c6c90ede802bd2060fe1cb43d3f85d9f62573d6f8c70da03d3f3c08db917d093afd2595fe3db3b2dc3e0f3","name":"voyages.csv.gz","type":"application/gzip","lastModified":1587494917979.475,"size":47173},{"id":"7e5b87277d90a79d2917466f81351d8aedac09349e64ed6ad4ed0fb4671cc75cfa98f619f788b3b119a40b98b9d538ef22d35541ad5d75e222997e1152bc3dd6","href":"https://static.observableusercontent.com/files/7e5b87277d90a79d2917466f81351d8aedac09349e64ed6ad4ed0fb4671cc75cfa98f619f788b3b119a40b98b9d538ef22d35541ad5d75e222997e1152bc3dd6","name":"00-waypoints.csv.gz","type":"application/gzip","lastModified":1587494967773.237,"size":589338},{"id":"241adaf7d99150fc0899798924b2d2125a2ae52aafcde3fd71b529c06a51f693e06799dcbc54da70dc5632c3bc723e2b82191a7d2a468fabc0cbcdcadf5d698f","href":"https://static.observableusercontent.com/files/241adaf7d99150fc0899798924b2d2125a2ae52aafcde3fd71b529c06a51f693e06799dcbc54da70dc5632c3bc723e2b82191a7d2a468fabc0cbcdcadf5d698f","name":"01-waypoints.csv.gz","type":"application/gzip","lastModified":1587495034705.569,"size":585188},{"id":"2cbf8e0ffc8fb282355775e7746b2215f45f2872d5b9a58a4beedab261148ea57bce9aec9963f121f0d0f0c6d64190bf1524536eae8c316c2580fa56b50a3ebd","href":"https://static.observableusercontent.com/files/2cbf8e0ffc8fb282355775e7746b2215f45f2872d5b9a58a4beedab261148ea57bce9aec9963f121f0d0f0c6d64190bf1524536eae8c316c2580fa56b50a3ebd","name":"02-waypoints.csv.gz","type":"application/gzip","lastModified":1587495077418.883,"size":565077},{"id":"806d80270a7a0acaf82831b9f33a72dcaf4c75a06c53383a75c946a24b30eeff6ad9057e54266c077a77507769975f74b7f43ab5bc92d646776db0b9347350b8","href":"https://static.observableusercontent.com/files/806d80270a7a0acaf82831b9f33a72dcaf4c75a06c53383a75c946a24b30eeff6ad9057e54266c077a77507769975f74b7f43ab5bc92d646776db0b9347350b8","name":"03-waypoints.csv.gz","type":"application/gzip","lastModified":1587495124370.574,"size":613669},{"id":"0c65178101ed727fca9c0a9530e029dd8669009b2cb78ec1e37d092a562f13232641b9d483601a01e6458894e7638ae6619ab0be9d54e776202927b6238403c2","href":"https://static.observableusercontent.com/files/0c65178101ed727fca9c0a9530e029dd8669009b2cb78ec1e37d092a562f13232641b9d483601a01e6458894e7638ae6619ab0be9d54e776202927b6238403c2","name":"04-waypoints.csv.gz","type":"application/gzip","lastModified":1587495172682.63,"size":569045}] 2f:{"title":"European fleets on map, 1750-1850","cells":[{"id":0,"value":"md`# European fleets on map, 1750-1850\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`*Waypoint data loaded: ${(waypointData.dataLoaded).toLocaleString(locale, { style: 'percent' })}*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"legend = {\n const wrapper = DOM.element('div');\n wrapper.id = 'legend';\n \n countries.forEach(({ color, label }) => {\n const div = DOM.element('div');\n const colorTile = DOM.element('div');\n const title = DOM.element('span');\n colorTile.style.background = color;\n title.innerHTML = label;\n div.append(colorTile);\n div.append(title);\n \n wrapper.append(div);\n })\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"viewof playPause = {\n const value = 'Toggle play';\n const form = html`\n`;\n form.button.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n mutable paused = !(mutable paused);\n return false;\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"mainChart = { \n const title = 'Fleet by country (per year)';\n let date = x.domain()[1];\n const y = d3.scaleLinear()\n .range([chartConfig.height - chartConfig.margin.bottom, chartConfig.margin.top])\n .domain([0, d3.max(mainSeries.flatMap(({ data }) => data), d => d[1])]).nice()\n .clamp(true);\n \n const area = d3.area()\n .curve(d3.curveBasis)\n .x((_, i) => x(years[i]))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))\n .defined(d => typeof d[0] === 'number' && typeof d[1] === 'number');\n \n return createChart('main-chart', {\n ...chartConfig,\n title,\n series: mainSeries,\n path: ({ data }) => area(data),\n scale: { y, x },\n cursorInstructions: '',\n getStyle: ({ color }) => `fill: ${color}; stroke-width: 0; stroke: none`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## ${new Date(currentTime)\n .toLocaleDateString(\n locale,\n { year: 'numeric', month: 'short', day: 'numeric' }\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof selectedCountries = checkbox({\n title: 'Countries',\n description: \"Choose which countries' fleet to show on the map\",\n options: countries,\n value: countries.map(({ value }) => value)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof framesPerMonth = slider({\n title: 'Frames per month',\n description: 'Thirty frames per month equals roughly two months per second, 120 frames per month about two weeks per second.',\n min: 15,\n max: 120,\n step: 1,\n value: 90\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"viewof leaveTrail = checkbox({\n title: \"Trails\",\n description: \"Leave boat trails on the map\",\n options: [{ value: \"leaveTrail\", label: 'Leave please' }],\n value: [\"leaveTrail\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"viewof currentProjection = select({\n title: \"Choose map projection\",\n options: projectionOptions.filter(({ value }) => value < 2),\n value: this ? this.value : projectionOptions[1].value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"md`## About\nVoyages of the major European naval fleets between mid 18th and 19th centuries. This historical data has been gathered by the [CLIWOC](https://en.wikipedia.org/wiki/CLIWOC) research project, parsed from the logbook entries of the time period. Dataset contains also minor fleets which are not visualized here.\n\n#### Sources\nOriginal data can be found at the CLIWOC project [homepage](https://webs.ucm.es/info/cliwoc/).\n\nData used here is based on sanitized data created by [Steven Ottens](https://github.com/stvno). Description of that data can be found [here](https://stvno.github.io/page/cliwoc) and it's currently freely available in [geopackage](https://github.com/stvno/stvno.github.io/raw/master/page/cliwoc/CLIWOC21.gpkg) or [Open Office](https://github.com/stvno/stvno.github.io/raw/master/page/cliwoc/CLIWOC21.ods) formats.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"height = width * (9/16);","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"startYear = 1751","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"endYear = 1855","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"initialYear = 1778","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"daysAtHarbour = 14;","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"chartConfig = ({\n width,\n height: 150,\n path: () => '',\n scale: null,\n margin: { top: 5, right: 30, bottom: 30, left: 30 },\n axisConfig: {\n x: {\n tickFormat: date => new Date(date)\n .toLocaleDateString(\n locale,\n { year: 'numeric' }\n ),\n },\n y: {\n ticks: 2,\n tickFormat: value => value,\n }\n },\n getTooltip(d) {\n return new Date(d)\n .toLocaleDateString(\n locale,\n { year: 'numeric', month: 'short' }\n );\n },\n getStyle: () => `stroke: steelblue; stroke-width: 2; fill: none`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"colors = [\n ...countries.map(({ color }) => d3.color(color).copy({ opacity: 0.75 }))\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`## Regl`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"md`#### Context`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"context = {\n if (this) {\n return this;\n } else {\n const devicePixelRatio = window.devicePixelRatio || 1;\n let w = Math.floor(width * devicePixelRatio);\n let h = Math.floor(height * devicePixelRatio);\n \n const canvas = DOM.canvas(w, h);\n return canvas.getContext('webgl', { antialiasing: false });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"regl = {\n if (this) {\n return this;\n }\n return createREGL({\n gl: context,\n attributes: { preserveDrawingBuffer: false },\n extensions: ['oes_element_index_uint', 'ANGLE_instanced_arrays']\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`#### Helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"drawMap = () => {\n mapCommand({\n ...landMassBuffers,\n color: colorToVector('rgba(200, 200, 255, .5)')\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"drawPoints = ({ trail, visibleCountries }) => {\n pointsCommand({\n currentTime: mutable mutableCurrentTime,\n waypoints: waypointData.waypoints,\n maxDistance: 22000,\n types: waypointData.types,\n count: waypointData.count,\n size: trail ? Math.min(1 / width * 2500, 2.5) : Math.min(1 / width * 7500, 7.5),\n showTypes: visibleCountries,\n timeAtHarbour: 0\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"drawTexture = (texture, opts={}) => {\n screenCommand({\n texture,\n blend: false,\n quadBuffer,\n opacity: 1.0,\n ...opts\n });\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"md`#### Camera`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"camera = createReglCamera(regl, {\n center: [0, 0, 0],\n distance: 3,\n phi: 0,\n theta: 0,\n zoomAboutCursor: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"interactions = {\n let interactions;\n if (this) {\n interactions = this;\n } else {\n interactions = createInteractions(camera, { zoom: false });\n }\n let canInteract = projectionOptions.find(({ value }) => value === currentProjection).interactive;\n interactions.setInteractions({\n onMove: e => e.active = canInteract ? e.active : false\n });\n return interactions;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`#### Commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"screenCommand = regl({\n primitive: 'triangles',\n count: 6,\n \n viewport: {\n width: context.canvas.width,\n height: context.canvas.height\n },\n\n depth: {\n enable: false\n },\n stencil: {\n enable: false\n },\n \n vert: screenVert,\n frag: screenFrag,\n\n /*\n blend: {\n enable: regl.prop('blend'),\n func: {\n srcRGB: 'src alpha',\n srcAlpha: 1,\n dstRGB: 'one minus src alpha',\n dstAlpha: 1\n }\n },\n */\n blend: {\n enable: regl.prop('blend'),\n func: {\n srcRGB: 'one',\n srcAlpha: 1,\n dstRGB: 'one minus src alpha',\n dstAlpha: 1\n }\n },\n\n attributes: {\n a_pos: regl.prop('quadBuffer')\n },\n\n uniforms: {\n u_opacity: regl.prop('opacity'),\n u_screen: regl.prop('texture')\n },\n \n viewport: {\n width: framebuffer.width,\n height: framebuffer.height\n },\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`#### Store`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"framebuffer = regl.framebuffer({\n depthStencil: true,\n colorCount: 1,\n colorFormat: 'rgba',\n colorType: 'uint8',\n width: 3000,\n height: 3000\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"quadBuffer = regl.buffer(new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"screenTextures = {\n const { canvas } = context;\n const emptyPixels = new Uint8Array(3000 * 3000 * 4);\n return [\n // Screen textures to hold the drawn screen for the previous and the current frame\n regl.texture({\n data: emptyPixels, \n mag: 'nearest',\n min: 'nearest',\n width: 3000,\n height: 3000\n }),\n regl.texture({\n data: emptyPixels, \n mag: 'nearest',\n min: 'nearest',\n width: 3000,\n height: 3000\n })\n ]\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`#### GLSL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"pointsFrag = `\nprecision highp float;\n\nvarying vec4 v_color;\n\nvoid main(void) {\n gl_FragColor = v_color;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"screenVert = `\nprecision mediump float;\n\nattribute vec2 a_pos;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n v_tex_pos = a_pos;\n gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"screenFrag = `\nprecision highp float;\n\nuniform sampler2D u_screen;\nuniform float u_opacity;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n // a hack to guarantee opacity fade out even with a value close to 1.0\n gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`## Time handling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"years = {\n //const startYear = parseDate(waypointData.dateRange[0]).getUTCFullYear();\n //const endYear = parseDate(waypointData.dateRange[1]).getUTCFullYear() + 1;\n const startDate = parseDate(startYear, 0, 1);\n const d = new Float32Array(endYear - startYear)\n .fill(0)\n .map((d, i) => parseDate(startYear + i, 0, 1).getTime());\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"mutable paused = !doneLoading","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"{\n const props = {\n date: currentTime,\n dragStart() {\n mutable paused = true;\n },\n dragEnd() {\n mutable paused = true;\n },\n setDate(date) { mutable mutableCurrentTime = date; }\n };\n bindChart(mainChart, { ...props });\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"currentTime = {\n let currentTime = this || mutable mutableCurrentTime;\n while (true) {\n const lastTick = new Date().getTime();\n await Promises.delay(1000/60);\n if (!paused) {\n if (currentTime >= (years[years.length - 1] - 1)) {\n currentTime = years[0];\n }\n const daysPerSecond = 1 / framesPerMonth * 60;\n const tick = new Date().getTime() - lastTick;\n currentTime = currentTime + (tick * daysPerSecond / 1000) * 1000 * 60 * 60 * 24 * 30;\n mutable mutableCurrentTime = currentTime;\n yield currentTime;\n } else {\n if (currentTime !== mutable mutableCurrentTime) {\n currentTime = mutable mutableCurrentTime;\n yield currentTime;\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"mutable mutableCurrentTime = initialYear;","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"mainSeries = {\n const stack = d3.stack()\n .order(d3.stackOrderDescending)\n .keys(\n countries.map(({id}) => id)\n )(\n currentFleetByCountry\n .reduce((arr, { values, id }) => {\n values.forEach((value, index) => arr[index][id] = value);\n return arr;\n }, new Array(years.length).fill(0).map(() => ({})))\n );\n \n return countries\n .map(({ id, color }) => {\n return { id, color, data: stack.find(d => d.key === id) };\n })\n .filter(d => d.data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"countries = ['UK', 'NL', 'ES', 'FR']\n /*\n [\n ...shipsRaw\n .reduce((map, {nationality}) => map.set(nationality, nationality), new Map())\n .keys()\n ]\n */\n .map((id, i) => ({ value: i, id, label: getCountryName(id), color: colorScheme[i]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"ships = voyages\n .reduce((ships, { ship }, voyageIndex) => {\n const current = ships.find(({ id }) => id === ship);\n if (current) {\n current.voyages.push(voyageIndex);\n } else {\n const { id, name, nationality, type, company } = shipsRaw[ship];\n ships.push({ id, name, nationality, type, company, voyages: [voyageIndex] });\n }\n return ships;\n }, new Array());","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"voyages = waypointData.waypointsOnVoyage.reduce((voyages, waypoints, index) => {\n if (waypoints.length) {\n voyages.push({\n ...voyagesRaw[index],\n waypoints,\n dateRange: new Array(...waypointData.voyageDates[index]).map(d => parseDate(d))\n // years: years.map(year => waypoints.filter(key => )\n });\n }\n return voyages;\n}, new Array());","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"doneLoading = waypointData.dataLoaded === 1// || waypointData.firstRender","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Source data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"waypointsRaw = [\n {\n waypoints: 57453,\n dates: [\"1675-09-21\", \"1855-07-29\"],\n promise: FileAttachment(\"00-waypoints.csv.gz\")\n },\n {\n waypoints: 56489,\n dates: [\"1746-06-20\", \"1852-06-11\"],\n promise: FileAttachment(\"01-waypoints.csv.gz\")\n },\n {\n waypoints: 53689,\n dates: [\"1662-10-15\", \"1853-08-01\"],\n promise: FileAttachment(\"02-waypoints.csv.gz\")\n },\n {\n waypoints: 58402,\n dates: [\"1663-02-14\", \"1854-03-17\"],\n promise: FileAttachment(\"03-waypoints.csv.gz\")\n },\n {\n waypoints: 53967,\n dates: [\"1699-03-31\", \"1854-12-22\"],\n promise: FileAttachment(\"04-waypoints.csv.gz\")\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"voyagesRaw = unzipCSV(FileAttachment(\"voyages.csv.gz\"), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"shipsRaw = unzipCSV(FileAttachment(\"ships.csv.gz\"), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"placesRaw = unzipCSV(FileAttachment(\"places.csv.gz\"), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"locale = {\n if (window.navigator.languages) {\n return window.navigator.languages[0];\n } else {\n return window.navigator.userLanguage || window.navigator.language;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"x = d3.scaleLinear()\n .range([chartConfig.margin.left, width - chartConfig.margin.right])\n .domain([years[0], years[years.length - 1]])\n .clamp(true);","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"colorScheme = [\n d3.schemeTableau10[6],\n d3.schemeTableau10[1],\n d3.schemeTableau10[2],\n d3.schemeTableau10[4],\n ...d3.schemeTableau10.filter((d, i) => i > 4 && i !== 6)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"getCountryName = id => {\n if (id === 'UK') {\n return 'United Kingdom';\n }\n return countryNames.get(id);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"unzipCSV = (attachment, option) => attachment\n .arrayBuffer()\n .then(d => pako.ungzip(d, { to: 'string' }))\n .then(d => d3.csvParse(d, option));","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"parseDate = (...args) => {\n const date = new Date(...args);\n return new Date(Date.UTC(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n ));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"toDateString = d => {\n d.setUTCHours(0, 0, 0, 0);\n return d.toISOString().substring(0,10);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"distanceBetweenCoords = ([lat, lon], [toLat, toLon]) => {\n const r = d3.geoDistance([lon, lat], [toLon, toLat]);\n return r * 6371e3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"speedBetweenCoords = (startCoord, endCoords, startTime, endTime) => {\n const dist = distanceBetweenCoords(startCoord, endCoords) / 1000;\n const diffHours = (endTime - startTime) / 60 / 60 / 1000;\n return dist / diffHours;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"md`#### Own playground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"import {countryNames, countryContinents} from \"@lounjukk/map-data@3507\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"import {\n landMassBuffers,\n mapCommand,\n projections,\n colorToVector,\n projectionTransition,\n backgroundMesh,\n screenCommand as projectedMapCommand,\n framebuffer as mapImageBuffer,\n requireGLSL,\n createReglCamera,\n createInteractions,\n projectionOptions\n} with {\n regl,\n context,\n currentProjection,\n camera\n} from \"@lounjukk/regl-utils@2629\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"import { create as createChart, bindProps as bindChart } from '@lounjukk/date-slider-chart@543'","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"md`#### Actual libraries or such`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"import { checkbox, slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"createREGL = require(\"regl\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3-scale@3.2.1\", \"d3-shape@1.3.7\", \"d3-time-format@2.2.3\", \"d3-dsv@1.2.0\", \"d3-scale-chromatic@1.5.0\", \"d3-array@2.4.0\", \"d3-color@1.4.1\", \"d3-geo@1.12.0\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"pako = require(\"https://unpkg.com/pako@1.0.6/dist/pako.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}