Demonstration of D3 for simple atlas maps
This is a demonstration of using the javascript library D3.js with SVG to illustrate atlas maps for biological recording. Its an alternative to using pre-defined static maps images for broad-scale distributions. It is not an alternative to interactive atlas maps implemented with a slippy map technology like Leaflet.
Select a species from the drop-down below. Instead of loading a different image file, we download a small CSV file summarising the distribution (in this demonstration at hectad level). D3 is then used to generate SVG elements on the fly.
For each hectad I've chosen to illustrate a metric showing the number of tetrads within the hectad that have records, but obviously different metrics could be illustrated equally well. The demo uses size or colour (or both), to illustrate the metric. And, of course, each could be used to illustrate different metrics.
You can also select a CSV file from your own computer if you want to look at a different species. For this demo you will need to replicate the format excactly: two columns with headers 'Hectad' and 'Tetrads'. The Hectad column contains the references for any hectad (GB or Irish) that has records (don't include references for the hectads without records) and the Tetrads column contains a number between 1 and 25.
Transitions
D3 is good at animating the SVG object transitions as the data linked to the SVG objects changes. This enables us to give users a more engaging experience. There are many ways we could do this. To give you a feel for it, try altering some of the options below.
(D3 transitions)
Responsiveness
Scaleable Vector Graphics (SVG), as the name suggests, can be easily scaled to suit any viewport. So making maps responsive to different screen sizes, including mobile devices, is relatively easy. The map on this page is placed in a resizeable partition so that you can easy see how well (and quickly) it can respond to the size of the viewport.
← Drag this bar left and right.
You can see that it scales much more effectively than a static raster map image would.
Colours
Symbol colours: Min , Mid , Max
Map colours: Sea , Land , Outline , Grid
D3 and map projections
D3 provides excellent support for building map-based visualisations, for example by providing a projection functions to translate between map coordinates and SVG coordinates. Although D3 provides support for a number of global projections, there is no direct support for British National Grid. However if input data, such as the country boundary in this demo, are already projected in BNG then D3 can use a simple transformation can be used to display, so that's what we use here.
Symbol shapes
This demonstration uses only SVG circles. They are the easiest to implment because they are natively supported by SVG and no rotation of the symbol is required in Ireland. Squares (rectangles) are also natively supported by SVG but would require rotation in Ireland in order to be correctly oriented to the grid. Other symbols, e.g. triangles, can be implemented using other SVG primitives and would also require rotation in Ireland.
Although more complex, using symbols other than circles is perfectly doable. So if different shapes are required to represent different information facets (like the BTO map store's distribution change maps for example), then we should be able to support it in maps like these.
Grid reference systems and Island insets
Grid references are handled from any of these three formats: British National Grid, Irish Grid and UTM zone 30N for the Channel Islands where provided with the prefixes WA and WV (https://www.bwars.com/content/channel-islands-how-give-location-reference).
In this demonstration the map outline is taken from Natural Earth's 1:10m cultural vectors (https://www.naturalearthdata.com/downloads/10m-cultural-vectors/), but any source data can be used. The British Isles Grid Reference Javascript library (bigr library) being developed as part of this project (https://www.npmjs.com/package/brc-atlas-bigr) provides utilities to allow defined areas of a map to be translated to different locations on the displayed SVG (insets). This demonstration shows how this can be used to create insets for Channel Islands and the Northern Isles. (Note that the source boundary data is not changed - the translation is performed by D3's geoPath in conjunction with the transformations provided by our bigr library.)
Raster backdrops
It should be possible to display different raster images as backdrops, e.g. geology or soils, since displaying an image with SVG is straight forward. The only complicating factor is to scale and position them correctly.
Browser support
The main requirement is that a Browser supports SVG which most modern browsers do. I've tested it on Chrome, Firefox and MS Edge. Obviously it is very much reliant on Javascript being enabled too.
Fun stuff