30:T591,md`# Macromap ## An interactive ‘small multiples’ visualisation for historical map collections.

Small Multiples Interactive Web Map Index Map Timeline Faceted WebGL PIXI.js D3.js How can we get a handle on very large, partially-digitised collections of maps? We need a map of the maps. Macromap is designed to help researchers understand what map sheets the British Ordnance Survey (OS) made, when and where. In addition, it illuminates what’s been digitised: a lot, but not everything. The interface could also be used with other historical maps and map series metadata, and, more generally, to understand the shape of large-scale polygon datasets distributed over space and time. The OS, Britain’s national mapping agency, created large numbers of detailed maps from the early nineteenth century. Map series at different cartographic scales, in a sequence of editions, capture snapshots of a changing landscape through time. Macromap visualises data describing these maps, helping us see what is available. For more information, read [the blogpost](https://livingwithmachines.ac.uk/macromap-interactive-maps-in-time/).

`31:Tcd5,// Assemble the interface elements viewof app = { var dom = html`

`; var app = new PIXI.Application(width, height, { transparent: false, antialias: true, resolution: 1, backgroundColor }); let control_panel_div = html`

`; let guide_map = map.node(); let eye_crossed = control_panel_div.appendChild( html`

Hide Control Panel

${eye_crossed_icon}

` ); eye_crossed.addEventListener("click", function hide() { d3.select("#control_panel_div") .style("opacity", 1) .transition() .duration(500) .style("opacity", 0) .on("end", function () { d3.select("#control_panel_div").style("display", "none"); }); }); control_panel_div.appendChild(guide_map); let table = html``, row1 = html``, row1_l = html``, row2_l = html`

`, row1_r = html`	`, row2 = html`
`, row2_r = html`	`; row1.appendChild(row1_l); row1.appendChild(row1_r); row2.appendChild(row2_l); row2.appendChild(row2_r); row2_l.appendChild(viewof colour_undigitised_toggle); let time_step_div = html` ${viewof time_step} year time step `; row1_l.appendChild(time_step_div); row1_r.appendChild(viewof outlines_toggle); row2_r.appendChild(viewof tooltip_toggle); table.appendChild(row1); table.appendChild(row2); control_panel_div.appendChild(table); let sheet_table_header = html` Sheet image links`; control_panel_div.appendChild(sheet_table_header); let div = html` `; control_panel_div.appendChild(div); sheet_table_header.addEventListener("click", function hide_show() { if (d3.select("#chevron").attr("data-state") == "hidden") { d3.select("#chevron").attr("src", chevron_down); d3.select("#sheet_table_wrapper") .style("display", "block") .style("opacity", 0) .transition() .duration(500) .style("opacity", 1); d3.select("#chevron").attr("data-state", "shown"); } else { d3.select("#chevron").attr("src", chevron_up); d3.select("#sheet_table_wrapper") .style("opacity", 1) .transition() .duration(500) .style("opacity", 0) .on("end", function () { d3.select("#sheet_table_wrapper").style("display", "none"); }); d3.select("#chevron").attr("data-state", "hidden"); } }); dom.appendChild(control_panel_div); dom.appendChild(mutable svg); let eye_open = dom.appendChild( html` Show Control Panel ${eye_icon} ` ); eye_open.addEventListener("click", function show() { d3.select("#control_panel_div") .style("display", "block") .style("opacity", 0) .transition() .duration(500) .style("opacity", 1); }); dom.appendChild(mutable svg_tooltip); dom.appendChild(app.view); dom.value = app; yield dom; invalidation.then(() => { app.destroy(); }); }32:T4dd,md` ## Historical OS Maps Data The data used in this notebook (except for the 'Old Series') is provided by the [National Library of Scotland](https://maps.nls.uk/). 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. 'Old Series' maps, 1 inch to the mile, England and Wales. [Map sheet boundary data](https://www.charlesclosesociety.org/KMLFILE) from [The Charles Close Society](https://charlesclosesociety.org/). Dates from Hellyer, R. and Oliver, R.R., 2015. [The First Ordnance Survey Map: A History and Cartobibliography of the One-Inch Old Series of England and Wales](https://www.charlesclosesociety.org/bookshop). Charles Close Society. ### Ireland [The OS created maps of Ireland](https://osi.ie/about/history/) within this period, but these are not present in Macromap. This reflects NLS's holdings and scanning programme. OS history in Ireland is the subject of a new research project: [OS200 'Digitally Re-Mapping Ireland’s Ordnance Survey Heritage'](https://storymaps.arcgis.com/stories/7cedc565e15e4ba58444f9eaf435d1de). `33:Ta0a,new_data_md = md` ## Visualise Different Data ### Getting Data into Observable Macromap is designed for exploring large-scale geospatial polygon datasets (in GeoJSON format) with a time dimension. There are various ways to get data into an Observable notebook. Here, the data is imported via [File Attachments](https://observablehq.com/@observablehq/file-attachments). There is a [file-size limit](https://observablehq.com/@observablehq/file-attachments) for attachments (as of Nov 2021: 50MB per file, rolling quota of 1GB over a 28 day period per user). To reduce the filesize of GeoJSON, you can convert it to the more compact [TopoJSON format](https://github.com/topojson/topojson). ([Mapshaper](https://mapshaper.org/) is an easy way to do this). Alternatively, files can be imported [via databases or APIs](https://observablehq.com/@observablehq/introduction-to-data), [cloud files](https://observablehq.com/@observablehq/cloud-files) (e.g. connecting to Microsoft OneDrive or Google Drive) or [temporary local uploads](https://observablehq.com/@observablehq/input-file?collection=@observablehq/inputs). ### Expected Data Structure Macromap imports data via the \`\`data_to_draw\`\` cell. \`\`data_to_draw\`\` should be an array where each element represents a column in Macromap. Elements should look like: \`\`\`javascript { name: "1″ to the mile", // The name used for the horizontal axis data: {type: "FeatureCollection", features: [...]} // A GeoJSON FeatureCollection } \`\`\` Macromap is designed to draw GeoJSON \`\`Polygon\`\` geometries (not \`\`Point\`\` or \`\`LineString\`\` - you would need to adapt the PIXI code in \`\`stage\`\` to handle drawing these other geometries). For each GeoJSON Feature, the expected keys are: \`\`\`javascript properties: { YEAR: 1854, // Used to organise data vertically by date TOOLTIP: "Series: Ordnance Survey, 25 inch to the mile Su…", // Message that appears in tooltip on hover // Keys below used to populate the 'Sheet image links' table SHEET: "Devon CXXII.5", EDITION: "1", IMAGEURL: "https://maps.nls.uk/view/136637336" } \`\`\` Macromap has an option in the control panel to colour undigitised sheets red. These sheets are identified by which have a non-null value for \`\`IMAGEURL\`\`. (Processing happens in \`\`data_binned\`\`). Be aware that if visualising very small map sheet polygons, the sheet outlines can [look strange when drawn](https://github.com/pixijs/pixijs/issues/4361). `34:Te48,technical_details_md = md` ## Technical Details There are several popular JavaScript libraries for making interactive web maps, including [Leaflet](https://leafletjs.com/), [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/) and [Openlayers](https://openlayers.org/). Leaflet has a [Leaflet.Sync plugin](https://github.com/jieter/Leaflet.Sync) that supports synchronised small multiples ([demo](https://r-spatial.github.io/mapview/articles/articles/mapview_05-extras.html#sync-latticeview), and used in [Maps By Decade](https://github.com/nypl-spacetime/maps-by-decade)). Synchronised views are also possible in Mapbox ([plugin code](https://github.com/mapbox/mapbox-gl-sync-move) and [demo](https://codesandbox.io/s/0jns3), alternative [demo](http://bl.ocks.org/boeric/f6ddea14600dc5093506)) and [Openlayers](https://openlayers.org/en/latest/examples/side-by-side.html). In order to create an interactive visualisation with a dataset of this size, it was necessary to use [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). Creating multiple separate web-map windows using WebGL starts to run into problems for larger numbers of multiples as [web browsers limit the number of allowed WebGL contexts](https://stackoverflow.com/questions/59140439/allowing-more-webgl-contexts). Additionally, keeping the small multiples within one canvas makes it possible to also manipulate that canvas: adjusting the time-step and supporting zoom, so particular time periods or map series can be focussed on. It, therefore, made sense in this case to use a general WebGL renderer (here [PIXI](https://github.com/pixijs/pixijs)) and visualisation code library ([D3](https://d3js.org/)). In Macromap, the small multiples grid is achieved by [masking](https://medium.com/goodboy-digital/pixi-js-brings-canvas-and-webgl-masking-7e23ddb3e887) all the visual elements (map polygons, base map tiles) for each multiple. The base map is included by rendering [XYZ slippy map tiles](https://en.wikipedia.org/wiki/Tiled_web_map) within the app using [D3’s XYZ tiles support](https://github.com/d3/d3-tile). ### Pan + Zoom Synchronising the zoom/pan of the control panel map with all the small multiples is done by keeping track of the zoom/pan applied to the control map. All the information needed to describe a zoom/pan is the translate {x, y}, and scale factor {k} (read more about using zoom with D3 [here](https://www.freecodecamp.org/news/get-ready-to-zoom-and-pan-like-a-pro-after-reading-this-in-depth-tutorial-5d963b0a153e/)). By keeping track of this, we can update the translate and scale of all the small multiples (created within [PIXI containers](https://pixijs.download/dev/docs/PIXI.Container.html), making this more straightforward to apply). ### Retrieving individual records with hover or click Retrieving the individual sheet records (quickly mapping from cursor position {x, y} to what polygons are beneath) is achieved using PIXI interaction support and a spatial index (a data structure that allows for accessing a spatial object efficiently). We used [Polygon Lookup](https://github.com/pelias/polygon-lookup). The small multiples are each created within a PIXI container, which support [interaction](https://api.pixijs.io/tutorials/_basics/interaction.html). We retrieve the hovered/clicked latitude/longitude by keeping track of the zoom applied to the canvas and control panel map and [inverting the map projection](https://github.com/d3/d3-geo#projection_invert) (to go from a point position {x, y} to a {lat, lon}). From this, we use Polygon Lookup to identify the polygons that intersect with that {lat, lon}. `35:T2369,mutable stage = { var stage = (app.stage = new PIXI.display.Stage()); // If this is not initial draw, check if sheet boundaries visible let sheet_boundaries_bool = mutable stroke_container_reference.length != 0 ? mutable stroke_container_reference[0].visible : false; // define container references, that we can access outside stage mutable map_container_reference = []; mutable stroke_container_reference = []; mutable smallMultiple_container_reference = []; mutable tile_container_reference = []; invalidation.then(() => { stage.destroy(); }); for (let i = 0; i < data_binned.length; i++) { for (let step = 0; step < data_binned[i].data_binned.length; step++) { if (data_binned[i].data_binned[step].length > 0) { // set up new map_container with containers for strokes and polygons within var map_container = new PIXI.Container(); map_container.position.x = centerOffsetX + mapOffset * i; map_container.position.y = centerOffsetY + mapOffset * step; // Add mask see https://medium.com/goodboy-digital/pixi-js-brings-canvas-and-webgl-masking-7e23ddb3e887 var box_mask = new PIXI.Graphics(); box_mask.beginFill(); box_mask.drawRect(0, 0, map_width, map_width); box_mask.endFill(); map_container.addChild(box_mask); var map_smallMultiple_container = new PIXI.Container(); var stroke_layer = new PIXI.Container(); var polygons_layer = new PIXI.Container(); var map_tiles_layer = new PIXI.Container(); mutable tile_container_reference.push(map_tiles_layer); var stroke_graphics = new PIXI.Graphics(); var polygon_graphics = new PIXI.Graphics(); var box_background_graphics = new PIXI.Graphics(); let stroke_path = d3.geoPath(projection, stroke_graphics); let polygon_path = d3.geoPath(projection, polygon_graphics); stroke_graphics.lineStyle(0.05, sheet_boundary_colour, 1); let featureCollection = { type: "FeatureCollection", features: data_binned[i].data_binned[step] }; stroke_path(featureCollection); stroke_graphics.endFill(); stroke_layer.addChild(stroke_graphics); // Grey box background box_background_graphics.beginFill(box_background_colour); box_background_graphics.drawRect(0, 0, map_width, map_width); box_background_graphics.endFill(); if (colour_undigitised_toggle == "true") { let featureCollection_digitised = { type: "FeatureCollection", features: data_binned[i].data_binned_digitisationStatus[step].digitised }, featureCollection_undigitised = { type: "FeatureCollection", features: data_binned[i].data_binned_digitisationStatus[step].undigitised }; polygon_graphics.beginFill(0x80b1d3, 0.5); polygon_path(featureCollection_digitised); polygon_graphics.beginFill(0xfb8072, 0.5); polygon_path(featureCollection_undigitised); polygon_graphics.endFill(); } else { polygon_graphics.beginFill(0x80b1d3, 0.5); polygon_path(featureCollection); polygon_graphics.endFill(); } // // For each map tile image, create a texture and a sprite for (let j = 0; j < mutable tiles.length; j++) { var map_tile_texture = new PIXI.Texture.fromImage( url(mutable tiles[j][0], mutable tiles[j][1], mutable tiles[j][2]), undefined, undefined, undefined ); let map_tile_sprite1 = new PIXI.Sprite(map_tile_texture); map_tile_sprite1.width = mutable tiles.scale; map_tile_sprite1.height = mutable tiles.scale; map_tile_sprite1.position.x = Math.round( (mutable tiles[j][0] + mutable tiles.translate[0]) * mutable tiles.scale ); map_tile_sprite1.position.y = Math.round( (mutable tiles[j][1] + mutable tiles.translate[1]) * mutable tiles.scale ); // Make slightly bigger tile beneath to hide join let map_tile_sprite2 = new PIXI.Sprite(map_tile_texture); map_tile_sprite2.width = mutable tiles.scale + 1; map_tile_sprite2.height = mutable tiles.scale + 1; map_tile_sprite2.position.x = Math.round( (mutable tiles[j][0] + mutable tiles.translate[0]) * mutable tiles.scale - 0.5 ); map_tile_sprite2.position.y = Math.round( (mutable tiles[j][1] + mutable tiles.translate[1]) * mutable tiles.scale - 0.5 ); map_tiles_layer.mask = box_mask; stroke_layer.mask = box_mask; polygons_layer.mask = box_mask; box_background_graphics.mask = box_mask; map_tiles_layer.addChild(map_tile_sprite2); map_tiles_layer.addChild(map_tile_sprite1); } map_container.hitArea = new PIXI.Rectangle(0, 0, map_width, map_width); map_container.interactive = true; polygons_layer.addChild(polygon_graphics); map_smallMultiple_container.addChild(box_background_graphics); map_smallMultiple_container.addChild(map_tiles_layer); map_smallMultiple_container.addChild(polygons_layer); map_smallMultiple_container.addChild(stroke_layer); map_container.addChild(map_smallMultiple_container); stroke_layer.visible = sheet_boundaries_bool; mutable stroke_container_reference.push(stroke_layer); mutable map_container_reference.push({ x: i, y: step, map_container: map_container }); mutable smallMultiple_container_reference.push( map_smallMultiple_container ); stage.addChild(map_container); } } } // Zoom and Pan for the whole PIXI app canvas, NOT the individual web maps let zoomSide = true; var zoom = d3 .zoom() .scaleExtent([-20, 20]) .on("start", function() { mutable zooming = true; }) .on("zoom", function() { let e = d3.event.transform; for (let i = 0; i < mutable map_container_reference.length; i++) { mutable map_container_reference[ i ].map_container.scale.x = mutable map_container_reference[ i ].map_container.scale.y = e.k; mutable map_container_reference[i].map_container.position.x = e.x + centerOffsetX * e.k + mapOffset * mutable map_container_reference[i].x * e.k; mutable map_container_reference[i].map_container.position.y = e.y + centerOffsetY * e.k + mapOffset * mutable map_container_reference[i].y * e.k; } // rescale the time axis let time_y_range_rescaled = time_y_range.map(d => e.y + d * e.k); let time_y_rescaled = time_y.range(time_y_range_rescaled); d3.select("#time_y_axis").call( d3 .axisLeft() .scale(time_y_rescaled) .ticks((date_max_adjusted - date_min_adjusted) / time_step) .tickFormat(d3.format("d")) ); // call the axis // update the y offset d3.select("#yaxis").attr( "transform", `translate(${ e.x + centerOffsetX * e.k - 40 * e.k > 40 ? e.x + centerOffsetX * e.k - 40 * e.k : 40 },${centerOffsetY * e.k})` ); // scale the y axis tick styling d3.selectAll("#time_y_axis .tick line") .attr("x1", y_tick_x1 * e.k) .attr("stroke-width", `${map_padding * e.k}px`) .style("transform", `translate(2px, -${(map_padding * e.k) / 2}px)`); d3.selectAll("#time_y_axis .tick text").style( "transform", `translate(0px, -${(map_padding * e.k) / 2}px)` ); d3.selectAll("#time_y_axis .tick rect").attr( "transform", `translate(-44,-${map_padding * e.k + 4})` ); // remove the last tick on the time axis d3.selectAll("#time_y_axis .tick:last-of-type").remove(); // rescale the x axis let x_rescaled = scales_editions_x.range([ e.x, ((map_width + mapOffset) / 2) * (data_binned.length - 1) * e.k + e.x ]); d3.select("#scale_x_axis").call(d3.axisBottom().scale(x_rescaled)); // call the axis // update the x offset d3.select("#xaxis_svg").attr( "transform", `translate(${(centerOffsetX + map_width / 2) * e.k}, 0)` ); }) .on("end", function() { mutable zooming = false; }); d3.select(app.view).call(zoom); // By calling a programmatic zoom https://github.com/d3/d3-zoom#zoom_scaleBy, the current zoom is retained when redrawing in the application (eg. adding sheet boundaries, changing the time step of the y axis) d3.select(app.view).call(zoom.scaleBy, 1); return stage; }36:Tca0,// style control panel control_panel_style = html``37:T4e5,map = { // adapting https://observablehq.com/@d3/seamless-zoomable-map-tiles const svg = d3 .create("svg") .attr("viewBox", [0, 0, map_width, map_width]) .style("border-bottom", guide_map_border) .attr("width", map_width) .attr("height", map_width); const zoom = d3 .zoom() .scaleExtent([1 << 8, 1 << 22]) .extent([ [0, 0], [map_width, map_width] ]) .on("zoom", (event) => zoomed(d3.event.transform)); const levels = svg .append("g") .attr("pointer-events", "none") .selectAll("g") .data(deltas) .join("g") .style("opacity", null); function zoomed(transform) { mutable transform = transform; levels.each(function (delta) { const tiles = tiler.zoomDelta(delta)(transform); d3.select(this) .selectAll("image") .data(tiles, (d) => d) .join("image") .attr("xlink:href", (d) => url_controlPanel(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); }); } svg.call(zoom).call(zoom.transform, mutable transform); return svg; }38:T459,function updateTiles() { const tiles_translate = [ tileset.translate[0] - zoom_compare.x / tileset.scale, tileset.translate[1] - zoom_compare.y / tileset.scale ]; const tiles_scale = tileset.scale / zoom_compare.k; for (let i = 0; i < tile_container_reference.length; i++) { // destroy all existing tile image sprites tile_container_reference[i].removeChildren(); // create new tile sprites for (let j = 0; j < tileset.length; j++) { var map_tile_texture = new PIXI.Texture.fromImage( url(tileset[j][0], tileset[j][1], tileset[j][2]), undefined, undefined, undefined ); let map_tile_sprite1 = new PIXI.Sprite(map_tile_texture); map_tile_sprite1.width = tiles_scale; map_tile_sprite1.height = tiles_scale; map_tile_sprite1.position.x = (tileset[j][0] + tiles_translate[0]) * tiles_scale; map_tile_sprite1.position.y = (tileset[j][1] + tiles_translate[1]) * tiles_scale; tile_container_reference[i].addChild(map_tile_sprite1); } } // update tiles mutable tiles = tileset; }39:T850,UpdateHoverBehaviour_withZoomAndPan = { // make sure hover behaviour adjusts to inset zoom / pan for (let i = 0; i < map_container_reference.length; i++) { var mouseIn = false; map_container_reference[i].map_container.on( "mouseover", () => (mouseIn = true) ); map_container_reference[i].map_container.on( "mouseout", () => (mouseIn = false) ); map_container_reference[i].map_container.on("mousemove", onHover); function onHover(event) { if (mouseIn) { let hoverx = event.data.global.x, hovery = event.data.global.y; // get hoverx and hovery relative to the PIXI container zoom let hoverx_relative = (hoverx - this.position.x) / this.scale.x, hovery_relative = (hovery - this.position.y) / this.scale.y; // get hoverx and hovery relative to the inset map tiles zoom let hoverx_relative_inset = (hoverx_relative - mutable zoom_compare.x) / mutable zoom_compare.k, hovery_relative_inset = (hovery_relative - mutable zoom_compare.y) / mutable zoom_compare.k; let [hover_lng, hover_lat] = projection.invert([ hoverx_relative_inset, hovery_relative_inset ]); let hover_data = data_binned[ map_container_reference[i].x ].lookup.search(hover_lng, hover_lat, -1); // filter to date step hover_data = hover_data.features.filter(function (d) { return ( d.properties.YEAR >= time_y.ticks( (date_max_adjusted - date_min_adjusted) / Number(time_step) )[map_container_reference[i].y] && d.properties.YEAR < time_y.ticks( (date_max_adjusted - date_min_adjusted) / Number(time_step) )[map_container_reference[i].y + 1] ); }); mutable hover_data_sheets = hover_data; mutable hoveredSheet = hover_data .map((sheet) => sheet.properties.TOOLTIP) .join(" "); } else { mutable hoveredSheet = ""; } } } }3a:T418,// From Mike Bostock's 'Wrapping Long Labels' https://bl.ocks.org/mbostock/7555321 function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text .text() .split(/\s+/) .reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y"), dy = parseFloat(text.attr("dy")), tspan = text .text(null) .append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", dy + "em"); while ((word = words.pop())) { if (line[0] == " ") { line.shift(); } line.push(word); tspan.text(line.join(" ")); if ((tspan.node().getComputedTextLength() > width) \| (word == " ")) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text .append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); }3b:[{"id":"94a81cfa6cdaa7a5f471034cc8153c732100f1651ba56b4ef20d3bf36c45bcf93d9a4a4affebee3f1e5e07c882ac565ab5cf64d7173b16c5acdb5e306d23daeb","href":"https://static.observableusercontent.com/files/94a81cfa6cdaa7a5f471034cc8153c732100f1651ba56b4ef20d3bf36c45bcf93d9a4a4affebee3f1e5e07c882ac565ab5cf64d7173b16c5acdb5e306d23daeb","name":"pixi-filters.js","type":"application/javascript","lastModified":1605268077006.729,"size":85075},{"id":"349c11135bacf1ca4cc0d8e951c79d2462df4c13fdbee7a26cca9f0ba0823bb315fb25885887a8227371d57cf7ac17014affbef9caf28d9d36717f6b27861e18","href":"https://static.observableusercontent.com/files/349c11135bacf1ca4cc0d8e951c79d2462df4c13fdbee7a26cca9f0ba0823bb315fb25885887a8227371d57cf7ac17014affbef9caf28d9d36717f6b27861e18","name":"pixi.js","type":"application/javascript","lastModified":1605268077006.729,"size":1359205},{"id":"7651176dc3663bb2b6ae08ed29d9773eaef903ebc194186d7139978b7cff90c458c368263cc5e240414ace4cb3ec338d13432fce172abbac2ef81cebd3cdab9e","href":"https://static.observableusercontent.com/files/7651176dc3663bb2b6ae08ed29d9773eaef903ebc194186d7139978b7cff90c458c368263cc5e240414ace4cb3ec338d13432fce172abbac2ef81cebd3cdab9e","name":"pixi-layers.js","type":"application/javascript","lastModified":1605268077006.729,"size":29066},{"id":"59ba202bc6ace184c26350d19005c1f90db94364b10edfe1d1ff2e710249d83b795abbb9e2bd3e2bc2f809fda951099a97f41fcc4b67dfa0c3c3a0e4579daa02","href":"https://static.observableusercontent.com/files/59ba202bc6ace184c26350d19005c1f90db94364b10edfe1d1ff2e710249d83b795abbb9e2bd3e2bc2f809fda951099a97f41fcc4b67dfa0c3c3a0e4579daa02","name":"pixi-lights.js","type":"application/javascript","lastModified":1605268077006.729,"size":12003},{"id":"d3c7b3a4f568280243f7494b704bc44d52dddabf0cf7f46e813b42bd5df3801d3b67c3c3fdf73a8fa7b802043c78664a020dcbd3280d08815d5f8fd2238e3886","href":"https://static.observableusercontent.com/files/d3c7b3a4f568280243f7494b704bc44d52dddabf0cf7f46e813b42bd5df3801d3b67c3c3fdf73a8fa7b802043c78664a020dcbd3280d08815d5f8fd2238e3886","name":"data_25_clean_topo.json","type":"application/json","lastModified":1631185114806.111,"size":48567544},{"id":"d91c4f8e3145cc626994a4fabbdd32e34d8e9957b06312111773f4e0cf338fff3efa53e0acf47b6388bbd91be679c723e54610509d13ded0bdd50b6fe204b5cf","href":"https://static.observableusercontent.com/files/d91c4f8e3145cc626994a4fabbdd32e34d8e9957b06312111773f4e0cf338fff3efa53e0acf47b6388bbd91be679c723e54610509d13ded0bdd50b6fe204b5cf","name":"data_6_cleaned_topo@1.json","type":"application/json","lastModified":1631184639104.614,"size":15495186},{"id":"3d3347b7225ed5210599d05bd37c5bd67cc46d8eefd901fff539f0798161ed146f20e831784f2476dc97c7fa461b72700e9c1dad05e5c7b9ab11ccf0227d7248","href":"https://static.observableusercontent.com/files/3d3347b7225ed5210599d05bd37c5bd67cc46d8eefd901fff539f0798161ed146f20e831784f2476dc97c7fa461b72700e9c1dad05e5c7b9ab11ccf0227d7248","name":"data_1_clean_topo.json","type":"application/json","lastModified":1631184900128.922,"size":323759},{"id":"424fe75f15e4d47799f82a9c04afb5909ba50b39007b2028ff0bfcbf4caaffca6658b49a312137fb6c1ebe1b4a7b24610760ceb69ee99e18067dfd1022678468","href":"https://static.observableusercontent.com/files/424fe75f15e4d47799f82a9c04afb5909ba50b39007b2028ff0bfcbf4caaffca6658b49a312137fb6c1ebe1b4a7b24610760ceb69ee99e18067dfd1022678468","name":"3558019481543238880.svg","type":"image/svg+xml","lastModified":1631627881464.5,"size":439},{"id":"8ea0b4894bb5366f2f46ecaee6209c69d716f5b6cd86bcfd36355a6ed6dce22d20baad4b803310ff4d27995d9b28f6f19a1692bc201ea744eaf8dd42b2e9542d","href":"https://static.observableusercontent.com/files/8ea0b4894bb5366f2f46ecaee6209c69d716f5b6cd86bcfd36355a6ed6dce22d20baad4b803310ff4d27995d9b28f6f19a1692bc201ea744eaf8dd42b2e9542d","name":"15043963181543238880@1.svg","type":"image/svg+xml","lastModified":1631633426645.015,"size":295},{"id":"225f820ef059affe9d1e4cbad7dc027f9edac525adce95c48d7cc3759b7a73d26cfc1c349f5e4878e6f99756d4d943ed6563ee72db88d9c5c028f972d391736c","href":"https://static.observableusercontent.com/files/225f820ef059affe9d1e4cbad7dc027f9edac525adce95c48d7cc3759b7a73d26cfc1c349f5e4878e6f99756d4d943ed6563ee72db88d9c5c028f972d391736c","name":"3700266371543238866.svg","type":"image/svg+xml","lastModified":1631795736542.135,"size":248},{"id":"37b76f03b331c966754079912e07bcdc8b390e78b2bb76dd0e8e12dfd2befb8136b78ad3f98e8a353fd2e10e178bba5cc69ccddd62d0bc059f6678271e8862c1","href":"https://static.observableusercontent.com/files/37b76f03b331c966754079912e07bcdc8b390e78b2bb76dd0e8e12dfd2befb8136b78ad3f98e8a353fd2e10e178bba5cc69ccddd62d0bc059f6678271e8862c1","name":"6560620481543238868.svg","type":"image/svg+xml","lastModified":1631796048385.374,"size":247},{"id":"ee2a089eb83ef1681a7832dc99566c97501941b0e2c4e265fe9fce044c3c4149b43c6e68ae3cab8a62d57e01a7bde3b8254f49318858193f763f8a497b93eeec","href":"https://static.observableusercontent.com/files/ee2a089eb83ef1681a7832dc99566c97501941b0e2c4e265fe9fce044c3c4149b43c6e68ae3cab8a62d57e01a7bde3b8254f49318858193f763f8a497b93eeec","name":"old_series.json","type":"application/json","lastModified":1636646711740.181,"size":52717},{"id":"40e5f40419798367dc0d0a042e3bb1632bcd595e7446139ac57fa9dad2dbca7e77e89f6db42e962c69184e0d84da932871d2186c6a17bd6f699b7bc4678ff5e8","href":"https://static.observableusercontent.com/files/40e5f40419798367dc0d0a042e3bb1632bcd595e7446139ac57fa9dad2dbca7e77e89f6db42e962c69184e0d84da932871d2186c6a17bd6f699b7bc4678ff5e8","name":"Macromap_howTo.gif","type":"image/gif","lastModified":1637062740737.339,"size":11723109}] 2e:{"title":"Macromap","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2451,"value":"// from https://observablehq.com/@esperanc/full-screen-animation\nfullscreen_button = {\n function fullScreen(element) {\n if (element.requestFullScreen) {\n element.requestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n }\n }\n\n let button = html``;\n button.onclick = function () {\n fullScreen(viewof app);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2856,"value":"loading_message = md`${loading}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6934,"value":"md`\n \n \n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7339,"value":"md`## How to Use`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7336,"value":"FileAttachment(\"Macromap_howTo.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7227,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7219,"value":"time_md = md`### On Time in Historical OS Maps\nMacromap positions map sheets at a single year, but this is a simplification of the ‘when’ these OS maps represent—leaning on dates available in library metadata about the earliest possible survey, print, and revision dates for a given sheet. There can also be ambiguity for the earlier OS sheets, where sheets were sometimes partially revised (e.g. railway lines were added, but buildings were not updated), and the dates printed on the sheet were not updated. For more information, see ‘[Interpreting survey and revision dates](https://maps.nls.uk/os/6inch-england-and-wales/info1.html)’ and ‘[\"Railway\" additions and related variant states](https://maps.nls.uk/os/6inch/os_info4.html#editions)’, National Library of Scotland.\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6973,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7150,"value":"md`\n### Change the Basemap\nYou can use the same basemap for both the control panel and the multiples, or different ones. Basemaps are imported via a [tile server url](https://wiki.openstreetmap.org/wiki/Tile_servers). For the multiples, we use a low-contrast, monochrome basemap to make it easier to see the data drawn on top. We created the basemap style using [Mapbox Studio](https://www.mapbox.com/mapbox-studio). To change the basemap, see [Map Tiles](#map_tiles): \\`\\`url\\`\\` is the tileserver reference for the multiples and \\`\\`url_controlPanel\\`\\` for the control panel map. If you have problems using a different basemap url, it might be a [CORS issue](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (for workarounds see [1](https://observablehq.com/@alecglassford/so-fetch),[2](https://observablehq.com/@tomlarkworthy/fetchp)). \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":7119,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3944,"value":"code_md = md`\n---\n# Code \n## Table of Contents\n- [PIXI App](#PIXI_app)\n- [PIXI App setup](#PIXI_App_setup)\n- [Control panel: map and inputs](#control_panel)\n- [Web map zooming and panning transforms](#webMapzoom_pan)\n- [Tooltip on hover](#tooltip_onHover)\n- [Table of Sheets Data on Click](#table_of_sheets)\n- [Draw Axes](#draw_axes)\n- [Map Tiles](#map_tiles)\n- [Setup Map Projection](#setup_mapProjection)\n- [Create Scales](#createScales)\n- [Data processing](#dataProcessing)\n- [Data](#data_heading)\n- [Imports](#importsHeading)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6912,"value":"keyword_style = 'style=\"font-family:Source Sans Pro; font-size: 14px; background: #cdebea\"'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6617,"value":"PIXI_app = md`## PIXI App`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3679,"value":"md`Create the PIXI App:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3939,"value":"PIXI_App_setup = md`## PIXI App setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"width = window.screen.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"height = window.screen.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"backgroundColor = 0xFFFFFF","pinned":false,"hidden":false,"mode":"ojs"},{"id":6608,"value":"sheet_boundary_colour = 0x395639","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"box_background_colour = \"0xCCCFCF\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"centerOffsetX = 0\n// width / 2 - map_width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"map_padding = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"mapOffset = map_width + map_padding","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"centerOffsetY = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":3480,"value":"md`Expose these containers within the PIXI application as \\`\\`mutables\\`\\` so other cells can access their properties (eg. x and y transforms).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"mutable map_container_reference = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"mutable smallMultiple_container_reference = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"mutable tile_container_reference = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"mutable stroke_container_reference = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2937,"value":"control_panel = md`## Control panel: map and inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2920,"value":"md`Control panel elements are declared as cells below, but are moved into the main app by using \\`\\`dom.append\\`\\` (see the cell \\`\\`app\\`\\`)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4988,"value":"control_panel_border_colour = '#a5c5c5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"guide_map_border = `2px solid ${control_panel_border_colour}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5002,"value":"control_panel_background_colour = '#eef4f4'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4942,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"viewof tooltip_toggle = checkbox({\n options: [{ value: true, label: \"Show sheet names on hover\" }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5724,"value":"viewof colour_undigitised_toggle = checkbox({\n options: [{ value: true, label: \"Colour undigitised sheets\" }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1298,"value":"viewof outlines_toggle = checkbox({\n options: [{ value: true, label: \"Show sheet outlines\" }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1840,"value":"// Time step dropdown in control panel\nviewof time_step = Inputs.select([50, 20, 10, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":7297,"value":"md`Control panel icon SVGs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5897,"value":"chevron_down = FileAttachment(\"3700266371543238866.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5905,"value":"chevron_up = FileAttachment(\"6560620481543238868.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5113,"value":"eye_icon = FileAttachment(\"15043963181543238880@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5017,"value":"eye_crossed_icon = FileAttachment(\"3558019481543238880.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2386,"value":"update_mapTiles_with_timeStep = {\n // If the time step updates, also update the base map tiles\n time_step;\n updateTiles();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"toggle_sheet_outlines = {\n // Toggle Sheet Outlines control\n if (!!outlines_toggle) {\n // show outlines\n for (let i = 0; i < mutable stroke_container_reference.length; i++) {\n mutable stroke_container_reference[i].visible = true;\n }\n } else {\n // don't show outlines\n for (let i = 0; i < mutable stroke_container_reference.length; i++) {\n mutable stroke_container_reference[i].visible = false;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3654,"value":"md`Draw zoomable map tiles for control panel map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"// zoom deltas\ndeltas = [-100, -4, -1, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3394,"value":"webMapzoom_pan = md`## Web map zooming and panning transforms`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3466,"value":"md`These are the zoom transforms and functions for the small multiple maps, whose zoom+pan is synchronised with the control panel map. (Code controlling zoom and pan for the whole PIXI app canvas can be found in \\`\\`app\\`\\`)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"// d3.zoom() creates a new zoom behavior. The returned behavior, zoom, is both an object and a function, and is typically applied to selected elements via selection.call\n\nsmallMultiple_zoom = d3\n .zoom()\n .scaleExtent([9093, 67108864])\n .extent([[0, 0], [map_width, map_width]])\n .translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])\n .on(\"zoom\", () => {\n mutable transform = d3.event.transform;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7038,"value":"md`The \\`\\`transform\\`\\` object keeps track of the live zoom transform applied to the control panel map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"mutable transform = d3.zoomIdentity // d3.zoomIdentity = {k: 1, x: 0, y: 0}\n .translate(projection([0, 0])[0], projection([0, 0])[1])\n .scale(projection.scale() * 2 * Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7045,"value":"md`Since the initial zoom of the control map is not 0 (it's initialised to the projection, which is fitted to the geojson extent + viewport size), we need to keep a record of it's initial value, so that we can compare with the live value after any zooming/panning. We store the comparison in the \\`\\`zoom_compare\\`\\` object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"initial_zoomTransform = d3.zoomIdentity // d3.zoomIdentity = {k: 1, x: 0, y: 0}\n .translate(projection([0, 0])[0], projection([0, 0])[1])\n .scale(projection.scale() * 2 * Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"// compare the initial zoom settings with the current ones\nmutable zoom_compare = ({\n k: transform.k / initial_zoomTransform.k,\n x:\n transform.x -\n initial_zoomTransform.x +\n (1 - transform.k / initial_zoomTransform.k) * initial_zoomTransform.x,\n y:\n transform.y -\n initial_zoomTransform.y +\n (1 - transform.k / initial_zoomTransform.k) * initial_zoomTransform.y\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7055,"value":"md`The small multiples are drawn in PIXI within [containers](https://pixijs.download/dev/docs/PIXI.Container.html). This makes it straightforward to update their scale and translate by referring to \\`\\`zoom_compare\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"Update_smallMultiplesMaps_scaleAndTransform = {\n // Update scale and translate of small multiples maps\n for (let i = 0; i < smallMultiple_container_reference.length; i++) {\n smallMultiple_container_reference[\n i\n ].scale.x = smallMultiple_container_reference[i].scale.y = zoom_compare.k;\n smallMultiple_container_reference[i].position.x = zoom_compare.x;\n smallMultiple_container_reference[i].position.y = zoom_compare.y;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3477,"value":"md`Update which XYZ Map Tiles are displayed, and their size and positions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"checkCorrectTilesShown = {\n // tiling transform is purely powered by transform (k,x,y) unless the actual tile images change\n // check if the x,y,z's in the array part of tiles are different to those in tileset\n if (\n JSON.stringify(tiles.slice(0, tiles.length)) !==\n JSON.stringify(tileset.slice(0, tileset.length))\n ) {\n updateTiles();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2380,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2769,"value":"tooltip_onHover = md`## Tooltip on hover`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2928,"value":"md`#### Identify hovered-over sheet:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"mutable hoveredSheet = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5759,"value":"mutable hover_data_sheets = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"mutable zooming = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":3029,"value":"md`#### If cursor over a map sheet, draw tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2773,"value":"// Create SVG element for tooltip\nmutable svg_tooltip = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2786,"value":"drawTooltip = {\n d3.select('#app_wrapper').on('mousemove', function() {\n if (hoveredSheet != \"\") {\n tooltip.call(callout, hoveredSheet.replace(/ /g, ' '));\n tooltip.attr(\n \"transform\",\n `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})`\n );\n } else {\n tooltip.call(callout, null);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2783,"value":"// code from import { callout } from \"@d3/line-chart-with-tooltip\"\ncallout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n \n tooltip.style('display', 'block');\n g.style(\"pointer-events\", \"none\").style(\"font\", \"12px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"lightgray\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .text(value)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", 0)\n .style(\"font\", \"12px sans-serif\")\n .call(wrap, 300);\n\n // d3.selectAll('#tooltip text tspan')\n // .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n // .style(\"font-style\", (_, i) => (i == 1 ? \"italic\" : null));\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2792,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2778,"value":"noTooltip_zoom_pan = {\n // Don't display tooltip if zooming or panning, OR tooltip_toggle unchecked\n if (zooming \|\| !tooltip_toggle) {\n d3.select(svg_tooltip).style('display', 'none');\n } else {\n d3.select(svg_tooltip).style('display', 'block');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2780,"value":"tooltip = {\n app; // add tooltip again if app refreshes\n let tooltip = d3.select('#tooltip');\n return tooltip;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6263,"value":"table_of_sheets = md`## Table of Sheets Data on Click`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5780,"value":"get_sheetsData_onClick = {\n d3.select(\"#app_wrapper\")\n .select(\"canvas\")\n .on(\"click\", function () {\n // check no over control panel\n if (hover_data_sheets.length != 0) {\n mutable sheet_urls_onClick = hover_data_sheets\n .map((d) => d.properties)\n .map((d) => ({\n ...d,\n \"SHEET (link if digitised)\": {\n sheet: d.SHEET != \"\" ? d.SHEET : d.TOOLTIP.replace(\" \", \": \"),\n link: d.IMAGEURL\n }\n }));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5823,"value":"mutable sheet_urls_onClick = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":5808,"value":"mutable sheet_urls_table = Inputs.table(sheet_urls_onClick, {\n columns: [\"SHEET (link if digitised)\", \"EDITION\", \"YEAR\"],\n format: {\n \"SHEET (link if digitised)\": x =>\n x.link != \"\"\n ? html`${x.sheet}`\n : x.sheet,\n EDITION: x => html`	${x}`,\n YEAR: x => String(x)\n },\n width: {\n \"SHEET (link if digitised)\": 150,\n EDITION: 100,\n YEAR: 60\n },\n maxWidth: 400\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6004,"value":"update_sheets_table_onClick = {\n app;\n\n // change the initial table instruction message\n Array.from(document.querySelectorAll(\"td\")).find(\n (el) => el.textContent === \"No results.\"\n ) != null\n ? (Array.from(document.querySelectorAll(\"td\")).find(\n (el) => el.textContent === \"No results.\"\n ).textContent = \"Click sheets in app\")\n : null;\n\n // remove table from control panel\n document.getElementById(\"sheet_table_wrapper\").replaceChildren();\n // replace with updated table\n document.getElementById(\"sheet_table_wrapper\").appendChild(sheet_urls_table);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2097,"value":"draw_axes = md`## Draw Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3583,"value":"md`Create SVG element for axes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2022,"value":"// Create SVG element for axes\nmutable svg = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5642,"value":"md`Draw Vertical axis:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"time_y_axis = {\n let time_y_axis = d3.axisLeft();\n return time_y_axis\n .scale(time_y)\n .ticks((date_max_adjusted - date_min_adjusted) / Number(time_step))\n .tickFormat(d3.format(\"d\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"time_y_range = {\n let time_y_range = [];\n let time_y_range_length =\n (date_max_adjusted - date_min_adjusted) / Number(time_step) - 1;\n for (\n let i = 0;\n i <= (map_width + map_padding) * time_y_range_length;\n i += map_width + map_padding\n ) {\n time_y_range.push(i);\n }\n return time_y_range;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2020,"value":"ticks = time_y.ticks((date_max_adjusted - date_min_adjusted) / Number(time_step))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"draw_vertical_time_axis = {\n d3.selectAll(\"#time_y_axis .tick rect\").remove();\n d3.select(\"#time_y_axis\").call(time_y_axis);\n // remove the last tick on the time axis\n d3.selectAll(\"#time_y_axis .tick:last-of-type\").remove();\n // Add white background to text ticks\n d3.select(\"#time_y_axis path\").attr(\"display\", \"none\");\n d3.selectAll(\"#time_y_axis .tick line\")\n .attr(\"x1\", y_tick_x1)\n .attr(\"stroke-width\", `${map_padding}px`)\n .style(\"transform\", `translate(2px, -${map_padding / 2}px)`);\n\n d3.selectAll(\"#time_y_axis .tick text\").style(\n \"transform\",\n `translate(0px, -${map_padding / 2}px)`\n );\n\n d3.selectAll(\"#time_y_axis .tick\")\n .append(\"rect\")\n .attr(\"fill\", \"white\")\n .attr(\"opacity\", 0.6)\n .attr(\"width\", 40)\n .attr(\"height\", 18)\n .attr(\"transform\", `translate(-44,-${map_padding + 4})`)\n .lower();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5682,"value":"y_tick_x1 = 37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3339,"value":"md`Draw horizontal axis:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"horizontal_axis = {\n d3.selectAll(\"#scale_x_axis .tick rect\").remove();\n d3.select('#scale_x_axis').call(scales_editions_x_axis);\n // Add white background to text ticks\n d3.selectAll(\"#scale_x_axis .tick\")\n .append('rect')\n .attr('fill', control_panel_background_colour)\n .attr('opacity', 0.6)\n .attr('width', function() {\n return (\n d3\n .select(this.parentNode)\n .select('text')\n .node()\n .getBBox().width + 5\n );\n })\n .attr('height', 18)\n .attr('transform', function() {\n let bbox_width = d3\n .select(this.parentNode)\n .select('text')\n .node()\n .getBBox().width;\n return 'translate(' + -(bbox_width + 5) / 2 + ',7)';\n })\n .lower(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"md`SVG axis styling:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2237,"value":"axis_style = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3301,"value":"map_tiles = md`## Map Tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3483,"value":"md`[XYZ Map Tiles](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames) for basemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"mutable tiles = tile()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"tileset = tiler(transform)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"tiler = d3.tile().size([map_width, map_width]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"tile = d3\n .tile()\n .size([map_width, map_width])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6946,"value":"md`\nMultiples basemap \nThe basemap used here is made in Mapbox Studio (see function below). You can change the basemap by swapping in a different url in the function \\`\\`url\\`\\`. [Tile url examples](https://wiki.openstreetmap.org/wiki/Tile_servers).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"url = (x, y, z) =>\n `https://api.mapbox.com/styles/v1/oliviav/ck7apvdm301ez1ioc84j95kbe/tiles/256/${z}/${x}/${y}@2x?access_token=pk.eyJ1Ijoib2xpdmlhdiIsImEiOiJja3ZzOHFxNm4zMTE2Mm90a3Q4OTBuM3diIn0.tCQXKtgffRjIQ1PPQE7RbQ`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7357,"value":"md`Control panel map basemap:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7346,"value":"url_controlPanel = (x, y, z) =>\n `https://tile.openstreetmap.org/${z}/${x}/${y}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3240,"value":"setup_mapProjection = md`## Setup Map Projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"map_width = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"projection = d3.geoMercator().fitExtent([[0, 0], [map_width, map_width]], {\n type: 'FeatureCollection',\n features: data_to_draw\n .map(d => d.data)\n .map(d => d.features)\n .flat()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3236,"value":"createScales = md`## Create Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3256,"value":"md`### Horiztonal scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2138,"value":"scales_editions_x = d3\n .scalePoint()\n .domain(data_binned.map(d => d.name))\n .range([0, (map_width + mapOffset) * (data_binned.length - 1)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"scales_editions_x_axis = d3.axisBottom().scale(scales_editions_x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1726,"value":"md`### Time scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"time_y = d3\n .scaleQuantize()\n .domain([date_min_adjusted, date_max_adjusted])\n .range(time_y_range)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"date_max_adjusted = Math.ceil(date_max / time_step) * Number(time_step) +\n Number(time_step)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1593,"value":"date_min_adjusted = Math.floor(date_min / time_step) * time_step","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"date_min = {\n let date_min_array = [];\n\n data_to_draw.forEach(function(d, i) {\n date_min_array.push(\n d3.min(d.data.features, function(d) {\n return d.properties.YEAR;\n })\n );\n });\n\n return parseInt(d3.min(date_min_array));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"date_max = {\n let date_max_array = [];\n\n data_to_draw.forEach(function(d, i) {\n date_max_array.push(\n d3.max(d.data.features, function(d) {\n return d.properties.YEAR;\n })\n );\n });\n\n return parseInt(d3.max(date_max_array));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"dataProcessing = md`## Data processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7083,"value":"md`Process \\`\\`data_to_draw\\`\\` in preparation for visualisation. For each map series:\n- the data is divided into buckets for each time step\n- divided by whether digitised or not (whether a feature has a value for \\`\\`properties.IMAGEURL\\`\\`)\n- and the polygon lookup structure is pre-computed to identify sheets via hover or click in the interface.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"data_binned = data_to_draw\n .map(function(d, i) {\n return {\n name: d.name,\n data: d.data,\n data_binned: bin(d.data.features),\n lookup: new PolygonLookup(d.data) // Needed to power the hover tooltip\n };\n })\n .map(d => ({\n ...d,\n data_binned_digitisationStatus: d.data_binned.map(k => ({\n digitised: k.filter(j => j.properties.IMAGEURL != \"\"),\n undigitised: k.filter(j => j.properties.IMAGEURL == \"\"),\n x0: k.x0,\n x1: k.x1\n }))\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"// function to bin data by time steps\nbin = d3\n .bin()\n .value(d => d.properties.YEAR)\n .domain(time_y.domain())\n .thresholds(time_y.ticks((date_max_adjusted - date_min_adjusted) / time_step)) // specify the time step","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"data_heading = md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"md`### Combine data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3662,"value":"md`Combine the datasets to be viusalised in the \\`\\`data_to_draw\\`\\` object. Use the key \\`\\`name\\`\\` to choose what these are called along the horizontal axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"data_to_draw = [\n {\n name: \"1″ to the mile\",\n data: data_1_clean\n },\n {\n name: \"6″ to the mile\",\n data: data_6_clean\n },\n {\n name: \"25″ to the mile\",\n data: data_25_clean\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"md`### Data Loading Message`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2859,"value":"{\n data_to_draw;\n mutable loading = ``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2854,"value":"mutable loading = `Please wait, data loading`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3143,"value":"md`### Data attachments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7110,"value":"md`The data used in this notebook (except for the 'Old Series') is 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\n'Old Series' maps, 1 inch to the mile, England and Wales. [Map sheet boundary data](https://www.charlesclosesociety.org/KMLFILE) from [The Charles Close Society](https://charlesclosesociety.org/). Dates from Hellyer, R. and Oliver, R.R., 2015. [The First Ordnance Survey Map: A History and Cartobibliography of the One-Inch Old Series of England and Wales](https://www.charlesclosesociety.org/bookshop). Charles Close Society.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"data_1_clean = {\n let data_1_clean = {\n type: \"FeatureCollection\",\n features: topojson\n .feature(one_inch_topojson, one_inch_topojson.objects.data_1_clean)\n .features.map((d) => ({\n ...d,\n properties: {\n YEAR: d.properties.YEAR,\n IMAGEURL: d.properties.IMAGEURL,\n SHEET: d.properties.SHEET,\n EDITION: d.properties.EDITION,\n TOOLTIP: d.properties.DATES\n }\n }))\n };\n\n data_1_clean = {\n type: \"FeatureCollection\",\n features: old_series.features.concat(data_1_clean.features)\n };\n\n return data_1_clean;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7304,"value":"old_series = FileAttachment(\"old_series.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3073,"value":"one_inch_topojson = FileAttachment(\"data_1_clean_topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3062,"value":"data_6_clean = ({\n type: \"FeatureCollection\",\n features: topojson\n .feature(six_inch_topojson, six_inch_topojson.objects.data_6_clean)\n .features.map((d) => ({\n ...d,\n properties: {\n YEAR: d.properties.YEAR,\n IMAGEURL: d.properties.IMAGEURL,\n SHEET: d.properties.SHEET,\n EDITION: d.properties.EDITION,\n TOOLTIP: d.properties.DATES\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3054,"value":"six_inch_topojson = FileAttachment(\"data_6_cleaned_topo@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3086,"value":"data_25_clean = ({\n type: \"FeatureCollection\",\n features: topojson\n .feature(\n twentyFive_inch_topojson,\n twentyFive_inch_topojson.objects.data_25_clean\n )\n .features.map((d) => ({\n ...d,\n properties: {\n YEAR: d.properties.YEAR,\n IMAGEURL: d.properties.IMAGEURL,\n SHEET: d.properties.SHEET,\n EDITION: d.properties.EDITION,\n TOOLTIP: d.properties.DATES\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3083,"value":"twentyFive_inch_topojson = FileAttachment(\"data_25_clean_topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"importsHeading = md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"PIXI = {\n // This uses Pixi JS V4;\n var pixi = await FileAttachment(\"pixi.js\").url();\n var layers = await FileAttachment(\"pixi-layers.js\").url();\n var lights = await FileAttachment(\"pixi-lights.js\").url();\n var filters = await FileAttachment(\"pixi-filters.js\").url();\n var PIXI = (window.PIXI = await require(pixi).catch(() => window.PIXI));\n PIXI.layers = await require(layers).catch(() => window.PIXI);\n PIXI.lights = await require(lights).catch(() => window.PIXI);\n await require(filters).catch(() => window.PIXI);\n return PIXI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\", \"d3-tile@1\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3059,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"import { checkbox, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2533,"value":"// https://github.com/pelias/polygon-lookup\nimport { PolygonLookup } from '@oliviafvane/heatmap-for-polygons'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7373,"value":"md`\n---\n## Credit and Thanks\nMacromap was created in the [Living with Machines project](https://livingwithmachines.ac.uk/) at [The British Library](https://www.bl.uk/) and [The Alan Turing Institute](https://www.turing.ac.uk/research/research-projects/living-machines). Design and code by Olivia Vane; ideas and writing developed with Katherine McDonough.\n\nWe would like to thank [Chris Fleet (Map Curator, NLS) and The National Library of Scotland Map Room team](https://maps.nls.uk/) for sharing this maps data. NLS’s metadata creation for the OS maps in their collection forms the essential basis for Macromap. We also thank [The Charles Close Society for the Study of Ordnance Survey Maps](https://www.charlesclosesociety.org/) for sharing metadata describing the OS ‘Old Series’. We thank both for their generous help.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}