31:Tc9c,map = { const width = 960; const height = 600; const projection = d3 .geoAlbers() .rotate([0, 62, 0]) .fitSize([width - 40, height], nc); const path = d3.geoPath(projection); const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#fff"); svg .append("g") .selectAll("path") .data(nc.features) .enter() .append("path") .attr("d", path) .attr("transform", "translate(20, 0)") .attr("class", "counties") .attr("stroke", "#fff") .style("stroke-width", 2) .style("fill", d => colorScale(dataMap.get(d.properties.county))) .on("mouseover", d => d3 .selectAll(".mapCaption") .text( `${d.properties.county} County: ${formatPercent( dataMap.get(d.properties.county) )}` ) ) .on("mouseout", d => d3 .selectAll(".mapCaption") .text(`North Carolina: ${formatPercent(dataMap.get("State"))}`) ); const titleText = svg .append("text") .attr("transform", "translate(20, 40)") .style("fill", "#4b4b4b"); titleText .append("tspan") .attr("class", "mapTitle") .attr("font-size", "20") .text( `Percentage of the Population Age 65 and Older, North Carolina, ${ year > 2018 ? year + " (projected)" : year }` ); titleText .append("tspan") .attr("class", "mapCaption") .attr("font-size", "14") .text(`North Carolina: ${formatPercent(dataMap.get("State"))}`) .attr("dy", "1.4em") .attr("x", 0); svg.node().appendChild( createSVGtext({ text: "Urbanized areas are from the US Census Cartographic Boundary File, clipped to North Carolina. Demographic data derived from North Carolina Office of State Budget and Management (OSBM) estimates and projections: https://www.osbm.nc.gov/demog/county-projections", x: width * 0.05, y: height * 0.9, fill: "#4b4b4b", maxCharsPerLine: 80 }) ); let urbanized = svg .append("g") .selectAll("path") .data(nc_urbanized_areas.features) .enter() .append("path") .attr("d", path) .attr("transform", "translate(20, 0)") .attr("class", "urbanized-areas") .attr("stroke", "#4b4b4b") .style("stroke-width", 1) .style("fill", "none") .style("pointer-events", "none"); const legend = svg .append("g") .attr("class", "legend") .attr("transform", "translate(50,375)"); legend.node().appendChild(createLegendCells(colorScale)); svg.node().appendChild(urbanizedExample); svg .append("text") .attr("transform", "translate(280, 465)") .style("fill", "#4b4b4b") .text("Census Urbanized Areas"); // d3.select(svg.node().appendChild(urbanized.node().parentNode.cloneNode(true))) // .attr("transform","translate(20,20)"); d3.select(svg.node().appendChild(logo.childNodes[0].cloneNode(true))); d3.select(svg.node().appendChild(logo.childNodes[2].cloneNode(true))).attr( "transform", `translate(${width * 0.65},${height * 0.9}) scale(0.5)` ); return svg.node(); }32:T473,createLegendCells = (colorScale, scaleTitle = "Legend") => { let colorRange = colorScale.range().map(function(d, i, array) { let currentRange = colorScale.invertExtent(d).map(formatPercent); console.log(currentRange); let currentRangeText = `${currentRange[0]} to ${currentRange[1]}`; i == 0 ? (currentRangeText = `< ${currentRange[1]}`) : i == array.length - 1 ? (currentRangeText = `≥ ${currentRange[0]}`) : (currentRangeText = currentRangeText); return { color: d, range: currentRangeText }; }); let fontColor = "#4b4b4b"; return svg`Population Age 65 and Older${colorRange.map( (d, i) => `${ d.range }` )}`; }33:T3bb6,urbanizedExample = { return svg`` }34:[] 2f:{"title":"Percent 65 and Older, North Carolina","cells":[{"id":0,"value":"md`# Percent 65 and Older, North Carolina`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof year = slider({\n min: 2000,\n max: 2038,\n step: 1,\n value: 2018,\n title: \"Year\",\n description: \"Year of Population Data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"variable = \"percent_age65plus\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof colorScheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"domain = [0.1, 0.17, 0.24, 0.3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"function formatPercent(perc) {\n return perc\n ? perc.toLocaleString(undefined, {\n style: \"percent\",\n maximumSignificantDigits: 2\n })\n : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`Urbanized areas are from the [US Census Cartographic Boundary File](https://www.census.gov/geo/maps-data/data/cbf/cbf_ua.html), clipped to North Carolina.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"nc_urbanized_areas = d3.json(\"https://gist.githubusercontent.com/gallowayevan/60d3f0f67e80c5c5b5a4b4e199993f5b/raw/20edf0dd2092f8b2675116558ac8335697bd77c2/nc_urbanized_areas_simplified_clipped.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`Data derived from North Carolina Office of State Budget and Management (OSBM) estimates and projections: https://www.osbm.nc.gov/demog/county-projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"nc_young_old = d3.csv(\n \"https://gist.githubusercontent.com/gallowayevan/bbf977b0d96092a0e8bcc80542159f47/raw/069953d52fc0118a2227b85a453a8244076ad977/NCprojectionsbyagegrp2018_plus_percentages.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"dataMap = new Map(nc_young_old.filter(d=>d.year == year).map(d=> [d.county, d[variable]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`North Carolina county boundary file.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"colorScale = {\n const scheme = d3[\"scheme\" + colorScheme][6].slice(1);\n const scale = d3\n .scaleThreshold()\n .domain(domain)\n .range(scheme);\n\n return scale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nc = d3.json(\"https://gist.githubusercontent.com/gallowayevan/1b6056fdccb0aa0d860cbdee2bdf7597/raw/a7a6f4d80d077e74152e6c3196abdec9b899eb76/ncmap.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"schemes = [\"Blues\",\n \"Greens\",\n \"Greys\",\n \"Oranges\",\n \"Purples\",\n \"Reds\",\n \"BuGn\",\n \"BuPu\",\n \"GnBu\",\n \"OrRd\",\n \"PuBuGn\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrBr\",\n \"YlOrRd\"\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"import {logo} from \"@gallowayevan/sheps-health-workforce-nc-logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"import {createSVGtext} from \"@gallowayevan/svg-word-wrap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}