31:T4d9,md`# SVG Cartography (NACIS 2019), part one _This notebook is the practical companion to my [NACIS 2019 presentation](http://axismaps.com/nacis2019) on desktop-like cartographic design tricks on web graphics, along with a similar notebook on [Canvas cartography](https://observablehq.com/d/3379040b71f37cbd)._ This is not a full explanation of mapping with SVG. The focus is on particular design techniques. You can copy and modify these examples to learn the techniques better, but you may prefer to do some outside reading if all of this is foreign to you. - [Intro to Observable](https://observablehq.com/@observablehq/user-manual). The main parts of the fortchoming code examples are ordinary JavaScript, but some bits are specific to making things work in this notebook environment. - D3 and [mapping with D3](https://www.d3indepth.com/geographic/). All the maps here use D3 to turn geographic data in screen pixels. D3 is complex and not at all explained here. There are many good resources to study, and D3 skill is very, very useful in web cartography! - [SVG tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial). Some basic SVG techniques and concepts are glossed over, so you may find an intro tutorial useful. `32:T5f6,coastalGlow = { const svg = d3.select(DOM.svg(width, height)); // append the element where filters, etc. are defined const defs = svg.append('defs'); // create/append the filter const filter = defs.append('filter') .attr('id', 'coastal-glow'); // the glow filter needs three parts: a blur, a color, and a composite of the two as its final result filter.append('feGaussianBlur') .attr('in', 'SourceAlpha') .attr('stdDeviation', 10) .attr('result', 'shadow'); filter.append('feFlood') .attr('flood-color', waterGlowColor) .attr('result', 'color'); filter.append('feComposite') .attr('in', 'color') .attr('in2', 'shadow') .attr('operator', 'in'); // water is a solid rectangle underneath everything const waterLayer = svg.append('g'); waterLayer.append('rect') .attr('width', width) .attr('height', height) .style('fill', waterColor); // this layer contains the glow (or shadow) // it draws the states but the filter applied here turns them fuzzy and blue const glowLayer = svg.append('g') .attr('filter', 'url(#coastal-glow)'); glowLayer.selectAll('path') .data(states) .enter() .append('path') .attr('d', geoPath); // finally, a normal land layer is drawn on top const statesLayer = svg.append('g'); statesLayer.selectAll('path') .data(states) .enter() .append('path') .attr('d', geoPath) .attr('fill', landColor) .attr('stroke', '#ccc'); return svg.node(); }33:T908,clipAndMaskExample = { const svg = d3.select(DOM.svg(600, 200)); svg.append('rect') .attr('width', '100%').attr('height', '100%').attr('fill', '#fafafa') const defs = svg.append('defs'); const clip = defs.append('clipPath') .attr('id', 'clippy') .attr('clipPathUnits', 'userSpaceOnuse'); clip.append('rect') .attr('x', 250) .attr('y', 50) .attr('height', 100) .attr('width', 100) .attr('fill', '#7f7f7f'); const mask = defs.append('mask') .attr('id', 'masky') .attr('maskUnits', 'userSpaceOnuse'); mask.append('rect') .attr('x', 450) .attr('y', 50) .attr('height', 100) .attr('width', 100) .attr('fill', '#7f7f7f'); svg.append('circle') .attr('cx', 250) .attr('cy', 50) .attr('r', 50) .attr('fill', '#58a2d8') .attr('clip-path', 'url(#clippy)'); svg.append('circle') .attr('cx', 450) .attr('cy', 50) .attr('r', 50) .attr('fill', '#58a2d8') .attr('mask', 'url(#masky)'); svg.append('circle') .attr('cx', 50) .attr('cy', 50) .attr('r', 50) .attr('fill', '#58a2d8'); svg.append('rect') .attr('x', 50) .attr('y', 50) .attr('height', 100) .attr('width', 100) .attr('fill', '#7f7f7f'); svg.append('circle') .attr('cx', 250) .attr('cy', 50) .attr('r', 50) .attr('fill', 'none') .attr('stroke', '#666') .attr('stroke-dasharray', '5 5'); svg.append('circle') .attr('cx', 450) .attr('cy', 50) .attr('r', 50) .attr('fill', 'none') .attr('stroke', '#666') .attr('stroke-dasharray', '5 5'); svg.append('rect') .attr('x', 250) .attr('y', 50) .attr('height', 100) .attr('width', 100) .attr('fill', 'none') .attr('stroke', '#666') .attr('stroke-dasharray', '5 5'); svg.append('rect') .attr('x', 450) .attr('y', 50) .attr('height', 100) .attr('width', 100) .attr('fill', 'none') .attr('stroke', '#666') .attr('stroke-dasharray', '5 5'); svg.append('text') .attr('x', 275) .attr('y', 175) .attr('text-anchor', 'middle') .text('Square as clipPath'); svg.append('text') .attr('x', 475) .attr('y', 175) .attr('text-anchor', 'middle') .text('Square as mask'); return svg.node(); }34:T5e4,coastalOffset = { const svg = d3.select(DOM.svg(width, height)); const defs = svg.append('defs'); // water background as usual const waterLayer = svg.append('g'); waterLayer.append('rect') .attr('width', width) .attr('height', height) .style('fill', waterColor); function addOffsetCoastline(distance) { const mask = defs.append('mask') .attr('id', `coastline${distance}`); mask.append('rect') .attr('width', width) .attr('height', height) .attr('fill', 'white'); mask.selectAll('path.black') .data(states) .enter() .append('path') .attr('class', 'black') .attr('stroke', 'black') .attr('stroke-linejoin', 'round') .attr('fill', 'none') .attr('stroke-width', distance - 2) .attr('d', geoPath); waterLayer.append('g') .selectAll('path') .data(states) .enter() .append('path') .attr('stroke', '#37656b') .attr('stroke-linejoin', 'round') .attr('fill', 'none') .attr('stroke-width', distance) .attr('mask', `url(#coastline${distance})`) .attr('d', geoPath); } addOffsetCoastline(40); addOffsetCoastline(20); addOffsetCoastline(10); // finally, the land on top const statesLayer = svg.append('g'); statesLayer.selectAll('path') .data(states) .enter() .append('path') .attr('d', geoPath) .attr('fill', landColor) .attr('stroke', '#37656b'); return svg.node(); }35:T1048,slightlyFancyPatterns = { const svg = d3.select(DOM.svg(width, height)); const defs = svg.append('defs'); const patternSize = 20; // this is a clipPath needed to cut circles into semicircles for the wave pattern defs.append('clipPath') .attr('id', 'patternClip') .attr('clipPathUnits', 'objectBoundingBox') // units will be as % of the object size to which this is applied .append('rect') .attr('x', 0) .attr('y', .5) // i.e. 50% of object height .attr('width', 1) .attr('height', .5); // 50% of object height // ^ in other words, the object will be clipped to show only its bottom half const waterPattern = defs.append('pattern') .attr('id', 'waterPattern') .attr('width', patternSize) .attr('height', patternSize * 1.5) .attr('patternUnits', 'userSpaceOnUse') // solid background waterPattern.append('rect') .attr('width', patternSize) .attr('height', patternSize * 2) .attr('fill', waterColor); const waves = waterPattern.append('g') .style('fill', 'none') .style('stroke', waterGlowColor) .style('stroke-width', 0.5) .attr('transform', 'scale(1, .75)'); // squished a bit vertically so waves aren't exactly circular // three semicircles: one centered at the top left corner, one at top right corner, and one kind of in the center // as the first two extend outside the pattern area, they're actually two quarter circles // ...forming this kind of shape: _/\_ waves.append('circle') .attr('clip-path', 'url(#patternClip)') .attr('cx', 0) .attr('cy', 0) .attr('r', patternSize * .5); waves.append('circle') .attr('clip-path', 'url(#patternClip)') .attr('cx', patternSize) .attr('cy', 0) .attr('r', patternSize * .5); // kind of centered // bottom half of a circle: \_/ waves.append('circle') .attr('clip-path', 'url(#patternClip)') .attr('cx', patternSize * .5) .attr('cy', patternSize) .attr('r', patternSize * .5); // see below for an image of what the above look like altogether // the land pattern works similarly but is simpler, just some dots const landPattern = defs.append('pattern') .attr('id', 'landPattern') .attr('width', patternSize) .attr('height', patternSize) .attr('patternUnits', 'userSpaceOnUse'); landPattern.append('rect') .attr('width', patternSize) .attr('height', patternSize) .attr('fill', landColor); const dotColor = '#eee'; // drawing dots could be done more concisely in a loop, but here they are explicitly landPattern.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', patternSize/2) .attr('cy', 0) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', patternSize) .attr('cy', 0) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', patternSize/4) .attr('cy', patternSize/2) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', 3 * patternSize/4) .attr('cy', patternSize/2) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', 0) .attr('cy', patternSize) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', patternSize/2) .attr('cy', patternSize) .attr('r', patternSize/8) .attr('fill', dotColor); landPattern.append('circle') .attr('cx', patternSize) .attr('cy', patternSize) .attr('r', patternSize/8) .attr('fill', dotColor); const waterLayer = svg.append('g'); waterLayer.append('rect') .attr('width', width) .attr('height', height) .style('fill', 'url(#waterPattern)'); // use water pattern const statesLayer = svg.append('g'); statesLayer.selectAll('path') .data(states) .enter() .append('path') .attr('d', geoPath) .attr('fill', 'url(#landPattern)') // use land pattern .attr('stroke', '#ccc'); return svg.node(); }36:[] 2f:{"title":"SVG Cartography (NACIS 2019), part one","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md` ### Drawing a map with SVG\n\nWhile an SVG map could come straight out of graphics or GIS software, a web map most commonly draws itself from some geodata (usually GeoJSON). The examples here use D3, probably the best way to make bespoke web maps with total freedom of design. Other typical web mapping solutions like Leaflet will also render SVG, so many style tricks later on are still relevant.\n\nBelow is a typical, basic way to draw some GeoJSON to SVG. At the bottom of this notebook, some state features have been imported. We use a D3 map projection and path generator to translate GeoJSON data into SVG path data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"stateMap = {\n const svg = d3.select(DOM.svg(width, height));\n \n // never hurts to keep map layers in tidy groups\n const statesLayer = svg.append('g');\n \n // draw each state to an svg path\n statesLayer.selectAll('path')\n .data(states)\n .enter()\n .append('path')\n .attr('d', geoPath)\n .attr('fill', d => d.properties.color)\n .attr('stroke', '#ccc');\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md` ### Why use SVG for web maps? Styling and interaction are big reasons.\n\nSVG is great for web maps because browsers understand the markup natively, and you can maniuplate it mostly like any other web page element. Each state in our map, for example, can have its own CSS styles and interaction events. Contrast that to Canvas, whose contents are only pixels—any visual change requires explicit redrawing, and any interaction requires more complicated JavaScript tricks.\n\nFor the map below, we'll add a hover style with CSS, and attach a click event listener to each state. Hover and click on the map to see them in action. As you might imagine, a more complex version of something like this makes SVG very useful for dynamic, interactive maps.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"stateMapWithHover = {\n const svg = d3.select(DOM.svg(width, height));\n \n // A little text field to appear when states are clicked\n const label = svg.append('text')\n .attr('text-anchor', 'end')\n .attr('x', width - 10)\n .attr('y', height - 10);\n \n const statesLayer = svg.append('g')\n .attr('class', 'hover-example');\n \n statesLayer.selectAll('path')\n .data(states)\n .enter()\n .append('path')\n .attr('d', geoPath)\n .attr('fill', d => d.properties.color)\n .attr('stroke', '#ccc')\n .on('click', (d) => { label.text(`You clicked ${d.properties.name}!`); });\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`# Filters`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`# Clipping and masking`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`# Patterns\n\nA \\`\\` defines a repeating graphic that can be used as a fill. It's no different from Illustrator, really. Create a (likely small) graphic, call it a pattern, and then specify the pattern as an object's fill rather than a color.\n\nThe pattern needs to be given a \\`width\\` and \\`height\\`, so that it knows how big an area to repeat, and possibly a \\`patternUnits\\` value to understand what the sizes and coordinates mean. For the sake of clarity, it's easiest to specify this as \\`userSpaceOnUse\\`.\n\nThe map below uses a pattern fill for water that looks like this:\n\\`\\`\\`\n\n \n\n\\`\\`\\`\n\nThen, the background water rectangle invokes the pattern as its \\`fill\\` attribute:\n\n\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"simplePattern = {\n const svg = d3.select(DOM.svg(width, height));\n \n // append the element where filters, etc. are defined\n const defs = svg.append('defs');\n \n const patternSize = 10;\n const waterPattern = defs.append('pattern')\n .attr('id', 'waterDotPattern')\n .attr('width', patternSize)\n .attr('height', patternSize)\n .attr('patternUnits', 'userSpaceOnUse')\n waterPattern.append('circle')\n .attr('cx', patternSize / 2)\n .attr('cy', patternSize / 2)\n .attr('r', patternSize / 4)\n .attr('fill', waterColor);\n \n const waterLayer = svg.append('g');\n waterLayer.append('rect')\n .attr('width', width)\n .attr('height', height)\n .style('fill', 'url(#waterDotPattern)');\n \n // a normal land layer is drawn on top\n const statesLayer = svg.append('g');\n statesLayer.selectAll('path')\n .data(states)\n .enter()\n .append('path')\n .attr('d', geoPath)\n .attr('fill', landColor)\n .attr('stroke', '#ccc');\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`A pattern does not need to contain only a single element, however. It can contain any graphics or collections of graphics, affected by things like filters and clipping paths as needed.\n\nThe map below uses more complex patterns for water and land, the former being made up of several clipped and transformed circles, and the latter being multiple dots with different offsets so as to avoid such a rigid grid appearance.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`Here are those two patterns in isolation, enlarged for visibility. In the water pattern, perhaps you can see how it comprises pieces of circles, squashed a bit vertically.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`The land pattern is simply dots on a rectangle. As with any pattern, care must be taken that edges match up with each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`## Part two: combining effects\n\nThe last few examples are split into their own notebook, to keep this one from getting too bogged down. (Lesson: too much SVG on a page will slow things down, so choose your design effects wisely!)\n\n### [_Continue to Part Two..._](https://observablehq.com/d/5dd62606489f1751)\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`### More code\n\nBelow are some imported libraries and some variables that are used in the examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"waterColor = '#EAF1F2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"waterGlowColor = '#9fd8e0'","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"landColor = '#fff6e6'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"mapColors = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#a65628','#f781bf','#ff7f00','#f781bf','#999999']","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"geoPath = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"projection = d3.geoEqualEarth()\n .translate([width/2, height/2])\n .rotate([70.9, 0])\n .center([0, 42.361445])\n .scale(13000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"states = d3.json('https://gist.githubusercontent.com/awoodruff/c58d270da0a1e925e7ba3ff629fdfed7/raw/d8bd17698e65b901dc124a08252c7bce4f8a9fcb/states.geojson').then(json => json.features.map((d, i) => {\n // assign a color value to each state\n d.properties = Object.assign(d.properties, {color: mapColors[i]});\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}