31:Taaf,map = { const width = 960; const height = 600; const rateFormat = d3.format('.2r'); 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=>getFill(d.properties.county)) .on("mouseover", d=> d3.selectAll(".mapCaption").text(`${d.properties.county} County: ${dataMap.get(d.properties.county)}`)) .on("mouseout", d=> d3.selectAll(".mapCaption").text(`North Carolina: ${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", "1.4rem") .text(`${variable.replace(/_/gi, " ")}, North Carolina, ${year}`); titleText .append("tspan") .attr("class", "mapCaption") .attr("font-size", "1rem") .text(`North Carolina: ${dataMap.get("State")}`) .attr("dy", "1.4em") .attr("x", 0); 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, variable.replace(/_/gi, " "))); 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*.65},${height*.9}) scale(0.5)`); return svg.node(); }32:T403,createLegendCells = (colorScale, scaleTitle = "Legend") => { let colorRange = colorScale.range().map(function(d,i, array){ let currentRange = colorScale.invertExtent(d).map(d3.format('.2d')); let currentRangeText = `${currentRange[0]}% to ${currentRange[1]}%`; i == 0 ? currentRangeText = `less than ${currentRange[1]}%` : i == array.length - 1 ? currentRangeText = `greater than ${currentRange[0]}%` : currentRangeText = currentRangeText; return {color: d, range: currentRangeText}; }); let fontColor = "#4b4b4b"; return svg`${scaleTitle}${colorRange.map((d, i)=>`${d.range}`)}`; }33:T3bb6,urbanizedExample = { return svg`` }34:[] 2f:{"title":"North Carolina's Aging Rural Population","cells":[{"id":0,"value":"md`# North Carolina's Aging Rural Population`","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: 2037, \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":"viewof variable = DOM.select(Object.getOwnPropertyNames(nc_young_old[0]).filter(d=>!(d==\"county\" || d==\"year\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof colorScheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof numberOfBins = slider({\n min: 3, \n max: 9, \n step: 1, \n value: 5, \n title: \"Number of Bins\", \n description: \"Select number of bins for each color scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof domainYear = slider({\n min: 2000, \n max: 2037, \n step: 1, \n value: 2018, \n title: \"Domain Year\", \n description: \"Year of Data to Use for Setting Legend\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"DOM.download(serialize(map), \"age_demographics_map.svg\", \"Download Map as SVG\")","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://cdn.rawgit.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(\"https://cdn.rawgit.com/gallowayevan/28e5c7bd785cd1aa1e0cf7658faf4e20/raw/81ddbc718d2d5c6aa543981212b1d323523fc8b6/nc_counties_young_old.csv\", function(d){\n return {\n county: d.county,\n year: +d.year,\n percent_65_and_over: +d.percent65,\n percent_under_18: +d.percent18,\n ratio_18_to_65: +d.ratio,\n median_age: +d.medage,\n percent_difference: +d.percentDifference,\n numeric_difference: +d.numericDifference,\n total: +d.total,\n under_18: +d.under18,\n over_65_inclusive: +d.over65inclusive\n\n }\n})\n\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 = {\t\t\t \t\t\t\n const scheme = d3[\"scheme\" + colorScheme][numberOfBins];\n const scale = cluster()\n \t\t\t\t\t\t.domain(domain)\n \t\t\t\t\t\t.range(scheme);\n \n \t\t\treturn scale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"domain = nc_young_old.filter(d=>d.year == domainYear && d.county != \"State\").map(d=> d[variable])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"getFill = (county) => {\n const currentValue = dataMap.get(county);\n \treturn currentValue == 0 ? \"#fff\" : colorScale(currentValue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nc = d3.json(\"https://cdn.rawgit.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":91,"value":"cluster = require(\"https://unpkg.com/d3-scale-cluster@1.1.7/dist/d3-scale-cluster.min.js\")","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":224,"value":"import {serialize} from \"@mbostock/saving-svg\"","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"}