2a:T1680,map = { function getPattern(areaName) { return patternScale(popAbsoluteData[areaName]); } const container = d3.create("div"); container.style("position", "relative"); const canvas = container.append('canvas').node(); const context = canvas.getContext('2d'); canvas.width = width; canvas.height = height; const svg = container .append('svg') .attr("width", width) .attr("height", height) .style("position", "absolute") .style("top", '0px') .style("left", '0px'); let defs = svg.append("defs").html(diverging12541021.patterns); let areas = svg.append("g").attr("id", "areas"); let areaLabels = svg.append("g").attr("id", "labels"); let borders = svg.append("g").attr("id", "borders"); let borderWidth = 8; borders .append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("stroke", "#edddce") .style("stroke-width", borderWidth * 2); borders .append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("stroke", "#180601") .style("stroke-width", "2"); borders .append("rect") .attr("x", borderWidth) .attr("y", borderWidth) .attr("width", width - borderWidth * 2) .attr("height", height - 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("d", path) .style("fill", function(d) { let p = getPattern(d.properties.AU2017_NAM); return p ? p : "#edddce"; }); let areaLabel = area .append("g") .attr("class", "area-label-g") .attr("id", d => "label-" + d.properties.AU2017_NAM); areaLabel .append("text") .attr("class", "area-label area-name") .text(function(d) { let p = getPattern(d.properties.AU2017_NAM); return p ? capitalise(d.properties.AU2017_NAM) : ""; }); areaLabel .append("text") .attr("class", "area-label") .text(function(d) { let p = getPattern(d.properties.AU2017_NAM); if (p) { let pct = Math.round(popPercentageData[d.properties.AU2017_NAM] * 100); let abs = Math.round(popAbsoluteData[d.properties.AU2017_NAM]); return abs + " (" + pct + "%)"; } }) .attr("y", 12); document.body.appendChild(container.node()); area.each(function(d, i) { let areaPath = d3.select(this).select("path"); let areaBBox = areaPath.node().getBBox(); if (popAbsoluteData.hasOwnProperty(d.properties.AU2017_NAM)) { let nameNode = d3 .select(this) .select(".area-name") .node(); if (nameNode != null) { let nameBBox = nameNode.getBBox(); if (bboxIsWithinExtent(areaBBox, width, height)) { let widthAtCentroid = widthAtY(areaPath, path.centroid(d)[1], 5); if (widthAtCentroid.width > nameBBox.width + labelPadding.x) { d3.select(this) .select(".area-label-g") .attr( "transform", "translate(" + (widthAtCentroid.x0 + widthAtCentroid.x1) / 2 + "," + path.centroid(d)[1] + ")" ); } else { let thisAreaWidestPoint = widestPoint(areaPath, 6); if ( thisAreaWidestPoint.width > nameBBox.width + labelPadding.x && thisAreaWidestPoint.y > labelPadding.y && thisAreaWidestPoint.y < height - labelPadding.y ) { d3.select(this) .select(".area-label-g") .attr( "transform", "translate(" + thisAreaWidestPoint.x + "," + thisAreaWidestPoint.y + ")" ); } else { d3.select(this) .select(".area-label-g") .remove(); } } } else { //remove any areas not visible in the current view d3.select(this).remove(); } } } }); if (displayShorelines.display) { /////////////////////////////////////// // CANVAS SHORELINES context.beginPath(); context.fillStyle = backgroundColour; context.rect(0, 0, width, height); 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(); }); } /////////////////////////////////////// } container.remove(); return container.node(); }2b:T1261,legend = { let legendHeight = 350; let legendHeaderHeight = 50; // interval rect ----count // 0 150 + 100 20 let intervalOffset = 0; let rectOffset = 130; let rectWidth = 100; let leaderLength = 50; let leaderOffset = rectOffset + rectWidth + 5; let countOffset = leaderOffset + leaderLength; let textYOffset = 6; let headerLineLength = 40; let legendData = []; let patternIDs = diverging12541021.rangeURLs; patternIDs.forEach(function(p, i) { let obj = {}; obj.patternID = p; obj.count = 0; if (i == 0) { obj.lower = -Infinity; obj.upper = thresholds[i]; obj.label = obj.upper + " and below"; } else if (i == patternIDs.length - 1) { obj.lower = thresholds[thresholds.length - 1]; obj.upper = Infinity; obj.label = obj.lower + " and above"; } else { obj.lower = thresholds[i - 1]; obj.upper = thresholds[i]; obj.label = obj.lower + " to " + obj.upper; } data.forEach(function(d) { if (d.absolute >= obj.lower && d.absolute < obj.upper) { obj.count = obj.count + 1; } }); legendData.push(obj); }); let legendScale = d3 .scaleBand() .range([legendHeight, 0]) .domain(patternIDs) .padding(0.2); let legendSVG = d3 .create('svg') .attr("width", width) .attr("height", legendHeight + legendHeaderHeight) .attr("id", "legend") .style("background-color", backgroundColour); let defs = legendSVG.append("defs").html(diverging12541021.patterns); let legendHeader = legendSVG .append("g") .attr("transform", "translate(0," + (legendHeaderHeight - 5) + ")"); let legendHeaderLabels = legendHeader .append("g") .attr("id", "legend-header-labels") .attr("transform", "translate(0," + -10 + ")"); let legendHeaderLines = legendHeader .append("g") .attr("id", "legend-header-lines"); legendHeaderLabels .append("text") .text("Intervals") .attr("class", "legend-header") .attr("x", rectOffset / 2) .style("text-anchor", "middle"); legendHeaderLabels .append("text") .text("Shades") .attr("class", "legend-header") .attr("x", rectOffset + rectWidth / 2) .style("text-anchor", "middle"); legendHeaderLabels .append("text") .text("No. of areas") .attr("class", "legend-header") .attr("x", countOffset) .style("text-anchor", "middle"); legendHeaderLines .append("line") .attr("class", "header-line") .attr("x1", rectOffset / 2 - headerLineLength / 2) .attr("x2", rectOffset / 2 + headerLineLength / 2) .attr("y1", 0) .attr("y2", 0) .style("stroke-width", 2); legendHeaderLines .append("line") .attr("class", "header-line") .attr("x1", rectOffset + rectWidth / 2 - headerLineLength / 2) .attr("x2", rectOffset + rectWidth / 2 + headerLineLength / 2) .attr("y1", 0) .attr("y2", 0) .style("stroke-width", 2); legendHeaderLines .append("line") .attr("class", "header-line") .attr("x1", countOffset - headerLineLength / 2) .attr("x2", countOffset + headerLineLength / 2) .attr("y1", 0) .attr("y2", 0) .style("stroke-width", 2); let legendItems = legendSVG .append("g") .attr("transform", "translate(0," + legendHeaderHeight + ")") .selectAll('.legend-item') .data(legendData) .enter() .append('g') .attr("transform", function(d) { return "translate(0, " + legendScale(d.patternID) + ")"; }); legendItems .append('text') .attr('class', "legend-label") .text(d => d.label) .attr("x", rectOffset / 2) .style("text-anchor", "middle") .attr("y", legendScale.bandwidth() / 2) .attr("dy", textYOffset); let legendRects = legendItems .append("g") .attr("transform", "translate(" + rectOffset + ",0)"); legendRects .append('rect') .attr('class', 'legend-shadow') .attr("width", rectWidth + 1) .attr("height", legendScale.bandwidth() + 1); legendRects .append('rect') .attr('class', 'legend-rect') .attr("width", rectWidth) .attr("height", legendScale.bandwidth()) .style("fill", d => d.patternID); legendItems .append('line') .attr('class', "legend-leader") .attr("x1", leaderOffset) .attr("y1", legendScale.bandwidth() / 2 + (textYOffset - 1)) .attr("x2", leaderOffset + leaderLength) .attr("y2", legendScale.bandwidth() / 2 + (textYOffset - 1)); legendItems .append('text') .attr('class', "legend-label") .text(d => d.count) .attr("x", countOffset) .attr("y", legendScale.bandwidth() / 2) .attr("dy", textYOffset); return legendSVG.node(); }2c:[{"id":"5932e3bef6eb3112a51b67788514edf1136d4794f9669242d7c626835126d554bac89f96008314e759f25e2d62b302c6364c57f7d8c729254f4c52269a9ce652","href":"https://static.observableusercontent.com/files/5932e3bef6eb3112a51b67788514edf1136d4794f9669242d7c626835126d554bac89f96008314e759f25e2d62b302c6364c57f7d8c729254f4c52269a9ce652","name":"chch_au_2.geojson","type":"application/geo+json","lastModified":1611606877113.572,"size":3010623},{"id":"b0e21dc145f8cfcb267faefd6721ba9ffbebf579b42bdeaa7d73d0c06bf384b9e249e97f8f939219381ded7fc9fab5b97d37f7e4c5690efb1919d24532a8a129","href":"https://static.observableusercontent.com/files/b0e21dc145f8cfcb267faefd6721ba9ffbebf579b42bdeaa7d73d0c06bf384b9e249e97f8f939219381ded7fc9fab5b97d37f7e4c5690efb1919d24532a8a129","name":"chch_au_coast_2.geojson","type":"application/geo+json","lastModified":1611606877113.572,"size":1210911},{"id":"36f38355ad1c51aab31336bd8d74a635596f27cf392583c2b8b60ab1ab231bf53a2893714b4e9b0ed8d14fe3e246b2cdf3dd3897249602ee006554c58e72b23a","href":"https://static.observableusercontent.com/files/36f38355ad1c51aab31336bd8d74a635596f27cf392583c2b8b60ab1ab231bf53a2893714b4e9b0ed8d14fe3e246b2cdf3dd3897249602ee006554c58e72b23a","name":"pop_change_fulllist.csv","type":"text/csv","lastModified":1611606877113.572,"size":3338}] 29:{"title":"Christchuch projected populations:","cells":[{"id":0,"value":"md`# Christchuch projected populations: \n# 0 to 14 year olds, 2018 to 2043\n\nA demonstration of using [Cheysson colour palettes](https://observablehq.com/@tomshanley/cheysson-color-palettes), in a D3 map.\n\n## Credits\n- Data: [Christchuch City Council and Stats NZ](https://ccc.govt.nz/culture-and-community/christchurch/statistics-and-facts/facts-stats-and-figures/population-and-demographics/population/future-pop/)\n- Design: RJ Andrews ([SVG area fill patterns](https://github.com/infowetrust/albumcolors))\n- Code: Mike Bostock ([Tweet](https://observablehq.com/@mbostock/tweet) and [Form Input](https://observablehq.com/@mbostock/form-input))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## The map\n\nThis map shows the projected change in population of 0-14 year olds in Christchuch areas from 2018 to 2043. This is based on Stats NZ data, and from the Christchurch City Council's future population analysis.\n\nThe map also includes a mimic of the shorelines from the original maps, which is created by cloning the path element of the coast a number times, and increasing the stroke-width with each clone. If you find the page is running quite slowly, you can disable it below. And below the map, there's a legend in the style of the original map too.\n\nFor comparison, the orginal map can be viewed [here](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~309182~90079076:Statistical-Diagram--Circulation-Sp?sort=Pub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No&qvq=w4s:/who%2FCheysson%25252C%2B%2525C3%252589mile;q:statistique%20graphique;sort:Pub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No;lc:RUMSEY~8~1&mi=122&trs=587).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`## Set up the palette scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"import { diverging12541021 } from \"@tomshanley/cheysson-color-palettes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"thresholds = [-90, -50, -10, 10, 50, 90]","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"patternScale = d3\n .scaleThreshold()\n .range(diverging12541021.rangeURLs)\n .domain(thresholds)","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"backgroundColour = \"#edddce\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof displayShorelines = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"width = 950","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"nShores = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"shoreLineWidth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"labelPadding = ({ x: 15, y: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"chchMap = FileAttachment(\"chch_au_2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"shoreMap = FileAttachment(\"chch_au_coast_2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"data = d3.csvParse(\n await FileAttachment(\"pop_change_fulllist.csv\").text(),\n convertTextToNumbers\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"popAbsoluteData = {\n let obj = {};\n data.forEach(function(d) {\n obj[d.area] = d.absolute;\n });\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"popPercentageData = {\n let obj = {};\n data.forEach(function(d) {\n obj[d.area] = d.percent;\n });\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`## JS functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"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"},{"id":550,"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"},{"id":553,"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 let testHeight = areaBBox.height - 15;\n\n for (let y = areaBBox.y; y < areaBBox.y + testHeight; y = y + increment) {\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"},{"id":20,"value":"function shoreOpacity(n, total) {\n return n % 2 == 0 ? 1 : n / total;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"function shoreWidth(n, total) {\n let s = total - n;\n let w = (Math.floor(s / 2) + 1) / 2;\n w = w * w * 2;\n w = n % 2 == 0 ? w : w + 1;\n return w;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"function shoreColour(n) {\n return n % 2 == 0 ? \"#edddce\" : \"#535D87\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"projection = d3\n .geoMercator()\n .translate([width / 2, height / 2])\n .center([172.7, -43.56])\n .scale(275000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"function round(n) {\n return Math.round(n * 10) / 10;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"function capitalise(t) {\n return t.toUpperCase();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"function convertTextToNumbers(d) {\n d.percent = +d.percent;\n d.absolute = +d.absolute;\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`## Styling, CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}