30:T950,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", "#3f3f3f"); svg.append("g") .selectAll("path") .data(nc.features) .enter() .append("path") .attr("d", path) .attr("transform", "translate(20, 0)") .attr("class", "counties") .attr("stroke", "#3f3f3f") .style("stroke-width", 2) .style("fill", d => getFill(d.properties.county)) .on("mouseover", d=> d3.selectAll(".mapCaption").text(makeCaptionText(d.properties.county))) .on("mouseout", d=> d3.selectAll(".mapCaption").text(makeCaptionText("North Carolina"))); const titleText = svg.append("text").attr("transform", "translate(20, 40)").style("fill", "#f0f0f0"); titleText .append("tspan") .attr("class", "mapTitle") .attr("font-size", "1.4rem") .text(totalOrRate == "rate" ? `Physicians per 10,000, North Carolina, ${year}` : `Number of Physicians, North Carolina, ${year}`); titleText .append("tspan") .attr("class", "mapCaption") .attr("font-size", "1rem") .text(makeCaptionText("North Carolina")) .attr("dy", "1.4em") .attr("x", 0); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(50,375)"); legend.node().appendChild(createLegendCells(metroColorScale, "Metro")); d3.select(legend.node().appendChild(createLegendCells(ruralColorScale, "Rural"))).attr("transform", "translate(175,0)"); function makeCaptionText(county){ let rate = 0; let total = 0; if(county == "North Carolina"){ rate = ncDataYear[0].rate; total = ncDataYear[0].total; } else { rate = dataMap.get(county).rate; total = dataMap.get(county).total; county = county + " County"; } return `${county} has ${rateFormat(rate)} physicians per 10,000 population (${d3.format(",")(total)} total)`; } return svg.node(); }31:T4ea,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}; }); return svg`${scaleTitle}0${colorRange.map((d, i)=>`${d.range}`)}`; }32:[] 2e:{"title":"Bivariate Map","cells":[{"id":0,"value":"md`# Bivariate Map\nExperimenting with a bivariate maps for showing physicians in metro and nonmetro counties. This notebook is also an experiment in using d3-scale-cluster.\\n \n\nData from https://nchealthworkforce.sirs.unc.edu/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md `This selects the color scheme for the nonmetro counties.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof ruralColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md `This selects the color scheme for the metro counties.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof metroColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md `This slider determines the number of bins for each color scale.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"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":213,"value":"md`This map uses a clustering algorithm to create the bins. The selection below determines whether the clustering is done on all counties at once, or separately for metro and nonmetro counties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof clusterSeparateOrTogether = DOM.select([\"together\", \"separate\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof year = slider({\n min: 2000, \n max: 2016, \n step: 1, \n value: 2016, \n title: \"Year\", \n description: \"Year of data to map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md `This is a simple representation of the current clusters and colors being used for the map. One question is whether we should only calculate one cluster (for, say, the most recent year) in order to enable comparisons over time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"clusters = {\nreturn {\nruralBreaks : ruralColorScale.clusters(),\nruralRange : ruralColorScale.range(),\nmetroBreaks : metroColorScale.clusters(),\nmetroRange : metroColorScale.range()\n}\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md `Below you can choose to map either the rate per 10k or the total number of physicians. The former is more meaningful in most cases.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof totalOrRate = DOM.select([\"rate\", \"total\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"ruralColorScale = {\n\n \tconst scheme = d3[\"scheme\" + ruralColor][numberOfBins];\n const domain = clusterSeparateOrTogether == \"together\" ? dataYear.map(d=>d[totalOrRate]) :\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t dataYear.filter(d=>d.metro == \"nonmetro\")\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map(d=>d[totalOrRate]);\t\t\t\t\t\t\t\n\tconst scale = cluster()\n \t\t\t\t\t\t.domain(domain)\n \t\t\t\t\t\t.range(scheme);\n \n \t\t\t\t\t\treturn scale;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"metroColorScale = {\n\n \tconst scheme = d3[\"scheme\" + metroColor][numberOfBins];\n const domain = clusterSeparateOrTogether == \"together\" ? dataYear.map(d=>d[totalOrRate]) :\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t dataYear.filter(d=>d.metro == \"metro\")\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map(d=>d[totalOrRate]);\t\t\t\t\t\t\t\n\tconst scale = cluster()\n \t\t\t\t\t\t.domain(domain)\n \t\t\t\t\t\t.range(scheme);\n \n \t\t\t\t\t\treturn scale;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"getFill = (county) => {\n const currentValue = dataMap.get(county)[totalOrRate];\n const currentMetro = dataMap.get(county).metro;\n \treturn currentValue == 0 ? \"#fff\" : currentMetro == \"metro\" ? metroColorScale(currentValue) : ruralColorScale(currentValue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataMap = new Map(dataYear.map(d=> [d.county, {rate:d.rate, total:d.total, metro: d.metro}]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"dataYear = allData.filter(d=>d.year == year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"allData = d3.csv(\"https://gist.githubusercontent.com/gallowayevan/c42718c49bfb123f35ec18a7a65477f0/raw/310ebeb7956136df2fec78dea23b62727412fb67/md_nc_2000-2016.csv\", function(d){\n\tif(d.county == \"Mcdowell\") {d.county = \"McDowell\"};\t\n return {county : d.county,\n \tyear : +d.year,\n total : +d.total,\n \trate : +d.providerRate,\n \tmetro : d.metro\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"ncDataYear = ncData.filter(d=>d.year == year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"ncData = d3.tsvParse(`year\ttotal\trate\n2000\t15919\t19.7768\n2001\t16387\t20.0138\n2002\t16733\t20.0712\n2003\t17083\t20.1313\n2004\t17347\t20.26\n2005\t17883\t20.6414\n2006\t18391\t20.7565\n2007\t18911\t20.8514\n2008\t19542\t21.1791\n2009\t19894\t21.2031\n2010\t20752\t21.6789\n2011\t21340\t22.07\n2012\t21788\t22.3118\n2013\t22414\t22.7278\n2014\t23063\t23.1703\n2015\t23324\t23.1971\n2016\t23869\t23.4979\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"nc = d3.json(\"https://cdn.rawgit.com/gallowayevan/1b6056fdccb0aa0d860cbdee2bdf7597/raw/a7a6f4d80d077e74152e6c3196abdec9b899eb76/ncmap.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"interpolators = [\n//http://bl.ocks.org/curran/3094b37e63b918bab0a06787e161607b \n // These are from d3-scale.\n \"Viridis\",\n \"Inferno\",\n \"Magma\",\n \"Plasma\",\n \"Warm\",\n \"Cool\",\n \"Rainbow\",\n \"CubehelixDefault\",\n \n // These are from d3-scale-chromatic\n \"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":154,"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":135,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"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":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}