2b:null 2c:["$","title",null,{"children":"Shorelines and labels | Tom Shanley | Observable"}] 31:T13d6,map = { const container = d3.create("div"); container.style("position", "relative"); const canvas = container.append('canvas').node(); const context = canvas.getContext('2d'); canvas.width = svgWidth; canvas.height = svgHeight; const svg = container .append('svg') .attr("width", svgWidth) .attr("height", svgHeight) .style("position", "absolute") .style("top", '0px') .style("left", '0px'); /////////////////////////////////////// // CANVAS SHORELINES context.beginPath(); context.fillStyle = backgroundColour; context.rect(0, 0, svgWidth, svgHeight); context.fill(); const shorePath = d3 .geoPath() .projection(projection) .context(context); canvas.style.top = '0'; canvas.style.left = '0'; context.lineJoin = "round"; context.lineCap = "round"; for (var i = nShores; i > 0; i--) { shoreMap.features.forEach(function(d) { let w = i * i; w = i < 3 ? w + 1 : w; let blueWidth = i < 3 ? w + 2 : w + shoreLineWidth; let backgroundWidth = w; //draw a blue stroke context.globalAlpha = 1 - i / nShores; context.beginPath(); shorePath(d); context.lineWidth = blueWidth; context.fillStyle = backgroundColour; context.fill(); context.strokeStyle = "#294071"; context.stroke(); //draw a background colour stroke context.globalAlpha = 1; context.beginPath(); shorePath(d); context.lineWidth = backgroundWidth; context.fillStyle = backgroundColour; context.fill(); context.strokeStyle = backgroundColour; context.stroke(); }); } /////////////////////////////////////// // SVG AREAS let areas = svg.append("g").attr("id", "areas"); let borders = svg.append("g").attr("id", "borders"); //////////////////////////////////////////// let borderWidth = 8; borders .append("rect") .attr("width", svgWidth) .attr("height", svgHeight) .style("fill", "none") .style("stroke", backgroundColour) .style("stroke-width", borderWidth * 2); borders .append("rect") .attr("width", svgWidth) .attr("height", svgHeight) .style("fill", "none") .style("stroke", "#180601") .style("stroke-width", "2"); borders .append("rect") .attr("x", borderWidth) .attr("y", borderWidth) .attr("width", svgWidth - borderWidth * 2) .attr("height", svgHeight - borderWidth * 2) .style("fill", "none") .style("stroke", "#180601") .style("stroke-width", "3"); ///////////////////////////////////////////////////////////////////// let area = areas .selectAll(".area") .data(chchMap.features) .enter() .append("g") .attr("id", d => d.properties.AU2017_NAM); area .append("path") .attr("class", "area") .attr("id", (d, i) => "area-" + i) .attr("d", path) .style("fill", d3.rgb(backgroundColour).darker(0.2)); let areaNames = area .append("text") .attr("class", "area-label") .text(d => d.properties.AU2017_NAM) .style("text-anchor", "middle") .style("fill", "grey") .style("font-size", "10px") .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1]); document.body.appendChild(container.node()); area.each(function(d, i) { let areaPath = d3.select(this).select("path"); let areaBBox = areaPath.node().getBBox(); let nameBBox = d3 .select(this) .select("text") .node() .getBBox(); if (bboxIsWithinExtent(areaBBox, svgWidth, svgHeight)) { let widthAtCentroid = widthAtY(areaPath, path.centroid(d)[1], 5); if (widthAtCentroid.width > nameBBox.width + labelPadding.x) { d3.select(this) .select("text") .attr("x", (widthAtCentroid.x0 + widthAtCentroid.x1) / 2) .attr("y", path.centroid(d)[1]); } else { let thisAreaWidestPoint = widestPoint(areaPath, 6); if ( thisAreaWidestPoint.width > nameBBox.width + labelPadding.x && thisAreaWidestPoint.y > labelPadding.y && thisAreaWidestPoint.y < svgHeight - labelPadding.y ) { d3.select(this) .select("text") .attr("x", thisAreaWidestPoint.x) .attr("y", thisAreaWidestPoint.y); } else { d3.select(this) .select("text") .remove(); } } } else { //remove any areas not visible in the current view d3.select(this).remove(); } }); let pegasus = svg.append("g"); pegasus .append("path") .attr("d", "M 600 50 Q 700 240 900 250") .style("fill", "none") .style("stroke", "none") .attr("id", "pegasus"); let pegasusLabel = pegasus.append("text").style("fill", "grey"); pegasusLabel .append("textPath") .attr("xlink:href", "#pegasus") .text("Pegasus Bay") .attr("startOffset", "50%") .style("font-size", "48px") .style("letter-spacing", "3") .style("text-anchor", "middle"); container.remove(); return container.node(); }32:[{"id":"b0e21dc145f8cfcb267faefd6721ba9ffbebf579b42bdeaa7d73d0c06bf384b9e249e97f8f939219381ded7fc9fab5b97d37f7e4c5690efb1919d24532a8a129","href":"https://static.observableusercontent.com/files/b0e21dc145f8cfcb267faefd6721ba9ffbebf579b42bdeaa7d73d0c06bf384b9e249e97f8f939219381ded7fc9fab5b97d37f7e4c5690efb1919d24532a8a129","name":"chch_au_coast_2.geojson","type":"application/geo+json","lastModified":1589750939740.534,"size":1210911},{"id":"5932e3bef6eb3112a51b67788514edf1136d4794f9669242d7c626835126d554bac89f96008314e759f25e2d62b302c6364c57f7d8c729254f4c52269a9ce652","href":"https://static.observableusercontent.com/files/5932e3bef6eb3112a51b67788514edf1136d4794f9669242d7c626835126d554bac89f96008314e759f25e2d62b302c6364c57f7d8c729254f4c52269a9ce652","name":"chch_au_2.geojson","type":"application/geo+json","lastModified":1589750939740.534,"size":3010623}] 2f:{"id":"3e8ea6fd2b0de0d8","slug":"shorelines-and-labels","title":"Shorelines and labels","thumbnail":"ca4aa1cd2d031d16cf6277b7491295eb87bc9e8e438b2914bdb54ce0c97a63d9","access_level":"public","create_time":"$D2020-05-17T21:28:59.740Z","update_time":"$D2020-05-19T20:18:37.615Z","view_time":null,"first_public_time":"$D2020-05-19T01:40:09.083Z","fork":true,"stars":31,"starred":false,"owner":{"type":"team","id":"99730af1f05a2243","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":"starter_2024"},"version":905,"publish_version":905,"role":null,"authored":false,"authors":[{"type":"individual","id":"c74b60e30e894e8f","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":null}],"members":[{"type":"individual","id":"c74b60e30e894e8f","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"ca16deb4213d5143","slug":"d3-examples","title":"D3 examples","owner":{"id":"99730af1f05a2243","login":"tomshanley","name":"Tom Shanley"}},"type":"notebook","body":{"title":"Shorelines and labels","cells":[{"id":0,"value":"md`# Shorelines and labels\n\nWhile working on a previous map, I hacked together an approach for drawing shorelines, and a method to position labels at the centre of an area, or remove the label if there's not enough space in the area path.\n\nThe shorelines are created using ever increasing stroke widths alternating between the blue and background colour, and which fade per iteration.\n\nThe area labels does a brute force find of x coordinates for a given y, and calculates the available width. This width is used to decide whether to remove the label, or postion the label in the middle of the two x coordinates. As this approach is quite slow, the method first calculates the width for the path's centroid, and only if that doesn't have a good width, then it iterates throught the height of the path to find the widest part of the path.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"svgWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"svgHeight = svgWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"nShores = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"shoreLineWidth = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"backgroundColour = \"#edddce\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"labelPadding = ({ x: 15, y: 15 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"chchMap = FileAttachment(\"chch_au_2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"shoreMap = FileAttachment(\"chch_au_coast_2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## JS functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"function bboxIsWithinExtent(bbox, w, h) {\n let x = false;\n let y = false;\n\n if (bbox.x >= 0 && bbox.x <= w) {\n x = true;\n }\n if (bbox.x + bbox.width >= 0 && bbox.x + bbox.width <= w) {\n x = true;\n }\n if (bbox.x < 0 && bbox.x + bbox.width > w) {\n x = true;\n }\n\n if (bbox.y >= 0 && bbox.y <= h) {\n y = true;\n }\n if (bbox.y + bbox.height >= 0 && bbox.y + bbox.height <= h) {\n y = true;\n }\n if (bbox.y < 0 && bbox.y + bbox.height > h) {\n y = true;\n }\n return x && y ? true : false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"function widthAtY(area, y, increment) {\n let x0 = 0;\n let x1 = 0;\n let width = 0;\n\n let thisAreaNode = area.node();\n let areaLength = thisAreaNode.getTotalLength();\n let areaBBox = thisAreaNode.getBBox();\n\n for (let l = 0; l < areaLength; l = l + increment) {\n let point = thisAreaNode.getPointAtLength(l);\n if (point.y > y - increment && point.y < y + increment) {\n x0 = point.x < 0 ? 0 : point.x;\n break;\n }\n }\n\n for (let l = 0; l < areaLength; l = l + increment) {\n let point = thisAreaNode.getPointAtLength(areaLength - l);\n if (point.y > y - increment && point.y < y + increment) {\n x1 = point.x < 0 ? 0 : point.x;\n break;\n }\n }\n\n return { x0: x0, x1: x1, width: Math.abs(x0 - x1) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"function widestPoint(area, increment) {\n let thisAreaNode = area.node();\n let areaLength = thisAreaNode.getTotalLength();\n let areaBBox = thisAreaNode.getBBox();\n\n let bestY = 0;\n let bestX = 0;\n let bestWidth = 0;\n\n for (\n let y = areaBBox.y;\n y < areaBBox.y + areaBBox.height;\n y = y + increment\n ) {\n\n let thisWidth = widthAtY(area, y, increment);\n\n if (thisWidth.width > bestWidth) {\n bestWidth = thisWidth.width;\n bestX = (thisWidth.x0 + thisWidth.x1) / 2;\n bestY = y;\n }\n }\n\n return { x: bestX, y: bestY, width: bestWidth };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"projection = d3\n .geoMercator()\n .translate([svgWidth / 2, svgWidth / 2])\n .center([172.75, -43.6])\n .scale(275000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`## Styling, CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"