32:T1033,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"); const radius = d3.scaleSqrt() .domain([0,bubbleDataExtent[1]]) .range([0, 30]); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#f5f5f5"); 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", function(d){ let metroStatus = omb_metro_map.get(d.properties.county.toUpperCase()); return metroStatus == "metro" ? "#f5f5f5" : "#bdbdbd"; }); // 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", "#bdbdbd") // .style("stroke-width", 1) // .style("fill", "none") // .style("pointer-events", "none"); svg.append("g") .attr("transform", "translate(20, 0)") .attr("class", "bubble") .selectAll("circle") .data(nc.features) .enter().append("circle") .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("r", d=>radius(dataMap.get(d.properties.county))) .attr("opacity", 0.9) .attr("fill", d=>getFill(d.properties.county)) .attr("stroke", "#000") .on("mouseover", d=> d3.selectAll(".mapCaption").text(`${d.properties.county} County: ${variable.replace(/_/gi, " ")} - ${dataMap.get(d.properties.county)} | Primary Care Rate Per 10k - ${primary_care_map.get(d.properties.county)}`)) .on("mouseout", d=> d3.selectAll(".mapCaption").text(`North Carolina: ${variable.replace(/_/gi, " ")} - ${dataMap.get("State")} | Primary Care Rate Per 10k - ${primary_care_map.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, " ")} and primary care physicians rate per 10k, North Carolina, ${year}`); titleText .append("tspan") .attr("class", "mapCaption") .attr("font-size", "1rem") .text(`North Carolina: ${variable.replace(/_/gi, " ")} - ${dataMap.get("State")} | Primary Care Rate Per 10k - ${primary_care_map.get('State')}`) .attr("dy", "1.4em") .attr("x", 0); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(50,375)"); legend.node().appendChild(createLegendCells(colorScale)); //https://bl.ocks.org/mbostock/9943478 var bubbleLegend = svg.append("g") .attr("class", "bubbleLegend") .attr("transform", "translate(" + (width*.25) + "," + (height*.8) + ")") .selectAll("g") .data(dataMapQuantiles) .enter().append("g"); bubbleLegend.append("circle") .attr("cy", function(d) { return -radius(d); }) .attr("r", radius); bubbleLegend.append("text") .attr("y", function(d) { return -2 * radius(d); }) .attr("dy", "1.3em") .text(d3.format(",")); bubbleLegend.append("text") .attr("y", 0) .attr("dy", "1.3em") .text(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)"); return svg.node(); }33:T6d5,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`Primary Care Physicians,Rate per 10k population0${colorRange.map((d, i)=>`${d.range}`)}Nonmetro`; }34:[] 30:{"title":"Primary Care Physicians vs Population Demographics, North Carolina","cells":[{"id":0,"value":"md`# Primary Care Physicians vs Population Demographics, North Carolina`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof year = slider({\n min: 2014, \n max: 2017, \n step: 1, \n value: 2017, \n title: \"Year\", \n description: \"Year of 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: 4, \n title: \"Number of Bins\", \n description: \"Select number of bins for each color scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Appendix`","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":209,"value":"md`Primary Care Physician data from the [North Carolina Health Professions Data System](https://nchealthworkforce.sirs.unc.edu/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"primary_care = d3.csv(\"https://cdn.rawgit.com/gallowayevan/f3d69e9a59b2e8406c99c6e75d1eb80a/raw/4db66619b7e96ac3fa9c1b565f9b86efa53a90ad/pc.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"primary_care_map = new Map(primary_care.filter(d=>d.year == year).map(d=> [d.county, +d.pc_rate]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"dataMapQuantiles =[0.005, 0.75, 1].map(d=>Math.round(d3.quantile(dataMapArray, d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"dataMapArray = nc_young_old.filter(d=>d.year == 2017 & d.county != \"State\").map(d=> d[variable]).sort((a,b)=>a-b)","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 = primary_care.filter(d=>d.year == 2017).map(d=> +d.pc_rate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"omb_metro_map = new Map(omb_metro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"omb_metro = d3.csv(\"https://cdn.rawgit.com/gallowayevan/4fd610654474c7207acd1204f683e609/raw/54822c257691fd518b43dc20e8149363f8e50c8f/tidy_metropop2015.csv\").then(d=>d.filter(d=>d.year == 2015).map(d=>[d.lcntyname, d.metro]))\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"getFill = (county) => {\n const currentValue = primary_care_map.get(county);\n \treturn currentValue == 0 ? \"#fff\" : colorScale(currentValue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"bubbleDataExtent = d3.extent(dataMapArray)","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"bubbleDataDomain = Array.from(dataMap.entries()).filter(d=>d[0] != \"State\").map(d=>d[1])","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":349,"value":"style = html``","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"}