31:T28c5,// Text annotations based on ‘A Scottish paper landscape: Ordnance Survey Maps - Six-inch 1st edition, Scotland, 1843-1882’https://maps.nls.uk/os/6inch/os_info1.html, an essay by Christopher Fleet (National Library of Scotland) and Charles W J Withers (University of Edinburgh). animated_map = { const wrapper_div = DOM.element('div'); const svg_el = DOM.svg(width, height); const annotation_p = DOM.element('p'); wrapper_div.appendChild(annotation_p); wrapper_div.appendChild(svg_el); const svg = d3.select(svg_el); let countdown_rect_fullWidth = 360; ////////////// /// STATIC /// ////////////// // Add background let background = svg .append('rect') .attr('x', '0') .attr('y', '0') .attr('width', width) .attr('height', height) .attr('fill', background_colour); // define defs let defs = svg.append('defs'); defs .append('clipPath') .attr('id', 'clip') .append('use') .attr('xlink:href', location + '#land_cumulative'); defs .append('filter') .attr('id', 'noise1') .html( '' ); // Create interpolate functions for background pencil outline transform + opacity to handle transitioning over 2 ticks let scaling_interpolate = d3.interpolate( 'translate(80,-30)scale(1)', 'translate(-70,-100)scale(1.7)' ); let opacity_interpolate = d3.interpolate( pencil_outline_opacity1, pencil_outline_opacity2 ); let map_wrapper = svg .append('g') .attr('id', 'map_wrapper') .attr( 'transform', year == years_tick_array[0] ? scaling_interpolate(0) : year == years_tick_array[1] ? scaling_interpolate(0.5) : scaling_interpolate(1) ); // background pencil outline of Britain let background_shape = map_wrapper .append('g') .attr('id', 'land_background_wrapper') .append('path') .attr('id', 'land_background') .attr('d', path(land)) .attr('fill', pencil_outline_colour) .attr('stroke', pencil_outline_colour) .attr('stroke-width', '2px') .attr( 'opacity', year <= years_tick_array[1] ? opacity_interpolate(0) : year == years_tick_array[2] ? opacity_interpolate(0.5) : opacity_interpolate(1) ) .attr('filter', 'url(#noise1)'); // opacity transition at the beginning if (year == years_tick_array[1]) { background_shape .attr('opacity', opacity_interpolate(0)) .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr('opacity', opacity_interpolate(0.5)); } else if (year == years_tick_array[2]) { background_shape .attr('opacity', opacity_interpolate(0.5)) .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr('opacity', opacity_interpolate(1)); } let tiles_wrapper = map_wrapper .append('g') .attr('id', 'tile_wrapper') .attr('clip-path', 'url(' + location + '#clip)'); tiles_wrapper .append('path') .attr('id', 'offWhite_background') .attr('fill', offWhite_colour) .attr( 'd', year == years_tick_array[0] ? path(map_data_yearCumulative[year]) : path(map_data_yearCumulative[year - 1]) ); let tiles_wrapper_images = tiles_wrapper .append('g') .attr('id', 'tile_wrapper_images'); // To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel — From Mike Bostock's https://observablehq.com/@d3/clipped-map-tiles tiles_wrapper_images .selectAll('.tiles2') .data(tiles) .join('image') .attr('xlink:href', d => url(d[0], d[1], d[2])) .attr('onerror', "this.style.display='none'") .attr('x', d => Math.round((d[0] + tiles.translate[0]) * tiles.scale - 0.5)) .attr('y', d => Math.round((d[1] + tiles.translate[1]) * tiles.scale - 0.5)) .attr('width', tiles.scale + 1) .attr('height', tiles.scale + 1) .attr('class', 'tiles2'); tiles_wrapper_images .selectAll('.tiles1') .data(tiles) .join('image') .attr('xlink:href', d => url(d[0], d[1], d[2])) .attr('onerror', "this.style.display='none'") .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('class', 'tiles1'); map_wrapper .append('use') .attr('xlink:href', location + '#land_cumulative') .attr('fill', 'none') .attr('stroke', 'lightgray') .attr('stroke-width', 0.1); // Text annotation styling const text_font = 'Neuton'; annotation_p.style['font-size'] = "26px"; annotation_p.style.width = "360px"; annotation_p.style.position = "fixed"; annotation_p.style.transform = 'translate(18px, 0px)'; annotation_p.style['font-family'] = text_font; annotation_p.style['line-height'] = 'normal'; annotation_p.style.color = text_colour; let countdown_rect = svg .append('rect') .attr('x', 10) .attr('y', 10) .attr('width', countdown_rect_fullWidth) .attr('height', 5) .attr('fill', 'white') .style('transform', 'translate(8px,9px)'); //////////////// /// ANIMATED /// //////////////// defs .append('path') .attr('id', 'land_cumulative') .attr( 'd', year == years_tick_array[0] ? path(map_data_yearCumulative[year]) : path(map_data_yearCumulative[year - 1]) ); // update map clip - put a delay on this so it doesn't look like a flash with the land_active colour fading in setTimeout(function() { defs .select('#land_cumulative') .attr('d', path(map_data_yearCumulative[year])); d3.select('#offWhite_background').attr( 'd', path(map_data_yearCumulative[year]) ); }, tickDuration / 1.5); if (viewof year[0].textContent != "Play" && year == years_tick_array[1]) { map_wrapper .attr('transform', scaling_interpolate(0)) .transition() .ease(d3.easeQuadIn) .duration(tickDuration) .attr('transform', scaling_interpolate(0.5)); } else if ( viewof year[0].textContent != "Play" && year == years_tick_array[2] ) { map_wrapper .attr('transform', scaling_interpolate(0.5)) .transition() .ease(d3.easeQuadOut) .duration(tickDuration) .attr('transform', scaling_interpolate(1)); } // Add text for the year let text = svg .append('text') .attr('x', width - 117) .attr('y', 52) .attr('fill', text_colour) .attr('font-size', '55px') .attr('font-family', text_font) .text(year); // Add text annotation let current_annotation = annotations_processed .filter(d => d.year <= year) .reverse()[0]; annotation_p.textContent = current_annotation.text; // Transition countdown bar if (year == year_max) { countdown_rect.attr('width', countdown_rect_fullWidth); } else { countdown_rect.attr( 'width', countdown_rect_fullWidth * (1 - (year - current_annotation.year) / current_annotation.years_to_next) ); } // If the scrubber is not paused - transition bar if (viewof year[0].textContent != "Play" && year != year_max) { countdown_rect .transition() .ease(d3.easeLinear) .duration(tickDuration) .attr( 'width', countdown_rect_fullWidth * (1 - (year - current_annotation.year + 1) / current_annotation.years_to_next) ); } // fade in the text annotation if it is a new one if (year == current_annotation.year) { d3.select(annotation_p) .style('opacity', 0) .transition() .style('opacity', 1); } // Add the maps map_wrapper .append('path') .attr('id', 'land_active1') .attr('fill', active_tiles_colour) .attr('opacity', 0) .attr('d', path(map_data_yearSlice[year])) .transition() .duration(tickDuration / 3) .ease(d3.easeLinear) .attr('opacity', 1); let fading_colour_duration = tickDuration * 0.8; map_wrapper .append('path') .attr('id', 'land_active2') .attr('fill', active_tiles_colour) .attr('opacity', 1) .attr( 'd', year == years_tick_array[0] ? null : path(map_data_yearSlice[year - 1]) ) .transition() .duration(fading_colour_duration) .ease(d3.easeLinear) .attr('opacity', 0.5); map_wrapper .append('path') .attr('id', 'land_active3') .attr('fill', active_tiles_colour) .attr('opacity', 0.5) .attr( 'd', year <= years_tick_array[1] ? null : path(map_data_yearSlice[year - 2]) ) .transition() .duration(fading_colour_duration) .ease(d3.easeLinear) .attr('opacity', 0.2); map_wrapper .append('path') .attr('id', 'land_active4') .attr('fill', active_tiles_colour) .attr('opacity', 0.2) .attr( 'd', year <= years_tick_array[2] ? null : path(map_data_yearSlice[year - 3]) ) .transition() .duration(fading_colour_duration) .ease(d3.easeLinear) .attr('opacity', 0); // sheets outline let sheets_outline = map_wrapper .append('path') .attr('id', 'sheetOutlines_cumulative') .attr('stroke', sheets_outline_colour) .attr('fill', 'none') .attr('d', path(map_data_yearCumulative[year])); // Draw outline from current annotation if ('outline' in current_annotation) { let annotation_outline = map_wrapper .append('path') .attr('id', 'annotation_outline') .attr('fill', 'none') .attr('stroke', chroma(active_tiles_colour).saturate(1)) .attr('stroke-width', '5px') .attr('d', path(current_annotation.outline)); if (year == current_annotation.year) { annotation_outline .attr('opacity', 0) .transition() .duration(tickDuration / 3) .ease(d3.easeLinear) .attr('opacity', 1); } } // If the scrubber is paused if (viewof year[0].textContent == "Play" || year == year_max) { setTimeout(function() { d3.selectAll('#land_active1, #land_active2, #land_active3, #land_active4') .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr('opacity', 0) .remove(); }, tickDuration); } return wrapper_div; }32:T499,annotations = [ { year: 1843, text: "Surveying finally commenced in Scotland in 1843. The Survey swept from South West to North East over time." }, { year: 1852, text: "The Isle of Lewis in the Outer Hebrides was mapped out of sequence because Sir James Matheson, the landowner, paid the OS to map it early.", // An annotation can include an optional attribute 'outline', which is geojson data describing a shape that will be outlined in the animated graphic simultaneously with the text annotation. (Here, it outlines the map sheets for the Isle of Lewis). outline: lewis_sheets }, { year: 1860, text: "Delays were caused by a dispute over the choice of cartographic scale, a general lack of funds and staff, and the difficult Highland terrain and weather." }, { year: 1870, text: "Highland deer forest owners did not want surveyors on their land in deer stalking season. This was a challenge as it clashed with survey season." }, { year: 1878, text: "The survey of Scotland took almost four decades to complete with the final maps of Orkney and Shetland published in 1882." } ]33:[{"id":"3f058c6166a1787dcf980987a46d04dc5976deefad94eb5bb625a8a59bbd80b01663cc4882e950e53fabf3cc0b6968118e752e1857014488bffd09dd1f4a9c72","href":"https://static.observableusercontent.com/files/3f058c6166a1787dcf980987a46d04dc5976deefad94eb5bb625a8a59bbd80b01663cc4882e950e53fabf3cc0b6968118e752e1857014488bffd09dd1f4a9c72","name":"lewis_sheets.json","type":"application/json","lastModified":1628077522003.961,"size":593},{"id":"415a65a3054900d0c72758b80ffa2e8db17fcd19a713ee29aedf3df71af7d9c7545299318dd0edd5d90a9248fa43ec132397d6afb0dd3ec73d9a86ae17bb70b2","href":"https://static.observableusercontent.com/files/415a65a3054900d0c72758b80ffa2e8db17fcd19a713ee29aedf3df71af7d9c7545299318dd0edd5d90a9248fa43ec132397d6afb0dd3ec73d9a86ae17bb70b2","name":"chroma.min.js","type":"application/javascript","lastModified":1631019153301.815,"size":41616},{"id":"cbc781078d5f6a5e7a33571d6a165c5dadeca390144492e8f0fa9d3523c9f96f324dfea2c5e859e25160a5eef30e0ef855ae417d285f69753319c169882da927","href":"https://static.observableusercontent.com/files/cbc781078d5f6a5e7a33571d6a165c5dadeca390144492e8f0fa9d3523c9f96f324dfea2c5e859e25160a5eef30e0ef855ae417d285f69753319c169882da927","name":"land (1).json","type":"application/json","lastModified":1631019599901.876,"size":62750}] 2f:{"title":"OS 1”-to-the-mile, Scotland: 1st Ed. With text annotations","cells":[{"id":0,"value":"md`# OS 1”-to-the-mile, Scotland: 1st Ed. With text annotations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"md`After surveying [England & Wales]() (and [Ireland](http://geohive.maps.arcgis.com/apps/webappviewer/index.html?id=9def898f708b47f19a8d8b7088a100c4)—not visualised here), the story continues in Scotland:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"viewof year = Scrubber(years_tick_array, { delay: tickDuration, loop: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"tickDuration = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"md`### Annotations (explanation text)\n\nThese annotations are based on [‘A Scottish paper landscape: Ordnance Survey Maps - Six-inch 1st edition, Scotland, 1843-1882’](https://maps.nls.uk/os/6inch/os_info1.html), an essay by Christopher Fleet (National Library of Scotland) and Charles W J Withers (University of Edinburgh). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"annotations_processed = annotations.map((d, i) => ({\n ...d,\n years_to_next:\n -1 *\n (d.year - (i != annotations.length - 1 ? annotations[i + 1].year : d.year))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1094,"value":"md`### Width / Height`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"height = width + 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md`### Colours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"background_colour = '#457B9D'","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"active_tiles_colour = chroma('#DDA6A8').saturate(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"sheets_outline_colour = chroma(active_tiles_colour).brighten(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"pencil_outline_colour = 'black'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"pencil_outline_opacity1 = 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"pencil_outline_opacity2 = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"offWhite_colour = 'rgb(236,229,214)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"text_colour = 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md`### Projection and Geo Path Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"projection = d3.geoMercator().fitWidth(width, land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"md`### Tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"tiles = tile()","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"tile = d3\n .tile()\n .size([width, height])\n .zoomDelta(2)\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"md`### Data setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"years_tick_array = Array(year_max - year_min + 2)\n .fill()\n .map((_, idx) => year_min - 1 + idx)","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"map_data_yearCumulative = years_tick_array.reduce(function(map, d) {\n map[d] = data_yearCumulative(d);\n return map;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"map_data_yearSlice = years_tick_array.reduce(function(map, d) {\n map[d] = data_yearSlice(d);\n return map;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"function data_yearCumulative(y) {\n return year_data_features_cumulative.find(d => {\n return d.year == y;\n }) != null\n ? year_data_features_cumulative.find(d => {\n return d.year == y;\n }).data\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"function data_yearSlice(y) {\n return year_data_features.find(d => {\n return d.year == y;\n }) != null\n ? year_data_features.find(d => {\n return d.year == y;\n }).data\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"year_min = Number(year_data_features[0].year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"year_max = Number(year_data_features[year_data_features.length - 1].year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`## Data Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"md`### Outlines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"md`Geojson boundaries of Scotland + context:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"land = FileAttachment(\"land (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"md`Isle of Lewis geojson for annotations:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"lewis_sheets = FileAttachment(\"lewis_sheets.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"md`### Map Sheet Boundaries Geojson, and Imagery:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"md`\nIn this animation, the dates visualised are the sheet survey dates. \n\n[Information about and web map viewer for Ordnance Survey, One-inch to the mile maps of Scotland, 1st Edition - 1856-1891](https://maps.nls.uk/os/one-inch-1st/) from National Library of Scotland.\n\nThe data and imagery used in this notebook are provided by the National Library of Scotland. The data is available for re-use under the [Creative Commons Attribution Non-Commercial Share Alike 4.0 (CC BY-NC-SA 4.0) licence](https://creativecommons.org/licenses/by-nc-sa/4.0/\"). For more information visit https://maps.nls.uk/copyright.html. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"import {\n url_oneInch as url,\n one_inch_byYear as year_data_features,\n one_inch_byYear_cumulative as year_data_features_cumulative\n} from '235c58cad97f5dda'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"// Import Neuton Font from Google Fonts\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1311,"value":"chroma = {\n // Chroma.js libary https://gka.github.io/chroma.js/ written by Gregor Aisch.\n let chroma_url = await FileAttachment(\"chroma.min.js\").url();\n var chroma = (window.PolygonLookup = await require(chroma_url).catch(\n () => window.PolygonLookup\n ));\n return chroma;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-geo-projection@2\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}