31:T86e,md`You can make [waterlines in GIS (Geographic Information Systems) software](https://www.esri.com/arcgis-blog/products/analytics/analytics/water-lines-they-need-some-space/) and DataWrapper recently [added it as a feature](https://blog.datawrapper.de/locator-map-vignettes-buffer-water-lines/) - what about in JavaScript? A few people have had a go on Observable. These split into two approaches: - Using stroke width: redraw strokes of increasing width onto your coastline path - Drawing with SVG (Scalable Vector Graphics) - [@jgaffuri/coastal-margin-with-css-stroke-width](https://observablehq.com/@jgaffuri/coastal-margin-with-css-stroke-width) draws additional paths - [@lajoiemedia/svg-filter-wavelines](https://observablehq.com/@lajoiemedia/svg-filter-wavelines) uses SVG filters to 'dilate' the paths - Drawing with HTML Canvas - [@tomshanley/shorelines-and-labels](https://observablehq.com/@tomshanley/shorelines-and-labels) - [@awoodruff/canvas-cartography-nacis-2019](https://observablehq.com/@awoodruff/canvas-cartography-nacis-2019) - Creating new paths: create a new set of 'buffered' (offset) paths to draw - [@linard-y/chemin-decale-offset-paths](https://observablehq.com/@linard-y/chemin-decale-offset-paths) does this from first principles - [@rveciana/coastal-vignettes-with-jsts-d3js](https://observablehq.com/@rveciana/coastal-vignettes-with-jsts-d3js) uses the [jsts library](https://github.com/bjornharrtell/jsts) to do the buffering The stroke method is good if the waterlines are closely hugging the shore. If they stretch out larger distances from the shoreline, the lines can start to 'unravel' (I go into this further down in the notebook). The buffered paths method works well for this second case, *but* it can be slow to compute. In this notebook I compare the two approaches, drawing waterlines off geojson, and also show you where you can take the waterlines idea a little off-piste. A further alternative approach, though I don't trial it here, would be to use **distance fields** eg. [@mourner/fast-distance-transform](https://observablehq.com/@mourner/fast-distance-transform) `32:T1204,function draw_map_canvas_stroke( ///////////////////////////////////////////////// /// Optional parameters (with default values) /// ///////////////////////////////////////////////// geojson, // The geojson the waterlines will be drawn from size = 600, // Full square size of image stroke_number = 8, // Number of waterlines opacity_gradient = false, // Fading-out opacity towards the edges? stroke_gradient = false, // Water lines getting thinner towards the edges? colour_scale = false, // if true, use the rainbow colour scale. Otherwise draw 'colour' filled = false, // lines or fills? colour = "teal", // waterline colour stroke_thickness_const = 1, // constant stroke thickness if not on gradient ripple_extent = 40, // How wide the waterlines extend curve_this = d3.curveCatmullRomClosed, // The smoothing curve function used in the waterline path start = 2, // Number of pixels off the shoreline to start first waterline stroke_gradient_values = [1, 3], // if waterlines thickness on gradient - the min and max thicknesses spacing_exponent = 1 / 2 // Degree of skew of waterline spacing gradient ) { ///////////////////////// /// Set up projection /// ///////////////////////// let projection_canvas = d3 .geoMercator() .fitSize([size - ripple_extent, size - ripple_extent], geojson); // centre the map in the middle let projection_translate = projection_canvas.translate(); projection_canvas = projection_canvas.translate([ projection_translate[0] + ripple_extent / 2, projection_translate[1] + ripple_extent / 2 ]); //////////////////////////////////////////// /// Smooth the stroke path ///////////////// /// using D3's curve settings ////////////// /// otherwise the strokes will be spikes /// //////////////////////////////////////////// // code from @nbremer/simplified-curved-earth-map function curveContext(curve) { return { moveTo(x, y) { curve.lineStart(); curve.point(x, y); }, lineTo(x, y) { curve.point(x, y); }, closePath() { curve.lineEnd(); } }; } function geoCurvePath(curve, projection, context) { return object => { const pathContext = context === undefined ? d3.path() : context; d3.geoPath(projection_canvas, curveContext(curve(pathContext)))(object); return context === undefined ? pathContext + "" : undefined; }; } const context = DOM.context2d(size, size); const path_svg = geoCurvePath(curve_this)(geojson); let path = new Path2D(path_svg); const path_orig = d3.geoPath(projection_canvas, context); ///////////////////////// /// Define scales /////// ///////////////////////// const opacity = d3 .scalePow() .exponent(0.8) .domain([0, stroke_number]) .range([0, 1]); // this is to set the spacing between each waterline. It's called (perhaps confusingly) stroke_width because we're creating the waterlines by redrawing strokes of increasing width const stroke_width = d3 .scalePow() .exponent(spacing_exponent) .domain([0, stroke_number]) .range([ripple_extent, start]); // start = distance from the shoreline the waterlines start // this is to set the thickness of each waterline const stroke_thickness = d3 .scalePow() .exponent(3) .domain([0, stroke_number]) .range(stroke_gradient_values); ///////////////////////// /// Draw strokes /////// ///////////////////////// for (let i = 0; i <= stroke_number; i++) { // draw colour context.beginPath(); context.strokeStyle = colour_scale ? d3.interpolateSpectral(1 - i / stroke_number) : colour; context.globalAlpha = opacity_gradient ? opacity(i) : 1; context.lineWidth = stroke_gradient ? stroke_width(i) + stroke_thickness(i) : stroke_width(i) + stroke_thickness_const; context.stroke(path); if (!filled) { // clip out most of the stroke, so it becomes a line // Based on @awoodruff/canvas-cartography-nacis-2019#masking-clipping-and-compositing which has a good explanation of context.globalCompositeOperation context.globalAlpha = 1; context.beginPath(); context.lineWidth = stroke_width(i); context.globalCompositeOperation = 'destination-out'; // clipping context.stroke(path); context.globalCompositeOperation = 'source-over'; } } // draw the original (unsmoothed) geojson over the top context.beginPath(); path_orig(geojson); context.lineWidth = 2; context.fillStyle = colour; context.fill(); return context.canvas; }33:T6ea,scilly_clipped2 = { const url = (x, y, z) => scillyTiles_mapping[`${z}-${x}-${y}.png`]; let projection = d3 .geoMercator() .fitSize( [ scilly_width - scilly_ripple_extent, scilly_width - scilly_ripple_extent ], scilly ); let projection_translate = projection.translate(); projection = projection.translate([ projection_translate[0] + scilly_ripple_extent / 2, projection_translate[1] + scilly_ripple_extent / 2 ]); const tile = d3 .tile() .size([width, 1000]) .scale(projection.scale() * 2 * Math.PI) .translate(projection([0, 0])) .zoomDelta(2), // use zoom delta to increase the resolution https://observablehq.com/@d3/tile-zoomdelta tiles = tile(); let wrapper = html`

`; let svg = d3.select(DOM.svg(width, 1000)); // position SVG over Canvas element svg .style('position', 'absolute') .style('top', 0) .style('left', 0); // define defs let defs = svg.append('defs'); let path = d3.geoPath().projection(projection); defs .append('path') .attr('id', 'land_cumulative') .attr('d', path(scilly)); defs .append('clipPath') .attr('id', 'clip') .append('use') .attr('xlink:href', location + '#land_cumulative'); svg .selectAll('image') .data(tiles) .join('image') .attr('xlink:href', d => url(d[0], d[1], d[2])) .attr('x', d => Math.round((d[0] + tiles.translate[0]) * tiles.scale)) .attr('y', d => Math.round((d[1] + tiles.translate[1]) * tiles.scale)) .attr('width', tiles.scale) .attr('height', tiles.scale) .attr('clip-path', 'url(' + location + '#clip)'); wrapper.appendChild(scilly_canvas_waterlines); wrapper.appendChild(svg.node()); return wrapper; }34:T183d,// from http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8 curveTypes = [ { name: 'curveLinear', curve: d3.curveLinear, active: true, lineString: '', clear: false, info: 'Interpolates the points using linear segments.' }, { name: 'curveBasis', curve: d3.curveBasis, active: true, lineString: '', clear: true, info: 'Interpolates the start and end points and approximates the inner points using a B-spline.' }, { name: 'curveBasisClosed', curve: d3.curveBasisClosed, active: false, lineString: '', clear: false, info: 'Uses a closed B-Spline to approximate the points.' }, { name: 'curveBundle (ß=0)', curve: d3.curveBundle.beta(0), active: false, lineString: '', clear: true, info: 'Same as curveBasis with the addition of a paramter ß which determines how close to a straight line the curve is. If ß=0 the curve is straight.' }, { name: 'curveBundle (ß=0.5)', curve: d3.curveBundle.beta(0.5), active: false, lineString: '', clear: false, info: 'Same as curveBasis with the addition of a paramter ß which determines how close to a straight line the curve is.' }, { name: 'curveBundle (ß=1)', curve: d3.curveBundle.beta(1), active: false, lineString: '', clear: false, info: 'Same as curveBasis with the addition of a paramter ß which determines how close to a straight line the curve is. If ß=1 the curve is the same as curveBasis.' }, { name: 'curveCardinal (tension=0)', curve: d3.curveCardinal.tension(0), active: false, lineString: '', clear: true, info: "Interpolates the points using a cubic B-spline. A tension parameter determines how 'taut' the curve is. As tension approaches 1 the segments become linear." }, { name: 'curveCardinal (tension=0.5)', curve: d3.curveCardinal.tension(0.5), active: false, lineString: '', clear: false, info: "Interpolates the points using a cubic B-spline. A tension parameter determines how 'taut' the curve is. As tension approaches 1 the segments become linear." }, { name: 'curveCardinal (tension=1)', curve: d3.curveCardinal.tension(1), active: false, lineString: '', clear: false, info: "Interpolates the points using a cubic B-spline. A tension parameter determines how 'taut' the curve is. As tension approaches 1 the segments become linear." }, { name: 'curveCatmullRom (α=0)', curve: d3.curveCatmullRom.alpha(0), active: false, lineString: '', clear: true, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=0 the parameterisation is uniform.' }, { name: 'curveCatmullRom (α=0.5)', curve: d3.curveCatmullRom.alpha(0.5), active: false, lineString: '', clear: false, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=0.5 the parameterisation is centripetal and self intersecting loops are avoided.' }, { name: 'curveCatmullRom (α=1)', curve: d3.curveCatmullRom.alpha(1), active: false, lineString: '', clear: false, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=1 the parameterisation is chordal.' }, { name: 'curveCatmullRomClosed (α=0)', curve: d3.curveCatmullRomClosed.alpha(0), active: false, lineString: '', clear: false, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=0.5 the parameterisation is centripetal and self intersecting loops are avoided.' }, { name: 'curveCatmullRomClosed (α=0.5)', curve: d3.curveCatmullRomClosed.alpha(0.5), active: false, lineString: '', clear: false, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=0.5 the parameterisation is centripetal and self intersecting loops are avoided.' }, { name: 'curveCatmullRomClosed (α=1)', curve: d3.curveCatmullRomClosed.alpha(1), active: false, lineString: '', clear: false, info: 'Similar to curveCardinal (tension=0) but with a parameter α that determines the parameterisation used to interpolate the points. If α=1 the parameterisation is chordal.' }, { name: 'curveMonotoneX', curve: d3.curveMonotoneX, active: false, lineString: '', clear: true, info: 'Interpolates the points with a cubic spline which are monotonic (i.e. always increasing or always decreasing) in y.' }, { name: 'curveMonotoneY', curve: d3.curveMonotoneY, active: false, lineString: '', clear: false, info: 'Interpolates the points with a cubic spline which are monotonic (i.e. always increasing or always decreasing) in x.' }, { name: 'curveNatural', curve: d3.curveNatural, active: false, lineString: '', clear: true, info: 'Interpolates the points with a cubic spline with zero 2nd derivatives at the endpoints.' }, { name: 'curveStep', curve: d3.curveStep, active: false, lineString: '', clear: true, info: 'Interpolates the points with alternating horizontal and vertical linear segments. The vertical segments lie midway between points.' }, { name: 'curveStepAfter', curve: d3.curveStepAfter, active: false, lineString: '', clear: false, info: 'Interpolates the points with alternating horizontal and vertical linear segments. The y value changes after the x value.' }, { name: 'curveStepBefore', curve: d3.curveStepBefore, active: false, lineString: '', clear: false, info: 'Interpolates the points with alternating horizontal and vertical linear segments. The y value changes before the x value.' } ]35:T4ba,function draw_map( geojson_buffered_polygons, opacity_gradient = false, stroke_gradient = false, colour = 'teal', stroke_gradient_range = [1.4, 0.3], size = 600 ) { const geoGenerator = d3 .geoPath() .projection( d3 .geoMercator() .fitSize( [width, size], geojson_buffered_polygons[geojson_buffered_polygons.length - 1] ) ); const opacity = d3 .scalePow() .exponent(3) .domain([0, geojson_buffered_polygons.length - 1]) .range([1, 0.1]); const stroke_width = d3 .scalePow() .exponent(3) .domain([0, geojson_buffered_polygons.length - 1]) .range(stroke_gradient_range); //0.6, 0.1 const svg = d3 .select(DOM.svg(width, size)) .style("width", "100%") .style("height", "auto"); svg .selectAll('path.waterLines') .data(geojson_buffered_polygons) .enter() .append('path') .attr("d", geoGenerator) .attr("class", "waterLines") .style('fill', 'none') .style("stroke", colour) .style("stroke-width", (d, i) => (stroke_gradient ? stroke_width(i) : 1)) .style("stroke-opacity", (d, i) => (opacity_gradient ? opacity(i) : 1)); return svg.node(); }36:T570,function draw_map_world( geojson_buffered_polygons, opacity_gradient = false, stroke_gradient = false ) { let projection = d3 .geoTransverseMercator() .fitSize( [600, 600], geojson_buffered_polygons[geojson_buffered_polygons.length - 1] ); // use projection.rotate to move the land masses into the centre projection = projection.rotate([0, -75, 0]); const geoGenerator = d3.geoPath().projection(projection); const opacity = d3 .scalePow() .exponent(3) .domain([0, geojson_buffered_polygons.length - 1]) .range([1, 0.1]); const stroke_width = d3 .scalePow() .exponent(3) .domain([0, geojson_buffered_polygons.length - 1]) .range([1, 0.1]); const svg = d3 .select(DOM.svg(600, 600)) .style("width", "100%") .style("height", "auto") .style('background', 'lightslategray'); svg .selectAll('path.waterLines') .data(geojson_buffered_polygons) .enter() .append('path') .attr("d", geoGenerator) .attr("class", "waterLines") .style('fill', 'none') .style("stroke", 'white') .attr( 'stroke-dasharray', (d, i) => (geojson_buffered_polygons.length - i) * 4 + "," + 2 * i ) .style("stroke-width", (d, i) => (stroke_gradient ? stroke_width(i) : 1)) .style("stroke-opacity", (d, i) => (opacity_gradient ? opacity(i) : 1)); return svg.node(); }37:T1074,scilly_tile_fileAttachments = [ FileAttachment("14-7906-5565.png"), FileAttachment("14-7907-5566.png"), FileAttachment("14-7908-5565.png"), FileAttachment("14-7898-5566.png"), FileAttachment("14-7907-5565.png"), FileAttachment("14-7905-5565.png"), FileAttachment("14-7908-5564.png"), FileAttachment("14-7906-5566.png"), FileAttachment("14-7908-5566.png"), FileAttachment("14-7908-5562.png"), FileAttachment("14-7898-5561.png"), FileAttachment("14-7908-5563.png"), FileAttachment("14-7898-5557.png"), FileAttachment("14-7905-5566.png"), FileAttachment("14-7898-5558.png"), FileAttachment("14-7907-5564.png"), FileAttachment("14-7898-5560.png"), FileAttachment("14-7899-5558.png"), FileAttachment("14-7900-5557.png"), FileAttachment("14-7904-5566.png"), FileAttachment("14-7899-5557.png"), FileAttachment("14-7898-5559.png"), FileAttachment("14-7908-5557.png"), FileAttachment("14-7901-5557.png"), FileAttachment("14-7903-5566.png"), FileAttachment("14-7907-5563.png"), FileAttachment("14-7904-5565.png"), FileAttachment("14-7906-5564.png"), FileAttachment("14-7907-5557.png"), FileAttachment("14-7908-5561.png"), FileAttachment("14-7899-5561.png"), FileAttachment("14-7902-5566.png"), FileAttachment("14-7900-5558.png"), FileAttachment("14-7899-5559.png"), FileAttachment("14-7898-5562.png"), FileAttachment("14-7899-5562.png"), FileAttachment("14-7899-5560.png"), FileAttachment("14-7900-5566.png"), FileAttachment("14-7903-5565.png"), FileAttachment("14-7905-5564.png"), FileAttachment("14-7899-5566.png"), FileAttachment("14-7901-5558.png"), FileAttachment("14-7902-5557.png"), FileAttachment("14-7907-5562.png"), FileAttachment("14-7901-5566.png"), FileAttachment("14-7902-5565.png"), FileAttachment("14-7898-5564.png"), FileAttachment("14-7908-5558.png"), FileAttachment("14-7903-5557.png"), FileAttachment("14-7906-5557.png"), FileAttachment("14-7899-5564.png"), FileAttachment("14-7906-5563.png"), FileAttachment("14-7903-5563.png"), FileAttachment("14-7900-5562.png"), FileAttachment("14-7901-5562.png"), FileAttachment("14-7902-5562.png"), FileAttachment("14-7900-5563.png"), FileAttachment("14-7907-5561.png"), FileAttachment("14-7908-5560.png"), FileAttachment("14-7908-5559.png"), FileAttachment("14-7904-5564.png"), FileAttachment("14-7898-5565.png"), FileAttachment("14-7902-5558.png"), FileAttachment("14-7904-5557.png"), FileAttachment("14-7905-5557.png"), FileAttachment("14-7907-5558.png"), FileAttachment("14-7905-5563.png"), FileAttachment("14-7901-5564.png"), FileAttachment("14-7901-5565.png"), FileAttachment("14-7904-5563.png"), FileAttachment("14-7898-5563.png"), FileAttachment("14-7899-5563.png"), FileAttachment("14-7900-5559.png"), FileAttachment("14-7902-5563.png"), FileAttachment("14-7899-5565.png"), FileAttachment("14-7900-5564.png"), FileAttachment("14-7901-5563.png"), FileAttachment("14-7905-5562.png"), FileAttachment("14-7906-5561.png"), FileAttachment("14-7900-5561.png"), FileAttachment("14-7904-5561.png"), FileAttachment("14-7903-5561.png"), FileAttachment("14-7905-5561.png"), FileAttachment("14-7906-5560.png"), FileAttachment("14-7907-5560.png"), FileAttachment("14-7905-5560.png"), FileAttachment("14-7903-5562.png"), FileAttachment("14-7900-5560.png"), FileAttachment("14-7900-5565.png"), FileAttachment("14-7906-5558.png"), FileAttachment("14-7906-5559.png"), FileAttachment("14-7901-5560.png"), FileAttachment("14-7902-5561.png"), FileAttachment("14-7904-5562.png"), FileAttachment("14-7905-5559.png"), FileAttachment("14-7903-5564.png"), FileAttachment("14-7907-5559.png"), FileAttachment("14-7906-5562.png"), FileAttachment("14-7904-5560.png"), FileAttachment("14-7902-5564.png"), FileAttachment("14-7904-5558.png"), FileAttachment("14-7902-5560.png"), FileAttachment("14-7901-5559.png"), FileAttachment("14-7905-5558.png"), FileAttachment("14-7903-5558.png"), FileAttachment("14-7902-5559.png"), FileAttachment("14-7903-5560.png"), FileAttachment("14-7903-5559.png"), FileAttachment("14-7904-5559.png"), FileAttachment("14-7901-5561.png") ]38:[{"id":"9bc6b6d85564772c2b87bdb29a6cbdcdeecc7e608b8b3c84af4c69983b4646b6d595c4a963056bde1532f10f18a773d4bf77c3bc03deb03b85424bd887e52e52","href":"https://static.observableusercontent.com/files/9bc6b6d85564772c2b87bdb29a6cbdcdeecc7e608b8b3c84af4c69983b4646b6d595c4a963056bde1532f10f18a773d4bf77c3bc03deb03b85424bd887e52e52","name":"14-7905-5559.png","type":"image/png","lastModified":1613312101610.475,"size":65307},{"id":"e25857c94e1dff4b5e824e6fd0ada90b8eb5c92f01e43e4db61bf99b68231639a359c2e4bab48a1cfd90c264548862923d1e53117b4c39c075b2a0d21f6dbecb","href":"https://static.observableusercontent.com/files/e25857c94e1dff4b5e824e6fd0ada90b8eb5c92f01e43e4db61bf99b68231639a359c2e4bab48a1cfd90c264548862923d1e53117b4c39c075b2a0d21f6dbecb","name":"14-7901-5559.png","type":"image/png","lastModified":1613312101630.854,"size":64670},{"id":"8f06955cf27b1564cd699b46620eef32426afacc2ccb75cba9c2ecb3e962d709ecd081e93ead24b3247201c078389f9038aa6b352a04c74dd0509b4a53435b8c","href":"https://static.observableusercontent.com/files/8f06955cf27b1564cd699b46620eef32426afacc2ccb75cba9c2ecb3e962d709ecd081e93ead24b3247201c078389f9038aa6b352a04c74dd0509b4a53435b8c","name":"14-7906-5561.png","type":"image/png","lastModified":1613312098475.373,"size":65009},{"id":"b435bfb11e7fb9723d24ef9e374910cb0ba63032c959a75794e5238278b7f457fe69004a8b11a1356627ae05a8e5c5a566013fd6374c1f964eef13361592a21a","href":"https://static.observableusercontent.com/files/b435bfb11e7fb9723d24ef9e374910cb0ba63032c959a75794e5238278b7f457fe69004a8b11a1356627ae05a8e5c5a566013fd6374c1f964eef13361592a21a","name":"14-7899-5565.png","type":"image/png","lastModified":1613312098306.469,"size":65041},{"id":"285971ac24f11148b23baa314ff2faeea7c36e5b7ff8c5b492e491ae9baa4acf35bdbfc7e9f7acc1fbe25d17e01ef3e43f902b4c547fbc081a74ac9793682e8f","href":"https://static.observableusercontent.com/files/285971ac24f11148b23baa314ff2faeea7c36e5b7ff8c5b492e491ae9baa4acf35bdbfc7e9f7acc1fbe25d17e01ef3e43f902b4c547fbc081a74ac9793682e8f","name":"14-7903-5559.png","type":"image/png","lastModified":1613312101914.324,"size":65535},{"id":"c9de6069b00f4196cc5e491e65224a18eef6609965654853cd70ee039d7fae7065161e0366a086acae349d24935708907c7368ee04bc331a649299c613c20eb5","href":"https://static.observableusercontent.com/files/c9de6069b00f4196cc5e491e65224a18eef6609965654853cd70ee039d7fae7065161e0366a086acae349d24935708907c7368ee04bc331a649299c613c20eb5","name":"Screenshot 2021-01-25 at 11.30.44@1.png","type":"image/png","lastModified":1611574696798.92,"size":416428},{"id":"b74590fec3a30dcfa079a63b15e2691568e0a633c83c368bb4ac99809ea98f7b0549d5d7ffdd43c9b280132b24d1db4f77e0c4f071c3bc2279d9c3e643abc3b1","href":"https://static.observableusercontent.com/files/b74590fec3a30dcfa079a63b15e2691568e0a633c83c368bb4ac99809ea98f7b0549d5d7ffdd43c9b280132b24d1db4f77e0c4f071c3bc2279d9c3e643abc3b1","name":"1 (1).json","type":"application/json","lastModified":1611531965522.457,"size":206917},{"id":"5e6b49ca5b5ffbba2785ba6376b9a0abc999e24f014061e2c8ce8fa3a8a623026d5772b7f9a5410d901d9fb93ebef1f53961c42014b4614dd72e3af737d0d08e","href":"https://static.observableusercontent.com/files/5e6b49ca5b5ffbba2785ba6376b9a0abc999e24f014061e2c8ce8fa3a8a623026d5772b7f9a5410d901d9fb93ebef1f53961c42014b4614dd72e3af737d0d08e","name":"Screenshot 2021-01-25 at 23.53.11 copy@1.png","type":"image/png","lastModified":1611618943846.588,"size":677327},{"id":"af71923c00cff32b51965887bfc7b039bce4e17d386f2aa70ee1b89a026a6fcdb01625074a30ceb52461c27ad12aa1bbd513ea5d09161410af4c98579388474b","href":"https://static.observableusercontent.com/files/af71923c00cff32b51965887bfc7b039bce4e17d386f2aa70ee1b89a026a6fcdb01625074a30ceb52461c27ad12aa1bbd513ea5d09161410af4c98579388474b","name":"Orkney.json","type":"application/json","lastModified":1611663657554.921,"size":401001},{"id":"10c660e43ef8ca74974a82379daa657e192c11ce53caff2f9b8b1528af321243d833c587b0183b93e3a452d8a25a0687c36bae261da31780a0af6b76d31f0e2f","href":"https://static.observableusercontent.com/files/10c660e43ef8ca74974a82379daa657e192c11ce53caff2f9b8b1528af321243d833c587b0183b93e3a452d8a25a0687c36bae261da31780a0af6b76d31f0e2f","name":"custom.json","type":"application/json","lastModified":1611664604873.467,"size":106890},{"id":"2fab4231ead64242313fba7c4e9d9d5a756b4136fc57f37d56dd7c96908623cadce25cb14a42995b48ffa4fe17f7e30fbe19ea09e1af00e6ebcde83727db3c19","href":"https://static.observableusercontent.com/files/2fab4231ead64242313fba7c4e9d9d5a756b4136fc57f37d56dd7c96908623cadce25cb14a42995b48ffa4fe17f7e30fbe19ea09e1af00e6ebcde83727db3c19","name":"14-7898-5560.png","type":"image/png","lastModified":1613312082759.381,"size":44320},{"id":"4ef74ca2e7ea533847b6c1c7c22ec03d0695a07ca9f68b1fc61e91b6550a9e12ca6cd8f0d8aa4681b9a72f59f2e7ac9a23a45bade855f66e8e5d9505e1fef6b4","href":"https://static.observableusercontent.com/files/4ef74ca2e7ea533847b6c1c7c22ec03d0695a07ca9f68b1fc61e91b6550a9e12ca6cd8f0d8aa4681b9a72f59f2e7ac9a23a45bade855f66e8e5d9505e1fef6b4","name":"14-7905-5566.png","type":"image/png","lastModified":1613312081405.965,"size":46152},{"id":"dcb19453d1fbada3d7a0449e0ab6e4e6f917d5e6bb41253fc3ac7f4c6c167172043c48eb3a64ffe5f4de1372710869b497e1770d6eb7735779d6a815f2a908ee","href":"https://static.observableusercontent.com/files/dcb19453d1fbada3d7a0449e0ab6e4e6f917d5e6bb41253fc3ac7f4c6c167172043c48eb3a64ffe5f4de1372710869b497e1770d6eb7735779d6a815f2a908ee","name":"14-7898-5557.png","type":"image/png","lastModified":1613312081107.948,"size":43346},{"id":"dbd77a6960bb810bc9d540ceb231a56b322d544c38de7ad0f6fe372e7ac9907489a6b3731174aad36e3e4d8612ff8bc8dc39c254731ab3f629fa12ebf99c2ac6","href":"https://static.observableusercontent.com/files/dbd77a6960bb810bc9d540ceb231a56b322d544c38de7ad0f6fe372e7ac9907489a6b3731174aad36e3e4d8612ff8bc8dc39c254731ab3f629fa12ebf99c2ac6","name":"14-7906-5558.png","type":"image/png","lastModified":1613312101591.162,"size":64393},{"id":"3e304bff76807cf30ab5387663ae95cfaf9d2b295713eed39cb029fcd852032e173caa899c527cafacc2e9e6ac50ca8eb71f1b98551b1406de93f16091a13a74","href":"https://static.observableusercontent.com/files/3e304bff76807cf30ab5387663ae95cfaf9d2b295713eed39cb029fcd852032e173caa899c527cafacc2e9e6ac50ca8eb71f1b98551b1406de93f16091a13a74","name":"14-7904-5558.png","type":"image/png","lastModified":1613312101627.785,"size":66100},{"id":"fa66ec967e04c1f52db660fa86934035090940dcb1ae199dcda4fb4b1b933081f36a9ab42c8b87b065d2b2606be131585151b951083ac5c02c22ed5173d7ffb5","href":"https://static.observableusercontent.com/files/fa66ec967e04c1f52db660fa86934035090940dcb1ae199dcda4fb4b1b933081f36a9ab42c8b87b065d2b2606be131585151b951083ac5c02c22ed5173d7ffb5","name":"14-7901-5564.png","type":"image/png","lastModified":1613312098086.309,"size":64680},{"id":"277a87ff7a9600b2e8be517c617306d80718032da380c12a9dab0319cbae1b7852cc77ea582711f3749a43ad4c3f243a92e5e9d385581d5369eecdc95178f58f","href":"https://static.observableusercontent.com/files/277a87ff7a9600b2e8be517c617306d80718032da380c12a9dab0319cbae1b7852cc77ea582711f3749a43ad4c3f243a92e5e9d385581d5369eecdc95178f58f","name":"14-7900-5562.png","type":"image/png","lastModified":1613312096744.453,"size":61195},{"id":"82f96e46ee12cb317986bff7bbc2d680cf8c9702efa5c00bdefca243598a79c5f128f719e4e9c4d80ad957247c667141651d8ca9b509a10d1283efecb35fb832","href":"https://static.observableusercontent.com/files/82f96e46ee12cb317986bff7bbc2d680cf8c9702efa5c00bdefca243598a79c5f128f719e4e9c4d80ad957247c667141651d8ca9b509a10d1283efecb35fb832","name":"14-7898-5559.png","type":"image/png","lastModified":1613312084145.976,"size":43934},{"id":"0d25d89c10892b59564f29e308628c622a44cafd6a93bc6856f11801010c6018b0ebf8178ab83503597c1e29afd2e212c70c6790e7dea17823b4fdbd64c9abaf","href":"https://static.observableusercontent.com/files/0d25d89c10892b59564f29e308628c622a44cafd6a93bc6856f11801010c6018b0ebf8178ab83503597c1e29afd2e212c70c6790e7dea17823b4fdbd64c9abaf","name":"14-7899-5557.png","type":"image/png","lastModified":1613312083851.498,"size":45135},{"id":"f917a6c82e9868037bf2ec809dce5593bd14761ad7d15da25e9c8c4b39ce7973d392ef7208aed90e58397d565fbe78c54cc736e1696ae94b7ecd5d7d294eb7e1","href":"https://static.observableusercontent.com/files/f917a6c82e9868037bf2ec809dce5593bd14761ad7d15da25e9c8c4b39ce7973d392ef7208aed90e58397d565fbe78c54cc736e1696ae94b7ecd5d7d294eb7e1","name":"buffered_lines.jpg","type":"image/jpeg","lastModified":1612976232622.701,"size":337356},{"id":"ef864bb436024ee7470b2610c924250eb23945a1d9db6fa998d2b295016553d4651a9666d143011e2696ee6041c06fd28ab9fde217484c9b421fed5151a5d568","href":"https://static.observableusercontent.com/files/ef864bb436024ee7470b2610c924250eb23945a1d9db6fa998d2b295016553d4651a9666d143011e2696ee6041c06fd28ab9fde217484c9b421fed5151a5d568","name":"14-7899-5566.png","type":"image/png","lastModified":1613312093836.432,"size":60798},{"id":"8fde9305b4430b5f12225fb345f36afe9568e5c1989440bb09b82ac25650c8804a7030337cb9b615490375053d85eb38eae67e80574ddedfe13b7735b22f9c8a","href":"https://static.observableusercontent.com/files/8fde9305b4430b5f12225fb345f36afe9568e5c1989440bb09b82ac25650c8804a7030337cb9b615490375053d85eb38eae67e80574ddedfe13b7735b22f9c8a","name":"14-7901-5558.png","type":"image/png","lastModified":1613312093893.022,"size":57381},{"id":"aece77168cd243c384f6cb1aca425e37f6c97c747e8ace58b82813cdac6f949d70a49bfe65880765059394b84f1141bb0ede0721d32f6fd3de16d7a6053200db","href":"https://static.observableusercontent.com/files/aece77168cd243c384f6cb1aca425e37f6c97c747e8ace58b82813cdac6f949d70a49bfe65880765059394b84f1141bb0ede0721d32f6fd3de16d7a6053200db","name":"world_visualizations.png","type":"image/png","lastModified":1613422527722.711,"size":55781},{"id":"51c4276747b05e251e5519583fb21b96fd4848fcdd5404914e4e2926e34555a851e43e148c0511b96fd42d44790764b1d2afb0b4ffc77cf99bc49530ed2d7366","href":"https://static.observableusercontent.com/files/51c4276747b05e251e5519583fb21b96fd4848fcdd5404914e4e2926e34555a851e43e148c0511b96fd42d44790764b1d2afb0b4ffc77cf99bc49530ed2d7366","name":"14-7904-5560.png","type":"image/png","lastModified":1613312101621.941,"size":65476},{"id":"7ee61c3ad8ce16f76ac0060efbcd1a48dc53b41e7e5d0cd09b78124a361273adb4f510fe11184bed92fd3938a89b26e26583624ec7d47b882b24dfaa571b71c4","href":"https://static.observableusercontent.com/files/7ee61c3ad8ce16f76ac0060efbcd1a48dc53b41e7e5d0cd09b78124a361273adb4f510fe11184bed92fd3938a89b26e26583624ec7d47b882b24dfaa571b71c4","name":"14-7900-5564.png","type":"image/png","lastModified":1613312098308.295,"size":63139},{"id":"ec0c1e64a70e3ab56809fab3e44653982e698b70792f86fe1346cabc06ca03c8540ed7c7046cdbf79d0e8bcdd30cfe66bcaeb95e66af4a897f162db5a4236f88","href":"https://static.observableusercontent.com/files/ec0c1e64a70e3ab56809fab3e44653982e698b70792f86fe1346cabc06ca03c8540ed7c7046cdbf79d0e8bcdd30cfe66bcaeb95e66af4a897f162db5a4236f88","name":"14-7900-5561.png","type":"image/png","lastModified":1613312098577.192,"size":63268},{"id":"cf09b090976ec623575197b75445874194cb163a42c690b54bd153ce3b4d44f90081a3507dbf9b4c73dfa41c016077d57ea3001aa6d2d98ffc31b2083d06183b","href":"https://static.observableusercontent.com/files/cf09b090976ec623575197b75445874194cb163a42c690b54bd153ce3b4d44f90081a3507dbf9b4c73dfa41c016077d57ea3001aa6d2d98ffc31b2083d06183b","name":"14-7903-5561.png","type":"image/png","lastModified":1613312098759.579,"size":64744},{"id":"0faa9d8da0b3258c324eec02d854cf105bf415ea2dc19d623093048b645a6b098bfa78316a0c4c5a8f25e00933156f142d6501e36f9e50750e45c00a3adeb285","href":"https://static.observableusercontent.com/files/0faa9d8da0b3258c324eec02d854cf105bf415ea2dc19d623093048b645a6b098bfa78316a0c4c5a8f25e00933156f142d6501e36f9e50750e45c00a3adeb285","name":"14-7905-5560.png","type":"image/png","lastModified":1613312098821.178,"size":64431},{"id":"b8336ecd51a9128eed0589dafc642804b12de199a71a2ce6a2291714235e1920127f9a4e0731769dbf5697dc75454eb0e74d037affbb75c2f8b75cc85e68b311","href":"https://static.observableusercontent.com/files/b8336ecd51a9128eed0589dafc642804b12de199a71a2ce6a2291714235e1920127f9a4e0731769dbf5697dc75454eb0e74d037affbb75c2f8b75cc85e68b311","name":"14-7905-5558.png","type":"image/png","lastModified":1613312101653.186,"size":65718},{"id":"53c57b69b8eb7b8b76924bb848ad6b298357cbee8435a0f4b08da3c01341546b96c90d7a5448fa49d98537cab53db1782909905f94863bff265c7681ad828bb3","href":"https://static.observableusercontent.com/files/53c57b69b8eb7b8b76924bb848ad6b298357cbee8435a0f4b08da3c01341546b96c90d7a5448fa49d98537cab53db1782909905f94863bff265c7681ad828bb3","name":"14-7903-5558.png","type":"image/png","lastModified":1613312101654.2,"size":65424},{"id":"ef8403d0a1b8190bc131afa1fd6d5b0373ed1d3fd349afdc2774b51d5b21b5054306cb175d459ddf1f6d3625875ae50614fbf17f9ce2a66a3d701b772cb7115e","href":"https://static.observableusercontent.com/files/ef8403d0a1b8190bc131afa1fd6d5b0373ed1d3fd349afdc2774b51d5b21b5054306cb175d459ddf1f6d3625875ae50614fbf17f9ce2a66a3d701b772cb7115e","name":"14-7908-5562.png","type":"image/png","lastModified":1613312078693.065,"size":43222},{"id":"7855007c009bd8740e20956015f34be0a1e9b94cf581e74d046f775ac5b05e2ca4cf671b335ab6ef99e456f944af66b047c9b66a780c4c16321dfc5fef050c03","href":"https://static.observableusercontent.com/files/7855007c009bd8740e20956015f34be0a1e9b94cf581e74d046f775ac5b05e2ca4cf671b335ab6ef99e456f944af66b047c9b66a780c4c16321dfc5fef050c03","name":"14-7908-5566.png","type":"image/png","lastModified":1613312077815.964,"size":43649},{"id":"83c5785cda5e534c104e91f7464ac578c622968b3724e92f5cfda9da2891d9ccc84cc2fecd3ca7b0f3e1c6a47f794b232e4605b1646e55a833724d197d331726","href":"https://static.observableusercontent.com/files/83c5785cda5e534c104e91f7464ac578c622968b3724e92f5cfda9da2891d9ccc84cc2fecd3ca7b0f3e1c6a47f794b232e4605b1646e55a833724d197d331726","name":"14-7906-5566.png","type":"image/png","lastModified":1613312077470.066,"size":45288},{"id":"9fd737dfb72042b3c28a8cd543b19fa0be615e36de6eca559e36c828716fde05c600e8eeada50814173a678c125d96c6b39830ecc350eaa913aa166bff0132b7","href":"https://static.observableusercontent.com/files/9fd737dfb72042b3c28a8cd543b19fa0be615e36de6eca559e36c828716fde05c600e8eeada50814173a678c125d96c6b39830ecc350eaa913aa166bff0132b7","name":"14-7900-5559.png","type":"image/png","lastModified":1613312098212.56,"size":60250},{"id":"af1963ba8c4147132f948cf7401671a0642cd5036098d461df8f3d0a67baa6e4aaab71a6cc96be9262f5d9ee70337ee58a68db91b71f21247e7e4814065498dd","href":"https://static.observableusercontent.com/files/af1963ba8c4147132f948cf7401671a0642cd5036098d461df8f3d0a67baa6e4aaab71a6cc96be9262f5d9ee70337ee58a68db91b71f21247e7e4814065498dd","name":"14-7902-5563.png","type":"image/png","lastModified":1613312098213.625,"size":63664},{"id":"e6c2f40a944ae1071757c00b00073833cb4a4bd92f6e33a5f6831e446c73b3102f18fd778f7d2859dc6cf36717864c1255703e9d6d24fb9dedf26e3cd8a35636","href":"https://static.observableusercontent.com/files/e6c2f40a944ae1071757c00b00073833cb4a4bd92f6e33a5f6831e446c73b3102f18fd778f7d2859dc6cf36717864c1255703e9d6d24fb9dedf26e3cd8a35636","name":"14-7901-5565.png","type":"image/png","lastModified":1613312098088.36,"size":65414},{"id":"8533e08611f1f49e01b8959db055751ec0b6a529fdeeca69b81e5162a4129ce6a254e538ecca2566a4b072cb95279e3bf1f971b0438ea21fbc41fe0ea7bac647","href":"https://static.observableusercontent.com/files/8533e08611f1f49e01b8959db055751ec0b6a529fdeeca69b81e5162a4129ce6a254e538ecca2566a4b072cb95279e3bf1f971b0438ea21fbc41fe0ea7bac647","name":"14-7905-5563.png","type":"image/png","lastModified":1613312098073.058,"size":63824},{"id":"887bd82cffc8b3b606d0f3de8cb9d0858b28169e2acf2693270adde1fe5b4213cdc624203e199757e87bef3fd8b9c86e90ed8659de17dde70033b6da2b27e2e6","href":"https://static.observableusercontent.com/files/887bd82cffc8b3b606d0f3de8cb9d0858b28169e2acf2693270adde1fe5b4213cdc624203e199757e87bef3fd8b9c86e90ed8659de17dde70033b6da2b27e2e6","name":"14-7905-5557.png","type":"image/png","lastModified":1613312097954.763,"size":60835},{"id":"57bf53d6af3938eab44d2c27484e6ebf50b8a9774de3e2dbb720b72f0d524820f611e35eff4c67a7bd7fc618b05e2630c32080d95852bbf45d8ee379269169fd","href":"https://static.observableusercontent.com/files/57bf53d6af3938eab44d2c27484e6ebf50b8a9774de3e2dbb720b72f0d524820f611e35eff4c67a7bd7fc618b05e2630c32080d95852bbf45d8ee379269169fd","name":"14-7904-5557.png","type":"image/png","lastModified":1613312097938.337,"size":60638},{"id":"726f1d1776e0d7c6427ced6c1ffb01fc17205776912a1047b6c191afcedd306ff89003b5a431d46d40422bff20619100a4d26345fc844c4164f3d4b8072d7ed3","href":"https://static.observableusercontent.com/files/726f1d1776e0d7c6427ced6c1ffb01fc17205776912a1047b6c191afcedd306ff89003b5a431d46d40422bff20619100a4d26345fc844c4164f3d4b8072d7ed3","name":"14-7906-5563.png","type":"image/png","lastModified":1613312096576.601,"size":60279},{"id":"ce2ce2f06bdaf40f860d8996d3108dadc48e02a2cf1343b315226e314cd0fa0c2277b1b456af915105b5128667a04603b89080aea20c7fcfa78a02672a624db5","href":"https://static.observableusercontent.com/files/ce2ce2f06bdaf40f860d8996d3108dadc48e02a2cf1343b315226e314cd0fa0c2277b1b456af915105b5128667a04603b89080aea20c7fcfa78a02672a624db5","name":"14-7902-5565.png","type":"image/png","lastModified":1613312095830.342,"size":63683},{"id":"dfaeca535c6e8647141d5dd1369935ce80062fc8d3ea7adb5a749bdc0cc62b6f524518f2b3c581c9493fbe377b420cd8041fe7ff98f3b6b85fe58a0ba63d6f3d","href":"https://static.observableusercontent.com/files/dfaeca535c6e8647141d5dd1369935ce80062fc8d3ea7adb5a749bdc0cc62b6f524518f2b3c581c9493fbe377b420cd8041fe7ff98f3b6b85fe58a0ba63d6f3d","name":"14-7900-5557.png","type":"image/png","lastModified":1613312083836.262,"size":44186},{"id":"fdac5eedcc70f331c21eb228d200a77682b3b0cc9b7fc764a0300017a0f21033b141b55e2ce24bcdc31d4570c3ca3db424cd7ba5ab0fde42dd89e83ddeff0867","href":"https://static.observableusercontent.com/files/fdac5eedcc70f331c21eb228d200a77682b3b0cc9b7fc764a0300017a0f21033b141b55e2ce24bcdc31d4570c3ca3db424cd7ba5ab0fde42dd89e83ddeff0867","name":"14-7907-5564.png","type":"image/png","lastModified":1613312081407.83,"size":44275},{"id":"0556ff7d2d1571151680956e4b8d83bc7fae3706d265db65409f748716931307cb033d88d0ec5910788bc1beb4d3432e5aa25b8354fd8ec0558189b2c590d327","href":"https://static.observableusercontent.com/files/0556ff7d2d1571151680956e4b8d83bc7fae3706d265db65409f748716931307cb033d88d0ec5910788bc1beb4d3432e5aa25b8354fd8ec0558189b2c590d327","name":"14-7908-5563.png","type":"image/png","lastModified":1613312079162.447,"size":42679},{"id":"f67c159f1f3d379efe82e6e2b391b3415bd46cfc8067ff60e8b54d2e8e5bee2b11e6305fe32b78755f5ca4fec7d68f336561ac3338a39b256f729190cd88250a","href":"https://static.observableusercontent.com/files/f67c159f1f3d379efe82e6e2b391b3415bd46cfc8067ff60e8b54d2e8e5bee2b11e6305fe32b78755f5ca4fec7d68f336561ac3338a39b256f729190cd88250a","name":"14-7902-5561.png","type":"image/png","lastModified":1613312101611.786,"size":65964},{"id":"be2069a8de8491ac1aad52417eb4133b74681e0c2a45d9793188a9918178fc88e055ef9808da80f1d0913cecf10578d764405ac23e3f8d6f70a45fdcbafc9938","href":"https://static.observableusercontent.com/files/be2069a8de8491ac1aad52417eb4133b74681e0c2a45d9793188a9918178fc88e055ef9808da80f1d0913cecf10578d764405ac23e3f8d6f70a45fdcbafc9938","name":"14-7902-5558.png","type":"image/png","lastModified":1613312097864.412,"size":62797},{"id":"737b181adc36913cda6e3dffff8705c64ad936fdbf8fb82235a0c2df8d8f3fcb63a66f8187c7b183d1bf554e3c45273ce4afc02f844f1d04295acc370a52d465","href":"https://static.observableusercontent.com/files/737b181adc36913cda6e3dffff8705c64ad936fdbf8fb82235a0c2df8d8f3fcb63a66f8187c7b183d1bf554e3c45273ce4afc02f844f1d04295acc370a52d465","name":"14-7901-5566.png","type":"image/png","lastModified":1613312095857.768,"size":60683},{"id":"d910c9d1589e9d55fe5337639fb75fe650ac55640f3665327c1cec83904e666a0111a74c7541a2b3d120099d77a0b25a5fe070ee44af43640604c545d26b688e","href":"https://static.observableusercontent.com/files/d910c9d1589e9d55fe5337639fb75fe650ac55640f3665327c1cec83904e666a0111a74c7541a2b3d120099d77a0b25a5fe070ee44af43640604c545d26b688e","name":"14-7903-5565.png","type":"image/png","lastModified":1613312093659.413,"size":59422},{"id":"134a98614ae6360fb9871a8ea24f76fbb123201d2f8f889cae1708679d078b3a885c77b036fd0b7cd26c8078c1b534e74fc96b17978becba6abbc275f02a3e0e","href":"https://static.observableusercontent.com/files/134a98614ae6360fb9871a8ea24f76fbb123201d2f8f889cae1708679d078b3a885c77b036fd0b7cd26c8078c1b534e74fc96b17978becba6abbc275f02a3e0e","name":"14-7900-5566.png","type":"image/png","lastModified":1613312093571.916,"size":60600},{"id":"2fc2223d71e7cec080a216509de4f8c20d25e79b463dde912c8be1c22a74773353dfb242793cfa03fa5d8c3996ae42fdd7da89f5f1e5e3ff2895945d250d9779","href":"https://static.observableusercontent.com/files/2fc2223d71e7cec080a216509de4f8c20d25e79b463dde912c8be1c22a74773353dfb242793cfa03fa5d8c3996ae42fdd7da89f5f1e5e3ff2895945d250d9779","name":"14-7899-5560.png","type":"image/png","lastModified":1613312093193.919,"size":57301},{"id":"f916146b46187aafff9670e5c71b03c9756645dbd182b74958712ba3f07f767ac3d02263b765d084433812e6a5dd9faad9b89191ea45b75123150883fb6b7952","href":"https://static.observableusercontent.com/files/f916146b46187aafff9670e5c71b03c9756645dbd182b74958712ba3f07f767ac3d02263b765d084433812e6a5dd9faad9b89191ea45b75123150883fb6b7952","name":"14-7898-5562.png","type":"image/png","lastModified":1613312092453.463,"size":54968},{"id":"88008a0662f20585592e951552386b297b8a99bef03c0cdafe7f5e0c1fae674349e209f7a3f5527c45631b2a8c3b710cf2e6edc0d3988fdba603761eca060464","href":"https://static.observableusercontent.com/files/88008a0662f20585592e951552386b297b8a99bef03c0cdafe7f5e0c1fae674349e209f7a3f5527c45631b2a8c3b710cf2e6edc0d3988fdba603761eca060464","name":"14-7904-5565.png","type":"image/png","lastModified":1613312088345.709,"size":57151},{"id":"9fcae1751cbb15f4ece38c1534493f35aaf3e7b641c3bac960c51a283f239c938abdab346e9f66fc908e71f6f5f5d69242168f258bf4fdaf2f69be8a67a6741b","href":"https://static.observableusercontent.com/files/9fcae1751cbb15f4ece38c1534493f35aaf3e7b641c3bac960c51a283f239c938abdab346e9f66fc908e71f6f5f5d69242168f258bf4fdaf2f69be8a67a6741b","name":"14-7904-5566.png","type":"image/png","lastModified":1613312083849.184,"size":46933},{"id":"713adfb325e3224f88eb2453f93fe15200ee4cf39fa29267307e506fefe8b1a1992ce92b96d544e662f3f0101668647772b36e52f95d05f30a28406a3aa2cb75","href":"https://static.observableusercontent.com/files/713adfb325e3224f88eb2453f93fe15200ee4cf39fa29267307e506fefe8b1a1992ce92b96d544e662f3f0101668647772b36e52f95d05f30a28406a3aa2cb75","name":"14-7898-5558.png","type":"image/png","lastModified":1613312081406.124,"size":43235},{"id":"b2ba11c86cda682b0e70bbfb20c935f2811728d89142ac737100966e3ce82697c6504e55b38975dbba21afae370d97540d3dcadb62763028a9acef3638e30c65","href":"https://static.observableusercontent.com/files/b2ba11c86cda682b0e70bbfb20c935f2811728d89142ac737100966e3ce82697c6504e55b38975dbba21afae370d97540d3dcadb62763028a9acef3638e30c65","name":"14-7898-5565.png","type":"image/png","lastModified":1613312097794.133,"size":64535},{"id":"962b457bf77d62b7ba993296abf279283da8b980ae785b34e7b0f5b9feaadbe231789cb2119c6963746b475491e1f683e8f8e425889d9fa959e2fb51da2127dc","href":"https://static.observableusercontent.com/files/962b457bf77d62b7ba993296abf279283da8b980ae785b34e7b0f5b9feaadbe231789cb2119c6963746b475491e1f683e8f8e425889d9fa959e2fb51da2127dc","name":"14-7904-5564.png","type":"image/png","lastModified":1613312097742.399,"size":63281},{"id":"48c6fbb96615af67a34c429508c00a63338761c92b59f261ac350244e20264428cf650d128c969e601aa19de5ab69fb8440a7947b0a12a9cf341b6aefc82087c","href":"https://static.observableusercontent.com/files/48c6fbb96615af67a34c429508c00a63338761c92b59f261ac350244e20264428cf650d128c969e601aa19de5ab69fb8440a7947b0a12a9cf341b6aefc82087c","name":"14-7908-5559.png","type":"image/png","lastModified":1613312097524.898,"size":62644},{"id":"227c869726cfee7e5201a3ddff61fa8dc610b4d2fab60b003ad1001d91383aab0a2041cae06fbbf11a32096bd8599b20bce097327a703e4c27f46fb589659495","href":"https://static.observableusercontent.com/files/227c869726cfee7e5201a3ddff61fa8dc610b4d2fab60b003ad1001d91383aab0a2041cae06fbbf11a32096bd8599b20bce097327a703e4c27f46fb589659495","name":"14-7908-5560.png","type":"image/png","lastModified":1613312097255.804,"size":61711},{"id":"9a89b50f2ff241842f2657db1f127f81d23d63798ace6b1d915f646cfa72edfe73b8b8419c7aa45ecae07e4d189c9996ffc2c183d25957f5bea5cd3a73bbd373","href":"https://static.observableusercontent.com/files/9a89b50f2ff241842f2657db1f127f81d23d63798ace6b1d915f646cfa72edfe73b8b8419c7aa45ecae07e4d189c9996ffc2c183d25957f5bea5cd3a73bbd373","name":"14-7907-5561.png","type":"image/png","lastModified":1613312097116.889,"size":60675},{"id":"1092689cf4ea5203369cf7bf1ab9269df02a830d351f84585f438bd643a44e28ea34e2e58ecb3e6505a726aef64fbbc7e66170ce808a6fb829ea9aea0e757b3a","href":"https://static.observableusercontent.com/files/1092689cf4ea5203369cf7bf1ab9269df02a830d351f84585f438bd643a44e28ea34e2e58ecb3e6505a726aef64fbbc7e66170ce808a6fb829ea9aea0e757b3a","name":"14-7900-5563.png","type":"image/png","lastModified":1613312096942.324,"size":62387},{"id":"bedeab976424ea06608e6f85d799f21bdf8f9f4b6bc7de3590a84a5aec3f1eab773e839ebc3c24992bd1f898ba4f85ec937432f2abfcb0378bdfbff03d434366","href":"https://static.observableusercontent.com/files/bedeab976424ea06608e6f85d799f21bdf8f9f4b6bc7de3590a84a5aec3f1eab773e839ebc3c24992bd1f898ba4f85ec937432f2abfcb0378bdfbff03d434366","name":"14-7901-5562.png","type":"image/png","lastModified":1613312096848.03,"size":62924},{"id":"464efa174db3250353c92d4a512a621efa395f768c5f4427e38270bedca2e98db2f067b2a3389b8df393dcea63c0fb38c0ebc9f8b8308863d5f0f10ae461c222","href":"https://static.observableusercontent.com/files/464efa174db3250353c92d4a512a621efa395f768c5f4427e38270bedca2e98db2f067b2a3389b8df393dcea63c0fb38c0ebc9f8b8308863d5f0f10ae461c222","name":"14-7902-5562.png","type":"image/png","lastModified":1613312096847.272,"size":62087},{"id":"ec861b36708855f6ba91b226a12f6010f199815d295fbba800cea4b04795fb4c94d73c7cacb2d22306a40f2293d5d2ce1f8ad97411bde0851ed1563fb1bc29f9","href":"https://static.observableusercontent.com/files/ec861b36708855f6ba91b226a12f6010f199815d295fbba800cea4b04795fb4c94d73c7cacb2d22306a40f2293d5d2ce1f8ad97411bde0851ed1563fb1bc29f9","name":"14-7903-5563.png","type":"image/png","lastModified":1613312096727.332,"size":62681},{"id":"fe39f1644ddc055fef6a83ccc306235721eefd4582526e3a7408983aa900a992a2bec5bbc5701e2507e1d2669eb433dad47eaf37761d801c63b2d70d5e080e72","href":"https://static.observableusercontent.com/files/fe39f1644ddc055fef6a83ccc306235721eefd4582526e3a7408983aa900a992a2bec5bbc5701e2507e1d2669eb433dad47eaf37761d801c63b2d70d5e080e72","name":"14-7899-5564.png","type":"image/png","lastModified":1613312096500.673,"size":62874},{"id":"a2d93cef0954a623cabc0097626565e73841ee81fb0e88beda07007cd846d6760a0e33ccb6d88450540b96908a03e651e90e6984eba74146a7a5e44af2302f10","href":"https://static.observableusercontent.com/files/a2d93cef0954a623cabc0097626565e73841ee81fb0e88beda07007cd846d6760a0e33ccb6d88450540b96908a03e651e90e6984eba74146a7a5e44af2302f10","name":"14-7906-5557.png","type":"image/png","lastModified":1613312096393.069,"size":60135},{"id":"25f3a0eea869a4a4dc99a362331485d697f4b663b3ef2be0bb924c24af359f964a69d3f340f3149ff1b552d19c9cf1a36cd7d0ede9646b71c7068afaab4b238f","href":"https://static.observableusercontent.com/files/25f3a0eea869a4a4dc99a362331485d697f4b663b3ef2be0bb924c24af359f964a69d3f340f3149ff1b552d19c9cf1a36cd7d0ede9646b71c7068afaab4b238f","name":"14-7903-5557.png","type":"image/png","lastModified":1613312096326.27,"size":60027},{"id":"ea165a8df9b88c55ce8ab02abc566402060a78250a108da0a76b461585b9a6ec6bd747e4860cd33c25dec3273c3bf1adf50e6cd543b700eb8bfb2270d2eb3963","href":"https://static.observableusercontent.com/files/ea165a8df9b88c55ce8ab02abc566402060a78250a108da0a76b461585b9a6ec6bd747e4860cd33c25dec3273c3bf1adf50e6cd543b700eb8bfb2270d2eb3963","name":"14-7908-5558.png","type":"image/png","lastModified":1613312096065.663,"size":59469},{"id":"8db5560756943cdf647b3d3c319a1c98fd2d6395e40ebc1c0c9837c89b5d2d2be2578cf4c42246a9c1dc72125855c36143dfb07f8852d5c908148a1605ed82ea","href":"https://static.observableusercontent.com/files/8db5560756943cdf647b3d3c319a1c98fd2d6395e40ebc1c0c9837c89b5d2d2be2578cf4c42246a9c1dc72125855c36143dfb07f8852d5c908148a1605ed82ea","name":"14-7898-5564.png","type":"image/png","lastModified":1613312095984.695,"size":61770},{"id":"900ec2f44cf3d7baf5a9783bb92d6828bc2f48b9e499fe34a3e1c39f3ce1874b8c071e6a80c27c4e7a4467696a0e14f21bb7fa8a4c9eb39a7a5476b172bec7ff","href":"https://static.observableusercontent.com/files/900ec2f44cf3d7baf5a9783bb92d6828bc2f48b9e499fe34a3e1c39f3ce1874b8c071e6a80c27c4e7a4467696a0e14f21bb7fa8a4c9eb39a7a5476b172bec7ff","name":"14-7906-5562.png","type":"image/png","lastModified":1613312101614.648,"size":65376},{"id":"5e7337a074e65354787c0375012a8416b1637d29257c823b701670f1f88da6230e38760264c9c258ed17b2a5c341f37a5bb5cc7a477e96f2131526add1e861b3","href":"https://static.observableusercontent.com/files/5e7337a074e65354787c0375012a8416b1637d29257c823b701670f1f88da6230e38760264c9c258ed17b2a5c341f37a5bb5cc7a477e96f2131526add1e861b3","name":"14-7907-5558.png","type":"image/png","lastModified":1613312098004.127,"size":61568},{"id":"063fca211094d6fd93d48b62d7c628453f7df3968e050b84f42b624b1ba3671f84c7f09daa820c53a93e048b1423feecd79723179298079a5243568db698f28f","href":"https://static.observableusercontent.com/files/063fca211094d6fd93d48b62d7c628453f7df3968e050b84f42b624b1ba3671f84c7f09daa820c53a93e048b1423feecd79723179298079a5243568db698f28f","name":"14-7901-5560.png","type":"image/png","lastModified":1613312101611.27,"size":65922},{"id":"044f08942c167137ccf25f8cf8046dfd0f229cd8eb32a5c09d50f1c4b1b2d8c2a33d5e8dbb7f569c4bfe0b6b49810ba04511414b6f77a26905c86415e8c46297","href":"https://static.observableusercontent.com/files/044f08942c167137ccf25f8cf8046dfd0f229cd8eb32a5c09d50f1c4b1b2d8c2a33d5e8dbb7f569c4bfe0b6b49810ba04511414b6f77a26905c86415e8c46297","name":"14-7899-5563.png","type":"image/png","lastModified":1613312098113.197,"size":63342},{"id":"054634ba3159d63f478a57c6d4930b76d28e3763fcc56a84f93d195ae78d0087da1092ec8d42cf7fa9a734d1ff0c450489e544f6e99f88197d55c15f250508a9","href":"https://static.observableusercontent.com/files/054634ba3159d63f478a57c6d4930b76d28e3763fcc56a84f93d195ae78d0087da1092ec8d42cf7fa9a734d1ff0c450489e544f6e99f88197d55c15f250508a9","name":"14-7906-5559.png","type":"image/png","lastModified":1613312101590.75,"size":64768},{"id":"53f9dabbfbcf5da5986e7bee2dae82d2669622e3c44033c95292af606e2e9e32695540a0718076d195385a01aeeb23380f11a042f0523dec570604dae8a4fdaf","href":"https://static.observableusercontent.com/files/53f9dabbfbcf5da5986e7bee2dae82d2669622e3c44033c95292af606e2e9e32695540a0718076d195385a01aeeb23380f11a042f0523dec570604dae8a4fdaf","name":"14-7903-5564.png","type":"image/png","lastModified":1613312101618.88,"size":65478},{"id":"fe2f17bcd206eddb1b4cd9a2853e1a7a5e235e02dba5ed3248e0a181959c9378fa3f6115166cc983fef4b7a947f0a232052959d1320fedbf2253567d8a9a075a","href":"https://static.observableusercontent.com/files/fe2f17bcd206eddb1b4cd9a2853e1a7a5e235e02dba5ed3248e0a181959c9378fa3f6115166cc983fef4b7a947f0a232052959d1320fedbf2253567d8a9a075a","name":"14-7904-5563.png","type":"image/png","lastModified":1613312098102.864,"size":64867},{"id":"b721c5f6d9ff54640122dd6336f24c1836a20cc117947f450b5460a375189afc2179f90a7d8594b98cc1c38ae47e0ae002a5b7104898fc1398b560ca8e4104d6","href":"https://static.observableusercontent.com/files/b721c5f6d9ff54640122dd6336f24c1836a20cc117947f450b5460a375189afc2179f90a7d8594b98cc1c38ae47e0ae002a5b7104898fc1398b560ca8e4104d6","name":"14-7900-5565.png","type":"image/png","lastModified":1613312101590.625,"size":66020},{"id":"a82e567a54f209b2b6b4a7f37a336bee75af2f0a27d09b8dcb237f542829d6072ab77825c215deb36fefa6e69abaa22128b5e09c053137b8640accbf141d3180","href":"https://static.observableusercontent.com/files/a82e567a54f209b2b6b4a7f37a336bee75af2f0a27d09b8dcb237f542829d6072ab77825c215deb36fefa6e69abaa22128b5e09c053137b8640accbf141d3180","name":"14-7898-5563.png","type":"image/png","lastModified":1613312098112.312,"size":63627},{"id":"8e5790511ead351525f91b82395461cf249ca64419567a225c43a4f9692fab3b2c573f7f768a10b996611615c54228a635113c2f51b52a042a218f4543f27237","href":"https://static.observableusercontent.com/files/8e5790511ead351525f91b82395461cf249ca64419567a225c43a4f9692fab3b2c573f7f768a10b996611615c54228a635113c2f51b52a042a218f4543f27237","name":"14-7901-5563.png","type":"image/png","lastModified":1613312098454.111,"size":65135},{"id":"c52a476fbb45c695e0a7d5df017f85f040e156db61a6a67e1ed35509ac8325c424a90bfadb26947bdf432d124e72019acfb2e878f3e64e97c6340a12d4466a57","href":"https://static.observableusercontent.com/files/c52a476fbb45c695e0a7d5df017f85f040e156db61a6a67e1ed35509ac8325c424a90bfadb26947bdf432d124e72019acfb2e878f3e64e97c6340a12d4466a57","name":"14-7905-5562.png","type":"image/png","lastModified":1613312098474.983,"size":64162},{"id":"3d94d3285129c19e4c4c18e6a4a79b50771f0660249d644c4814d7c77b99cf5d57fd9f395dd9187eee20e43e77299d8c8f2662b575cca357f08a040f58467907","href":"https://static.observableusercontent.com/files/3d94d3285129c19e4c4c18e6a4a79b50771f0660249d644c4814d7c77b99cf5d57fd9f395dd9187eee20e43e77299d8c8f2662b575cca357f08a040f58467907","name":"14-7904-5562.png","type":"image/png","lastModified":1613312101612.31,"size":65488},{"id":"4039593c965244b36465d33b781848e87aa5f064b1fd2a23dd65fb9ab43539637251d063f3a507023a6d8c0b348dc5a2bd61f42cfcc3ceeac3b905ad39e18908","href":"https://static.observableusercontent.com/files/4039593c965244b36465d33b781848e87aa5f064b1fd2a23dd65fb9ab43539637251d063f3a507023a6d8c0b348dc5a2bd61f42cfcc3ceeac3b905ad39e18908","name":"14-7907-5560.png","type":"image/png","lastModified":1613312098785.174,"size":64907},{"id":"6f8af77112c05c8b6b90d6289a28663ec9c2965c5d28d3a2db30c1d4d72787fa3ebeb7a5b03b1e65a48955be96bcb6725a782a9ed3b4d8ae7b7ca5873ad5bc04","href":"https://static.observableusercontent.com/files/6f8af77112c05c8b6b90d6289a28663ec9c2965c5d28d3a2db30c1d4d72787fa3ebeb7a5b03b1e65a48955be96bcb6725a782a9ed3b4d8ae7b7ca5873ad5bc04","name":"14-7907-5559.png","type":"image/png","lastModified":1613312101622.764,"size":66105},{"id":"8baa8ff1ac112a3c3c012a26a1cefac97e3230a19f720baf477ac292ff6e371400b95a4bbd73d0141f4f38d6ba293160ffffa6e7d0b2ef86e56e95865ac7382c","href":"https://static.observableusercontent.com/files/8baa8ff1ac112a3c3c012a26a1cefac97e3230a19f720baf477ac292ff6e371400b95a4bbd73d0141f4f38d6ba293160ffffa6e7d0b2ef86e56e95865ac7382c","name":"14-7904-5561.png","type":"image/png","lastModified":1613312098583.956,"size":65157},{"id":"50c2d760e7a193c7af58c8dea8bd06a2f2e9c9f4c3b6a867a37e14afc318f089a3defea5ff8cb528572508b1fc5c5aa42d31765d1b0ccdfeb38dcd68dc6eb111","href":"https://static.observableusercontent.com/files/50c2d760e7a193c7af58c8dea8bd06a2f2e9c9f4c3b6a867a37e14afc318f089a3defea5ff8cb528572508b1fc5c5aa42d31765d1b0ccdfeb38dcd68dc6eb111","name":"14-7906-5560.png","type":"image/png","lastModified":1613312098809.638,"size":64920},{"id":"58e202cc4a62cd154716d42759a866a2dfe777b4889d2c8f3f398ea1aaf65769c7c05e4f77d875548be66853b6f44bc24403b266bc2cdbd3e7733898f3c5a9d4","href":"https://static.observableusercontent.com/files/58e202cc4a62cd154716d42759a866a2dfe777b4889d2c8f3f398ea1aaf65769c7c05e4f77d875548be66853b6f44bc24403b266bc2cdbd3e7733898f3c5a9d4","name":"14-7901-5561.png","type":"image/png","lastModified":1613312102120.154,"size":65341},{"id":"2758f17f9ff8960e0776941c6065e7d91532f0d0ec9c62a6548ee294fa7a9b96d9db3b543b85d1e351e24267229f8d1d2b4cb48d48a5d5ab6acb3370ce53cb8c","href":"https://static.observableusercontent.com/files/2758f17f9ff8960e0776941c6065e7d91532f0d0ec9c62a6548ee294fa7a9b96d9db3b543b85d1e351e24267229f8d1d2b4cb48d48a5d5ab6acb3370ce53cb8c","name":"14-7904-5559.png","type":"image/png","lastModified":1613312102122.364,"size":65517},{"id":"90872887efcf00bd86b008e8af7d7457ac3c46016b322675d144a5301aa252c14e954fcccf3db892223c08a0713603aeecb2e7671ef01544ccc2ea548d84321d","href":"https://static.observableusercontent.com/files/90872887efcf00bd86b008e8af7d7457ac3c46016b322675d144a5301aa252c14e954fcccf3db892223c08a0713603aeecb2e7671ef01544ccc2ea548d84321d","name":"14-7902-5559.png","type":"image/png","lastModified":1613312101857.186,"size":65535},{"id":"e1367b1947e1b08e705f0f0ba910aa6f14205218b32f47eafc80e461a7cd15f54bc1a8e91dbdbccb4918c22d3dcd2c386458d0325c03658c96dd2bde6f8ee8ea","href":"https://static.observableusercontent.com/files/e1367b1947e1b08e705f0f0ba910aa6f14205218b32f47eafc80e461a7cd15f54bc1a8e91dbdbccb4918c22d3dcd2c386458d0325c03658c96dd2bde6f8ee8ea","name":"14-7903-5560.png","type":"image/png","lastModified":1613312101869.18,"size":65377},{"id":"129e0c6a69888f02d2d4e357698f18a1d9653b4f4dafc7b0d0ae9fb2f9d54b72c6d97f1296079a0f9f0aa9ef6516ef927f08bdfe58ab85f7e9b7e7085463f3b0","href":"https://static.observableusercontent.com/files/129e0c6a69888f02d2d4e357698f18a1d9653b4f4dafc7b0d0ae9fb2f9d54b72c6d97f1296079a0f9f0aa9ef6516ef927f08bdfe58ab85f7e9b7e7085463f3b0","name":"14-7902-5564.png","type":"image/png","lastModified":1613312101624.163,"size":66156},{"id":"e48750cc31f2cbb37983c7abde3736b0be006cdf04b4da82b407e096150a8ea3c6209395d7948780d6ab1534933f7104fd7a0a6fad20b3a0ad82a5ac08d874b6","href":"https://static.observableusercontent.com/files/e48750cc31f2cbb37983c7abde3736b0be006cdf04b4da82b407e096150a8ea3c6209395d7948780d6ab1534933f7104fd7a0a6fad20b3a0ad82a5ac08d874b6","name":"14-7902-5560.png","type":"image/png","lastModified":1613312101615.108,"size":65250},{"id":"17a5b86414c3af30fca38f85b836c324c4941ca01db0ca4651256ed45f2d5273f191301f0096e8727da6c857e1f5f706e3df15cc8007ec98ec78e51679baa0cd","href":"https://static.observableusercontent.com/files/17a5b86414c3af30fca38f85b836c324c4941ca01db0ca4651256ed45f2d5273f191301f0096e8727da6c857e1f5f706e3df15cc8007ec98ec78e51679baa0cd","name":"14-7903-5562.png","type":"image/png","lastModified":1613312099179.2,"size":63738},{"id":"8768d32016bec311c3d3327d2ea98fd26bed7deddaba13807ed9586e6c90bb45ae695235ab630a7d95a933460b59c8fcfd40f6b4fe5a5df6b1a5c271cfeffadb","href":"https://static.observableusercontent.com/files/8768d32016bec311c3d3327d2ea98fd26bed7deddaba13807ed9586e6c90bb45ae695235ab630a7d95a933460b59c8fcfd40f6b4fe5a5df6b1a5c271cfeffadb","name":"14-7905-5561.png","type":"image/png","lastModified":1613312098738.813,"size":63942},{"id":"5b7398326955993240575e078f89fa7416e9e8932de67cf697f0d880f4d336be466d706070b60bec7ec7a69fe6bad5853ce752f3e4cc00ba7d2e4bee68602b29","href":"https://static.observableusercontent.com/files/5b7398326955993240575e078f89fa7416e9e8932de67cf697f0d880f4d336be466d706070b60bec7ec7a69fe6bad5853ce752f3e4cc00ba7d2e4bee68602b29","name":"14-7900-5560.png","type":"image/png","lastModified":1613312101561.356,"size":64759},{"id":"6394c971e9a173091b201e59b2492cf11054f5de72142cbe12d487ddf710c1b42813a4a6ea960ca2abc31cd8095f0d9212abc1c9cea18250308798f80816070d","href":"https://static.observableusercontent.com/files/6394c971e9a173091b201e59b2492cf11054f5de72142cbe12d487ddf710c1b42813a4a6ea960ca2abc31cd8095f0d9212abc1c9cea18250308798f80816070d","name":"Screenshot 2021-02-14 at 14.29.51.png","type":"image/png","lastModified":1613313084622.018,"size":6049007},{"id":"e49913c2dac34dfdaa8175fd3609a12ebc374b57699e5956d14325abb21a0f1eb74ee90b5ed6092feac2116ea1faad9cd145b5886a96cf58a8127ed07b525c1f","href":"https://static.observableusercontent.com/files/e49913c2dac34dfdaa8175fd3609a12ebc374b57699e5956d14325abb21a0f1eb74ee90b5ed6092feac2116ea1faad9cd145b5886a96cf58a8127ed07b525c1f","name":"14-7907-5562.png","type":"image/png","lastModified":1613312094629.821,"size":57584},{"id":"e427090f65be1992c1c3fc80d3ec1bb694fe8f09143ddfe8a19806b562e231aff183d21fe633c7d615c69c1cf6124a323ca59ce3a16b33b6aa0d36bcd48c81e4","href":"https://static.observableusercontent.com/files/e427090f65be1992c1c3fc80d3ec1bb694fe8f09143ddfe8a19806b562e231aff183d21fe633c7d615c69c1cf6124a323ca59ce3a16b33b6aa0d36bcd48c81e4","name":"14-7902-5557.png","type":"image/png","lastModified":1613312094296.025,"size":54867},{"id":"6792cf4bda72a7fbb1b12f8fef78859c4b749c3cc49201dac88a2e19ee7c75e569e84106678f256ea6410b63dec3176d0505935cf171e8b59f1663615b1beb6a","href":"https://static.observableusercontent.com/files/6792cf4bda72a7fbb1b12f8fef78859c4b749c3cc49201dac88a2e19ee7c75e569e84106678f256ea6410b63dec3176d0505935cf171e8b59f1663615b1beb6a","name":"14-7905-5564.png","type":"image/png","lastModified":1613312093658.433,"size":57692},{"id":"d037b457b89269398e6d7da3c33ec76c97d293dadb29caf3b0adbc6260855535d8babfd02cf68841a767b5797ffe4de861c39026a547db66a53bef72fd738b97","href":"https://static.observableusercontent.com/files/d037b457b89269398e6d7da3c33ec76c97d293dadb29caf3b0adbc6260855535d8babfd02cf68841a767b5797ffe4de861c39026a547db66a53bef72fd738b97","name":"14-7899-5562.png","type":"image/png","lastModified":1613312092553.314,"size":57204},{"id":"9f51992bf8689d51aa37b5c6204ba4880a2418d7b2aa0946be067b8825c49b689b468fbfe2fad2be0d6b1c8ece51e1f11f4958e9de1ffee7578e71281d3e9e0d","href":"https://static.observableusercontent.com/files/9f51992bf8689d51aa37b5c6204ba4880a2418d7b2aa0946be067b8825c49b689b468fbfe2fad2be0d6b1c8ece51e1f11f4958e9de1ffee7578e71281d3e9e0d","name":"14-7899-5559.png","type":"image/png","lastModified":1613312091775.915,"size":53410},{"id":"db7e2ef7f8afe32ba6b58af598a8ef643934adfbb1f9d8b70d8dd30dd7650b87fe3ac642fe5d7463fc136b9d7a9f2f96f2112033dab5a4eff218282ded9b5cfc","href":"https://static.observableusercontent.com/files/db7e2ef7f8afe32ba6b58af598a8ef643934adfbb1f9d8b70d8dd30dd7650b87fe3ac642fe5d7463fc136b9d7a9f2f96f2112033dab5a4eff218282ded9b5cfc","name":"14-7900-5558.png","type":"image/png","lastModified":1613312091493.401,"size":52007},{"id":"f1a52f3c73ad399480e638c0f9b1caa004bad420ea5f8757b5421aa7b629809795338b4c6de712be5beac579eeaec9041c1264bedbe95a67c2ff20adf78bf911","href":"https://static.observableusercontent.com/files/f1a52f3c73ad399480e638c0f9b1caa004bad420ea5f8757b5421aa7b629809795338b4c6de712be5beac579eeaec9041c1264bedbe95a67c2ff20adf78bf911","name":"14-7902-5566.png","type":"image/png","lastModified":1613312091125.531,"size":57393},{"id":"c4585736ef7d1db62c189f40ff3a11a0414bc932e70e08fe5dc4f0ef4ab9461d0e611f00ab11cd5961d7b2cde03b895d9a906726fb8c2a17a1f70307f9daaf3e","href":"https://static.observableusercontent.com/files/c4585736ef7d1db62c189f40ff3a11a0414bc932e70e08fe5dc4f0ef4ab9461d0e611f00ab11cd5961d7b2cde03b895d9a906726fb8c2a17a1f70307f9daaf3e","name":"14-7899-5561.png","type":"image/png","lastModified":1613312090533.424,"size":53610},{"id":"ca33006b138275537219db472da16330eb09fc1b9069167b8a744297f86547e3845d94d7ddea96da5d9fcf9bcfd0304f6993dc2e38ed49aa37b744e1ffc84d5d","href":"https://static.observableusercontent.com/files/ca33006b138275537219db472da16330eb09fc1b9069167b8a744297f86547e3845d94d7ddea96da5d9fcf9bcfd0304f6993dc2e38ed49aa37b744e1ffc84d5d","name":"14-7908-5561.png","type":"image/png","lastModified":1613312089794.39,"size":54530},{"id":"232940ef09aef06e3642f4534d845471c59fab5fd00c12caea42a273174544d6d8a21add1272999c59cf2eca3e99536d8ede6edb0410549bd6af378408c4a71a","href":"https://static.observableusercontent.com/files/232940ef09aef06e3642f4534d845471c59fab5fd00c12caea42a273174544d6d8a21add1272999c59cf2eca3e99536d8ede6edb0410549bd6af378408c4a71a","name":"14-7907-5557.png","type":"image/png","lastModified":1613312089211.038,"size":51452},{"id":"bba5b2bbeb1a8ddd2d8f6d3dc778edea45505ff8bff7a9f4d90dc7d6223d60f87c0dcfa37e48101badb3b848fc5181b7ddd01c674dc9fc7b70e57a5863b16011","href":"https://static.observableusercontent.com/files/bba5b2bbeb1a8ddd2d8f6d3dc778edea45505ff8bff7a9f4d90dc7d6223d60f87c0dcfa37e48101badb3b848fc5181b7ddd01c674dc9fc7b70e57a5863b16011","name":"14-7906-5564.png","type":"image/png","lastModified":1613312088776.98,"size":52459},{"id":"3652309b18d16401dc3a1ccb99df80a5ba22be6c9063ca3ecec55592e0ed50cffba12c997712c1535c79de63d37cfae86724f9f8f5610dac6f5cd44bd069b3c6","href":"https://static.observableusercontent.com/files/3652309b18d16401dc3a1ccb99df80a5ba22be6c9063ca3ecec55592e0ed50cffba12c997712c1535c79de63d37cfae86724f9f8f5610dac6f5cd44bd069b3c6","name":"14-7907-5563.png","type":"image/png","lastModified":1613312087084.216,"size":51331},{"id":"b2fe787a5196e82d1c4520fdf3085651d5c0e77177401d7aac7a825930f0309679fdd9c03000fc472976b4625f547a4789d2c9ad042b3888686ede9825ae5389","href":"https://static.observableusercontent.com/files/b2fe787a5196e82d1c4520fdf3085651d5c0e77177401d7aac7a825930f0309679fdd9c03000fc472976b4625f547a4789d2c9ad042b3888686ede9825ae5389","name":"14-7903-5566.png","type":"image/png","lastModified":1613312086662.109,"size":50010},{"id":"472c053ec7548d9cccb51a46f1d0dbd3cfca30e98242dc79499915786c2f66c9322247bc40df082a703bcd11817fde5f2175975cc87b4ed012000f31470de849","href":"https://static.observableusercontent.com/files/472c053ec7548d9cccb51a46f1d0dbd3cfca30e98242dc79499915786c2f66c9322247bc40df082a703bcd11817fde5f2175975cc87b4ed012000f31470de849","name":"14-7908-5557.png","type":"image/png","lastModified":1613312086616.467,"size":47159},{"id":"9325044f73576bca4787c95be3f4442c55bd1bdf758a03d66b9d88d5dbb41f1bff8c17770eb460e001278d1229f676b9de3d85a1cd1462a576275be977e19a79","href":"https://static.observableusercontent.com/files/9325044f73576bca4787c95be3f4442c55bd1bdf758a03d66b9d88d5dbb41f1bff8c17770eb460e001278d1229f676b9de3d85a1cd1462a576275be977e19a79","name":"14-7901-5557.png","type":"image/png","lastModified":1613312086613.766,"size":47543},{"id":"8551e642133e10ef51246746df994050164af2ac0561bffbf2de33841689dfefbd5feaf42ea8acfe8e67f586f78238b6e3d2f1964a65c44827cd2520198f3889","href":"https://static.observableusercontent.com/files/8551e642133e10ef51246746df994050164af2ac0561bffbf2de33841689dfefbd5feaf42ea8acfe8e67f586f78238b6e3d2f1964a65c44827cd2520198f3889","name":"14-7899-5558.png","type":"image/png","lastModified":1613312083836.998,"size":45308},{"id":"2032ff76c8c203ef4d83c0d548d212c3a95200851c107f48bf44f63e557b105596e68fab4443fe0a68bb4814d31325a791529e196a6d9b267b691f84bb3e3b41","href":"https://static.observableusercontent.com/files/2032ff76c8c203ef4d83c0d548d212c3a95200851c107f48bf44f63e557b105596e68fab4443fe0a68bb4814d31325a791529e196a6d9b267b691f84bb3e3b41","name":"14-7898-5561.png","type":"image/png","lastModified":1613312078907.096,"size":42662},{"id":"2db329ff223d37bfa02111386aa49304c3f9c8cd091094bf1d62eb2523fa38cdffe2d34362a879599ec2d6b0a32af1db9ec0eb6a10a9732d0d9af57812a09f46","href":"https://static.observableusercontent.com/files/2db329ff223d37bfa02111386aa49304c3f9c8cd091094bf1d62eb2523fa38cdffe2d34362a879599ec2d6b0a32af1db9ec0eb6a10a9732d0d9af57812a09f46","name":"14-7908-5564.png","type":"image/png","lastModified":1613312077439.194,"size":42662},{"id":"f72ddcad6f34e5a66e73d40b2d35d3b8c92d15bcbe8d4c13de34c3e97b297fb565c23d7ace286033c45ff9a4b192ba8a448d65281c80ec5d97a939b4fa526a61","href":"https://static.observableusercontent.com/files/f72ddcad6f34e5a66e73d40b2d35d3b8c92d15bcbe8d4c13de34c3e97b297fb565c23d7ace286033c45ff9a4b192ba8a448d65281c80ec5d97a939b4fa526a61","name":"14-7905-5565.png","type":"image/png","lastModified":1613312070578.4,"size":47261},{"id":"ccd91dfca6533dfa567ec7be2be87f1086b613a75b0a5bd5b93ba4d45ca6ec2097baf2e5d66ebbe15596ae0fd8e31ec91fdaade7c7c793bcd1d7638bc207aa3d","href":"https://static.observableusercontent.com/files/ccd91dfca6533dfa567ec7be2be87f1086b613a75b0a5bd5b93ba4d45ca6ec2097baf2e5d66ebbe15596ae0fd8e31ec91fdaade7c7c793bcd1d7638bc207aa3d","name":"14-7907-5565.png","type":"image/png","lastModified":1613312067115.733,"size":44691},{"id":"1ad396e6494d7d4c146e6488f3eb386ac465b06cd9bde70a50906e5be53079ac830b9f931865bc4562c259f6749799be6f0740ff37a14fa2a3668a2c71317a3b","href":"https://static.observableusercontent.com/files/1ad396e6494d7d4c146e6488f3eb386ac465b06cd9bde70a50906e5be53079ac830b9f931865bc4562c259f6749799be6f0740ff37a14fa2a3668a2c71317a3b","name":"14-7898-5566.png","type":"image/png","lastModified":1613312064432.554,"size":59585},{"id":"a84e10a34e61b5ed35ecff6d2591567f57e6b16cf818c5854de80b6b1b530487c8df5b85b67e85fbb9b05a5d20969840a87f4eea529df4bbb0685be9b4718e14","href":"https://static.observableusercontent.com/files/a84e10a34e61b5ed35ecff6d2591567f57e6b16cf818c5854de80b6b1b530487c8df5b85b67e85fbb9b05a5d20969840a87f4eea529df4bbb0685be9b4718e14","name":"14-7908-5565.png","type":"image/png","lastModified":1613312043676.224,"size":43267},{"id":"81e583e7165a6a974a10d4892428ef27a6a44b1f6059f2971b3e8d916187aaf991113c1f69dc4991040fea56c2a94799f544772661ef5c978568d4fc2d1f8e71","href":"https://static.observableusercontent.com/files/81e583e7165a6a974a10d4892428ef27a6a44b1f6059f2971b3e8d916187aaf991113c1f69dc4991040fea56c2a94799f544772661ef5c978568d4fc2d1f8e71","name":"14-7907-5566.png","type":"image/png","lastModified":1613312029157.417,"size":44484},{"id":"b8366e9a5f2caa652cc5322ab9d7f6c07a5f9da3d7b1f90ec173eca0ad096436b6c1d7b28a0c4885d76c0daecaf3180040fea7b5193afd642eed4596e9c16959","href":"https://static.observableusercontent.com/files/b8366e9a5f2caa652cc5322ab9d7f6c07a5f9da3d7b1f90ec173eca0ad096436b6c1d7b28a0c4885d76c0daecaf3180040fea7b5193afd642eed4596e9c16959","name":"14-7906-5565.png","type":"image/png","lastModified":1613312028476.562,"size":45871},{"id":"f69ae2ca2dcc3ef3e7d1eab6adf066a57c813d2cc1a9bae6c7511c11ca481fe28b8c657d84e5488e859fb97784e41b917e1ec0947c507b39396a6d8cb1677715","href":"https://static.observableusercontent.com/files/f69ae2ca2dcc3ef3e7d1eab6adf066a57c813d2cc1a9bae6c7511c11ca481fe28b8c657d84e5488e859fb97784e41b917e1ec0947c507b39396a6d8cb1677715","name":"mexico-68-wall-art.jpg","type":"image/jpeg","lastModified":1613431383327.328,"size":209843},{"id":"c5125ed9780ff2452b95d056ded9cd8cecbb1df6473ce805bf1fc27ca3739c26e4bd83016cfb070088ed7b09d7073655a35ef8e13767f08cefd217f79871a148","href":"https://static.observableusercontent.com/files/c5125ed9780ff2452b95d056ded9cd8cecbb1df6473ce805bf1fc27ca3739c26e4bd83016cfb070088ed7b09d7073655a35ef8e13767f08cefd217f79871a148","name":"Komyozenji_Stone_garden_1.jpeg","type":"image/jpeg","lastModified":1618926275686.677,"size":197972},{"id":"34bfbb3478dfe2818a8e1ad8c97d3e62f5514875a8f9a4f041ce0886913cbac3ca4386af212c654c8c28cb3296231bc9c5b8a86a729a5fc015bd1432af9acca1","href":"https://static.observableusercontent.com/files/34bfbb3478dfe2818a8e1ad8c97d3e62f5514875a8f9a4f041ce0886913cbac3ca4386af212c654c8c28cb3296231bc9c5b8a86a729a5fc015bd1432af9acca1","name":"schlitz-audubon-bubbles3.jpeg","type":"image/jpeg","lastModified":1618926708232.884,"size":140477}] 2f:{"title":"II: Drawing waterlines on maps","cells":[{"id":0,"value":"md`# II: Drawing waterlines on maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5016,"value":"FileAttachment(\"Screenshot 2021-01-25 at 23.53.11 copy@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5260,"value":"md`Apparently, while most cartographers today would recognise waterlining, they wouldn't be able to name it (Huffman, D.P., 2010. On waterlines: arguments for their Employment, Advice on their Generation. Cartographic Perspectives, (66), pp.23-30.). Looking for examples of people making waterlines with modern apps or code, all kinds of other terms are used: ‘coastal vignette’ (or ‘riverine and lacustrine vignettes’), ‘concentric shoreline effect’, ‘concentric line vignette’, even just ‘shoreline’. Regardless of what you call them, how do you make them?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5408,"value":"Promise.resolve(FileAttachment(\"world_visualizations.png\").url()).then(\n d => html`

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5417,"value":"md`^{[*Distance fields. Image from Philip Rideout*](https://prideout.net/blog/distance_fields/)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3390,"value":"md`> *Reminder: do not forget about [geojson winding direction](https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8) when drawing with d3. If, when switching in your own data, you get a square, that's likely the problem.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3065,"value":"md`## Stroke width method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4125,"value":"md`> *In this section, I'm using Canvas for the drawing, and the next I'm using SVG, but you could use either for both. [This notebook](https://observablehq.com/@oliviafvane/map-waterlines-canvas), for example, demoes the buffered paths method drawn in Canvas*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3068,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":4305,"value":"draw_map_canvas_stroke(\n shetland_simplified,\n 600,\n 10,\n undefined,\n true,\n undefined,\n undefined,\n 'Teal',\n undefined,\n 80,\n undefined,\n undefined,\n undefined,\n 0.6\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4392,"value":"md` ^{Shetland, Scotland}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3084,"value":"draw_map_canvas_stroke(\n ireland_complex,\n 400,\n undefined,\n undefined,\n true,\n undefined,\n undefined,\n 'Teal',\n undefined,\n 40\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4381,"value":"md` ^Ireland`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5069,"value":"FileAttachment(\"Orkney.json\")\n .json()\n .then(data =>\n draw_map_canvas_stroke(\n turf.rewind(data, { reverse: true }),\n 600,\n 15,\n true,\n true,\n undefined,\n undefined,\n 'Teal',\n undefined,\n 100,\n undefined,\n undefined,\n undefined,\n 0.6\n )\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":5075,"value":"md` ^{Orkney, Scotland}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4179,"value":"md`You can even combine with clipped Web Map Tile images à la [@d3/clipped-map-tiles](@d3/clipped-map-tiles). The image below shows the Isles of Scilly - using the same imagery from the [1896 Ordnance Survey map](https://maps.nls.uk/view/101169311) that I showed in notebook 1. Have a play with changing the waterlines colour with the dropdown menu:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4937,"value":"viewof scilly_waterlines_colour = select({\n options: [\n { label: 'Deep Taupe', value: '#7A6263' },\n { label: 'Celadon Blue', value: '#247BA0' },\n { label: 'Myrtle Green', value: '#377771' }\n ],\n title: 'Choose waterlines colour'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4185,"value":"swatches(['#7A6263', '#247BA0', '#377771'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4582,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5353,"value":"FileAttachment(\"Screenshot 2021-02-14 at 14.29.51.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4594,"value":"scilly_ripple_extent = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":4591,"value":"scilly_width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":4562,"value":"scilly_canvas_waterlines = draw_map_canvas_stroke(\n scilly,\n scilly_width,\n 24,\n true,\n true,\n undefined,\n undefined,\n scilly_waterlines_colour,\n undefined,\n scilly_ripple_extent,\n undefined,\n 0.5,\n [2, 3],\n 0.3\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3483,"value":"md`When the waterlines are very dense, as a side effect, it achieves something akin to a [voronoi diagram](https://en.wikipedia.org/wiki/Voronoi_diagram) for the different islands:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3480,"value":"FileAttachment(\"Screenshot 2021-01-25 at 11.30.44@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4309,"value":"md`All well so far, until we try expanding the waterline area:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4312,"value":"draw_map_canvas_stroke(\n shetland_simplified,\n undefined,\n undefined,\n undefined,\n true,\n undefined,\n undefined,\n '#14453D',\n undefined,\n 200\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4951,"value":"draw_map_canvas_stroke(\n world_simplified,\n undefined,\n undefined,\n undefined,\n true,\n undefined,\n undefined,\n '#14453D',\n undefined,\n 200\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3230,"value":"md` We start to see some odd artefacts appearing: clipped bits of lines that shouldn't be there. \n\nI don't know exactly what's going on here, but smoothing functions seem to play a role. To explain, if you simply draw the strokes on the geojson, any sharp corners create radiating spikes: not the desired effect. You need to smooth off these corners. I've used an approach from [@nbremer](https://observablehq.com/@nbremer/simplified-curved-earth-map) using [d3's curve settings](https://github.com/d3/d3-shape#curves).\n\nThis is what happens if you don't smooth the paths (I've switched the default curve function—[d3.curveCatmullRomClosed](https://github.com/d3/d3-shape#curveCatmullRomClosed)—for [d3.curveLinear](https://github.com/d3/d3-shape#curveLinear), which is no curve). [d3indepth](https://www.d3indepth.com/) created a [nice tool](http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8) to try out the different D3 curve functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4327,"value":"draw_map_canvas_stroke(\n shetland_simplified,\n undefined,\n undefined,\n undefined,\n true,\n undefined,\n undefined,\n '#14453D',\n undefined,\n 200,\n d3.curveLinear\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3424,"value":"md`Here's the same thing but leaving the waterlines filled and applying a spectrum colour scale. (Is this not *screaming* Eurovision!?)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4353,"value":"draw_map_canvas_stroke(\n europe_simplified,\n undefined,\n undefined,\n undefined,\n undefined,\n a1,\n true,\n 'gray',\n undefined,\n 200,\n d3.curveLinear\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4362,"value":"md`To avoid this, fun though it may be, apply a curve function to the geojson path. The chosen curve function will have an effect on the shape of the waterlines (you can try different ones with the dropdown menu below); this becomes more obvious when the waterlines are covering a greater distance. I've used the rainbow fill again because it makes it easier to see. You'll notice the gappy / broken areas change depending on which curve function is chosen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4408,"value":"viewof dd = select({\n options: curveTypes.map(d => d.name),\n value: \"curveCatmullRomClosed (α=1)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3314,"value":"draw_map_canvas_stroke(\n shetland_simplified,\n undefined,\n undefined,\n undefined,\n undefined,\n true,\n true,\n 'lightgray',\n undefined,\n 200,\n curve_selected\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4371,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4415,"value":"curve_selected = curveTypes.filter(d => d.name == dd)[0].curve","pinned":false,"hidden":false,"mode":"ojs"},{"id":4456,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4453,"value":"md`Use the slider below to see what happens when you increase or decrease the extent of the waterlines. You'll notice, from a point, they start to unravel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3367,"value":"viewof a1 = slider({\n title: \"Waterline distance extent\",\n min: 10,\n max: 300,\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3332,"value":"draw_map_canvas_stroke(\n scilly,\n 500,\n 10,\n false,\n false,\n true,\n true,\n 'lightgray',\n undefined,\n a1\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5005,"value":"md`None of the curve function options eradicate the unravelling which seems to happen more when there are multiple land masses (eg. little islands). Unless you want to do manual cleanup, to get round this problem, you can use the second waterlines method—creating wholly-new buffered paths.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2333,"value":"md`## New buffered paths method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`The [Turf](https://turfjs.org/) library includes a handy [buffer function](https://turfjs.org/docs/#buffer) which does the job here (I didn't find much documentation for the jsts library used by [@rveciana](@rveciana/coastal-vignettes-with-jsts-d3js)). Because the buffer calculations can be slow, to prevent this notebook from freezing/ bringing up the 'notebook not responding' message, I've relied heavily on [web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) (courtesy of [@fil](https://observablehq.com/@fil/worker)).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3009,"value":"function create_buffered_polygons_inWorker(data) {\n let geojson = data.geojson,\n total = data.total, \n radial_distance = data.radial_distance, // in km\n spacing_change = data.spacing_change; \n\n // Use turf.rewind to make sure that the geojson winding direction is correct for d3 (or else polygons can be inverted into holes) - more on this https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8\n function buffer(geojson, distance) {\n return turf.rewind(turf.buffer(geojson, distance), { reverse: true });\n }\n\n let buffered_polygons = [];\n let exp = d3\n .scalePow()\n .exponent(spacing_change)\n .domain([0, total - 1])\n .range([0, radial_distance]);\n for (let i = 0; i < total; i++) {\n let new_polygon = buffer(geojson, exp(i), 'kilometers');\n buffered_polygons.push(new_polygon);\n }\n return buffered_polygons;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"draw_map(UK_Ireland_buffered_1, false, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`One of the unexpected consequences of using waterlines is that they really draw attention to isolated islands and archipelagos - including ones so small you would miss them otherwise. That was the case above where that ripple way off by itself to the north west is, I think, [Rockall](https://en.wikipedia.org/wiki/Rockall) \"an uninhabitable granite islet\" 300km away from any other land and <1km² in area. With waterlines it suddenly becomes a lot more prominent.\n\n

\n\n^{[Rockall](https://en.wikipedia.org/wiki/Rockall)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5278,"value":"md`When you start playing around with the parameters, you can get different effects. (Have a read of Huffman's paper where he talks about what he thinks looks best).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2526,"value":"draw_map(UK_Ireland_buffered_2, false, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5305,"value":"md`The graphic above is made from the same geojson but with much tighter waterlines, giving a different feel. I get retro lettering vibes from this image. Subtle adjustments can really affect how we 'read' graphics, like using overlaps that start to look like folds in Federica Fragapane's project ['The Mayors Dialogue on Growth and Solidarity'](https://mayorsdialoguedataviz.odi.org/). It's these subtleties in spacing, density, overlap, overall shape, colour etc. that make something look more like ripping water, or like [a soundwave](https://i.pinimg.com/originals/df/10/75/df1075d90e5c60d1aedd718d3794f16c.jpg), or like the wind (from @mattdzugan's notebook ['Generative Art using Wind Turbine data'](https://observablehq.com/@mattdzugan/generative-art-using-wind-turbine-data)) or something else.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5301,"value":"FileAttachment(\"buffered_lines.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5428,"value":"Promise.resolve(FileAttachment(\"mexico-68-wall-art.jpg\").url()).then(\n d =>\n html`

^{1968 Mexico Olympics Logo: waterlines as lettering`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"draw_map(Ireland_buffered, false, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5283,"value":"md`A reconstruction of the [1884 Cholera map](https://gallica.bnf.fr/ark:/12148/btv1b84391854/f1.item.zoom) from notebook 1:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5111,"value":"Med_cropped = {\n let Med_wrapper = html`}

${draw_map(Med_buffered, false, true, \"teal\")}`;\n // enlarge and crop edges of waterlines viz\n Med_wrapper.setAttribute(\"style\", \"overflow: hidden\");\n Med_wrapper.firstElementChild.setAttribute(\n \"style\",\n \"transform: scale(1.7)translate(52px, 0px)\"\n );\n // add fill colour to first waterline\n Med_wrapper.firstElementChild.firstElementChild.setAttribute(\n \"style\",\n \"fill: #f0f0f1;\"\n );\n return Med_wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5097,"value":"Med_buffered = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: Med,\n total: 14,\n radial_distance: 300,\n spacing_change: 2.8\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5289,"value":"md`One of the things you notice when you apply waterlines to the whole globe is that the buffering method defines the waterline paths in latitude and longitude. So the map projection you choose can have an distorting effect on them. With \\`\\`d3.geoMercator()\\`\\` below, you get overlapping waterlines at the edges of the map image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5041,"value":"draw_map(World_buffered, false, true, undefined, undefined, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"md`If you choose a map projection which deforms the earth's spherical geometry severely, the waterlines will cease to look evenly laid out. In the image below, I've lent into this, also applying a \\`\\`stroke-dasharray\\`\\` scale to the waterlines so the dashes shorten and spread out the further you get from the coastline. The effect it creates is disorientating, but energetic.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2620,"value":"draw_map_world(World_buffered, true, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2637,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":3053,"value":"md`In [the next notebook](https://observablehq.com/@oliviafvane/iii-animating-waterlines-svg-morphing?collection=@oliviafvane/watermarks), I take this further by animating the waterlines, as if they are moving ripples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4134,"value":"md`## Addendum: waterlines made physical`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3231,"value":"md`Waterlining evokes moving water, but you can actually find similar-looking [static phenomenon in frozen water](https://www.schlitzaudubon.org/2018/12/24/the-art-and-science-of-ice-formations/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3238,"value":"html`

^{Ice rings in nature}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5485,"value":"md`Meanwhile in the human-designed physical world, Japanese rock gardens (or zen gardens) feature concentric rings and other shapes [raked into gravel or sand that are, similarly, meant to represent ripples in water](https://en.wikipedia.org/wiki/Japanese_rock_garden).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5489,"value":"html`

^{Zen stone garden at the Kōmyōzen-ji temple in Dazaifu, Japan}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3036,"value":"md`---\n## Buffered Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2523,"value":"UK_Ireland_buffered_2 = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: uk_and_ireland_simplified,\n total: 30,\n radial_distance: 300,\n spacing_change: 4\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"UK_Ireland_buffered_1 = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: uk_and_ireland_simplified,\n total: 12,\n radial_distance: 250,\n spacing_change: 4\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"Ireland_simple_buffered = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: ireland_simplified,\n total: 18,\n radial_distance: 250,\n spacing_change: 4\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2481,"value":"Ireland_buffered = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: ireland_complex,\n total: 18,\n radial_distance: 250,\n spacing_change: 4\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"World_buffered = Generators.observe(\n worker(\n create_buffered_polygons_inWorker,\n {\n geojson: world_simplified,\n total: 25,\n radial_distance: 3000,\n spacing_change: 4\n }, // pass in the required libraries\n `importScripts(${await require\n .resolve(\"@turf/turf@5\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@5\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"md`## Simplify Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5089,"value":"Med = FileAttachment(\"custom.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3306,"value":"import { shetland_simplified } from \"@oliviafvane/map-waterlines-canvas\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"uk_and_ireland_simplified = {\n let uk_and_ireland_simplified = topojson.presimplify(uk_and_ireland)\n let min_weight = topojson.quantile(uk_and_ireland_simplified, 0.1)\n uk_and_ireland_simplified = topojson.simplify(uk_and_ireland_simplified, min_weight)\n \n uk_and_ireland_simplified = topojson.merge(uk_and_ireland_simplified, uk_and_ireland_simplified.objects.subunits.geometries.filter(d => (d.id == \"ENG\") |(d.id == \"WLS\") |(d.id == \"SCT\") |(d.id == \"IRL\") | (d.id == \"NIR\"))) \n \n return uk_and_ireland_simplified;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"ireland_simplified = {\n let ireland_simplified = topojson.presimplify(uk_and_ireland)\n let min_weight = topojson.quantile(ireland_simplified, 0.08)\n ireland_simplified = topojson.simplify(ireland_simplified, min_weight)\n \n ireland_simplified = topojson.merge(ireland_simplified, ireland_simplified.objects.subunits.geometries.filter(d => (d.id == \"IRL\") | (d.id == \"NIR\"))) \n \n return ireland_simplified;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"ireland_complex = {\n let ireland_complex = topojson.presimplify(uk_and_ireland)\n let min_weight = topojson.quantile(ireland_complex, 1)\n ireland_complex = topojson.simplify(ireland_complex, min_weight)\n \n ireland_complex = topojson.merge(ireland_complex, ireland_complex.objects.subunits.geometries.filter(d => (d.id == \"IRL\") | (d.id == \"NIR\"))) \n \n return ireland_complex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"world_simplified = {\n let world_simplified = topojson.presimplify(world);\n let min_weight = topojson.quantile(world_simplified, 1);\n world_simplified = topojson.simplify(world_simplified, min_weight);\n\n world_simplified = topojson.merge(\n world_simplified,\n world_simplified.objects.countries.geometries.filter(d => d.id != 10)\n );\n\n return world_simplified;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"europe_simplified = {\n let europe_simplified = topojson.presimplify(europe)\n let min_weight = topojson.quantile(europe_simplified, 0.1)\n europe_simplified = topojson.simplify(europe_simplified, min_weight)\n \n europe_simplified = topojson.merge(europe_simplified, europe_simplified.objects.europe.geometries.filter(d => (d.id != \"IS\"))) \n \n return europe_simplified;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md `## Geojson data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"uk_and_ireland = d3.json(\"https://bost.ocks.org/mike/map/uk.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"world = await (await fetch('https://vega.github.io/vega-datasets/data/world-110m.json')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"europe = d3.json('https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3329,"value":"scilly = FileAttachment(\"1 (1).json\")\n .json()\n .then(data => turf.rewind(data, { reverse: true }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5318,"value":"md`## Scilly map tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5356,"value":"md`Because this is not a public web map tile server (more information on National Library of Scotland web map tile servers [here](https://maps.nls.uk/projects/api/)), I have attached the tile images to the notebook. (Bulk File Attachment upload keyboard shortcut CMD Shift U is very helpful for this).\n\nGenerate a mapping between original filename (which contains the zoom, x, y information for each tile image) and the new notebook fileAttachment url to use in a url constructing function with \\`\\`d3.tile\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5324,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":5330,"value":"scillyTile_paths = scilly_tile_fileAttachments.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5333,"value":"scillyTile_urls = Promise.all(\n scilly_tile_fileAttachments.map(file => file.url())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5336,"value":"scillyTiles_mapping = {\n var result = {};\n scillyTile_paths.forEach((d, i) => (result[d] = scillyTile_urls[i]));\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`## Libraries and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4183,"value":"import { swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3364,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4410,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2352,"value":"import { worker } from \"@fil/worker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"d3 = require(\"d3@5\", 'd3-geo', 'd3-geo-projection', 'd3-tile')","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"topojson = require('topojson-client@3', 'topojson-simplify@3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}