32:T5da,dodge = (data, radius, padding) => { //https://beta.observablehq.com/@mbostock/d3-beeswarm-ii const circles = data.map(function(d){ let currentX = d.value == 0 ? x(0.2) : x(d.value); return {x: currentX, data: d}}).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { if ((radius * 2 + padding - epsilon) ** 2 > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.x < b.x - (radius * 2 + padding)) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt((radius * 2 + padding) ** 2 - (a.x - b.x) ** 2); let y2 = a.y - Math.sqrt((radius * 2 + padding) ** 2 - (a.x - b.x) ** 2); if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return circles; }33:T104c,chart = { const chartSvg = d3.select(beeswarm); let currentFormatter = totalOrRate == "rate" ? d3.format(",.3r") : d3.format(","); const update = chartSvg .selectAll(".circleGroup") .data(dodgedData, d => d.name); const enter = update.enter() .append("g") .attr("class", "circleGroup"); const circles = enter.append("circle") .attr("r", radius) .attr("fill", d=> d.metro == "metro" ? "#bdbdbd" : "#67a28c") .attr("cx", d => d.x) .attr("cy", d => height / 1.4 + d.y) .attr("class", d => `${d.name} circles`); circles.attr("opacity",0) .transition() .duration(fadeDuration) .attr("opacity", 1); // circles // .append("title") // .text(d => d.name + "\n" + currentFormatter(d.value)); enter.append("text").attr("visibility", "hidden").attr("class", "annotation"); const clickText = enter.merge(update).select("text") .attr("dy", -12) .attr("dx", -8) .style("font-family", "helvetica neue, helvetica, sans-serif") .style("font-size", ".8rem") .style("fill", "#fff") .style("font-weight", "bold") .text(d=>d.name + ": " + currentFormatter(d.value)) .transition() .ease(d3.easeCubicOut) .duration(750) .attr("x", function(d){ let currentX = d.x; d.x - 2 + +this.getBBox().width > width ? currentX = d.x - +this.getBBox().width + 8: currentX = d.x + 5; return currentX; }) .attr("y", d => height / 1.4 + d.y); enter.insert("rect", "text").attr("visibility", "hidden").attr("class", "annotation");; const clickRect = enter.merge(update).select("rect") .attr("width", function(d){return d3.select(this.parentNode).select("text").node().getBBox().width+10}) .attr("height", function(d){return d3.select(this.parentNode).select("text").node().getBBox().height+10}) .attr("rx", 3) .attr("ry", 3) .attr("fill", "#bdbdbd") .attr("fill-opacity", 0.8) .transition() .ease(d3.easeCubicOut) .duration(750) .attr("x", function(d){ let currentX = d.x; d.x - 2 + +this.getAttribute("width") - 10 > width ? currentX = d.x - +this.getAttribute("width") + 5 : currentX = d.x - 10; return currentX; }) .attr("y", d => height / 1.4 + d.y - 30); update.select(".circles") .transition() .ease(d3.easeCubicOut) .duration(750) .attr("cx", d => d.x) .attr("cy", d => height / 1.4 + d.y); enter.merge(update).select(".circles").on("click", function(d){ dispatch.call("clicked", this, d.name); }) .on("mouseover", function(d) { dispatch.call("hoverIn", this, d.name) }) .on("mouseout", function(d) { dispatch.call("hoverOut", this, d.name) }); dispatch.on("hoverIn.beeswarm", function(d){ const currentItem = d3.select(`circle.${d}`); if(!currentItem.node().classList.contains("clicked")){ currentItem.attr("stroke", "#a2677d").attr("stroke-width", 3); d3.select(currentItem.node().parentNode).selectAll(".annotation").attr("visibility", "visible"); currentItem.node().parentNode.parentNode.appendChild(currentItem.node().parentNode); } }); dispatch.on("hoverOut.beeswarm", function(d){ const currentItem = d3.select(`circle.${d}`); if(!currentItem.node().classList.contains("clicked")){ console.log(currentItem.node().classList.contains("clicked")); currentItem.attr("stroke", "none"); d3.select(currentItem.node().parentNode).selectAll(".annotation").attr("visibility", "hidden"); } }); dispatch.on("clicked.beeswarm", function(d){ const currentItem = d3.select(`circle.${d}`); if(currentItem.node().classList.toggle("clicked")){ currentItem.attr("stroke", "#a2677d").attr("stroke-width", 3); d3.select(currentItem.node().parentNode).selectAll(".annotation").attr("visibility", "visible"); currentItem.node().parentNode.parentNode.appendChild(currentItem.node().parentNode); } else { currentItem.attr("stroke", "none"); d3.select(currentItem.node().parentNode).selectAll(".annotation").attr("visibility", "hidden"); } }); update.select("title") .text(d => d.name + "\n" + currentFormatter(d.value)); const exit = update.exit().remove(); }34:T7ea,map = { const height = 400; 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 svgChild = svg.append("g").attr("class", "inset"); svgChild.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "none") .attr("stroke", "#bdbdbd"); svgChild.append("g") .selectAll("path") .data(nc.features) .enter() .append("path") .attr("d", path) .attr("transform", "translate(20, 0)") .attr("class", d=> `${d.properties.county} counties ${omb_metro_map_2015.get(d.properties.county.toUpperCase())}`) // .attr("stroke", "#fff") // .style("stroke-width", 3) // .style("fill", function(d){ // let fill = "#bdbdbd" // if(omb_metro_map_2015.get(d.properties.county.toUpperCase()) == "nonmetro"){ // fill = "#67a28c"; // } // return fill; // }) .on("mouseover", function(d) { dispatch.call("hoverIn", this, d.properties.county) }) .on("mouseout", function(d) { dispatch.call("hoverOut", this, d.properties.county) }) .on("click", function(d){ dispatch.call("clicked", this, d.properties.county) }); dispatch.on("hoverIn.map", function(d) { const hoverItem = d3.select(`path.${d}`); hoverItem.node().parentNode.appendChild(hoverItem.node()); hoverItem.classed("selected", true); }); dispatch.on("hoverOut.map", function(d) { const hoverItem = d3.select(`path.${d}`); if(!hoverItem.node().classList.contains("clicked")){ hoverItem.classed("selected", false); } }); dispatch.on("clicked.map", function(d){ const currentItem = d3.select(`path.${d}`); if(currentItem.node().classList.toggle("clicked")){ currentItem.classed("selected", true); } else { currentItem.classed("selected", false); } }); return svgChild; }35:T887,omb_metro_map_2015 = new Map([["ALAMANCE","metro"],["ALEXANDER","metro"],["ALLEGHANY","nonmetro"],["ANSON","nonmetro"],["ASHE","nonmetro"],["AVERY","nonmetro"],["BEAUFORT","nonmetro"],["BERTIE","nonmetro"],["BLADEN","nonmetro"],["BRUNSWICK","metro"],["BUNCOMBE","metro"],["BURKE","metro"],["CABARRUS","metro"],["CALDWELL","metro"],["CAMDEN","nonmetro"],["CARTERET","nonmetro"],["CASWELL","nonmetro"],["CATAWBA","metro"],["CHATHAM","metro"],["CHEROKEE","nonmetro"],["CHOWAN","nonmetro"],["CLAY","nonmetro"],["CLEVELAND","nonmetro"],["COLUMBUS","nonmetro"],["CRAVEN","metro"],["CUMBERLAND","metro"],["CURRITUCK","metro"],["DARE","nonmetro"],["DAVIDSON","metro"],["DAVIE","metro"],["DUPLIN","nonmetro"],["DURHAM","metro"],["EDGECOMBE","metro"],["FORSYTH","metro"],["FRANKLIN","metro"],["GASTON","metro"],["GATES","metro"],["GRAHAM","nonmetro"],["GRANVILLE","nonmetro"],["GREENE","nonmetro"],["GUILFORD","metro"],["HALIFAX","nonmetro"],["HARNETT","nonmetro"],["HAYWOOD","metro"],["HENDERSON","metro"],["HERTFORD","nonmetro"],["HOKE","metro"],["HYDE","nonmetro"],["IREDELL","metro"],["JACKSON","nonmetro"],["JOHNSTON","metro"],["JONES","metro"],["LEE","nonmetro"],["LENOIR","nonmetro"],["LINCOLN","metro"],["MCDOWELL","nonmetro"],["MACON","nonmetro"],["MADISON","metro"],["MARTIN","nonmetro"],["MECKLENBURG","metro"],["MITCHELL","nonmetro"],["MONTGOMERY","nonmetro"],["MOORE","nonmetro"],["NASH","metro"],["NEW HANOVER","metro"],["NORTHAMPTON","nonmetro"],["ONSLOW","metro"],["ORANGE","metro"],["PAMLICO","metro"],["PASQUOTANK","nonmetro"],["PENDER","metro"],["PERQUIMANS","nonmetro"],["PERSON","metro"],["PITT","metro"],["POLK","nonmetro"],["RANDOLPH","metro"],["RICHMOND","nonmetro"],["ROBESON","nonmetro"],["ROCKINGHAM","metro"],["ROWAN","metro"],["RUTHERFORD","nonmetro"],["SAMPSON","nonmetro"],["SCOTLAND","nonmetro"],["STANLY","nonmetro"],["STOKES","metro"],["SURRY","nonmetro"],["SWAIN","nonmetro"],["TRANSYLVANIA","nonmetro"],["TYRRELL","nonmetro"],["UNION","metro"],["VANCE","nonmetro"],["WAKE","metro"],["WARREN","nonmetro"],["WASHINGTON","nonmetro"],["WATAUGA","nonmetro"],["WAYNE","metro"],["WILKES","nonmetro"],["WILSON","nonmetro"],["YADKIN","metro"],["YANCEY","nonmetro"]])36:[] 30:{"title":"Counties by Rate Per 10k of Physicians, North Carolina, 2019","cells":[{"id":1,"value":"md`# Counties by Rate Per 10k of Physicians, North Carolina, ${year}\n ## Beeswarm with map inset\n\nData from https://nchealthworkforce.unc.edu/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"title = md`Counties by Rate Per 10k of Physicians, North Carolina, ${year}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"explain = md`Green dots and counties are OMB nonmetro counties. Hover on dots to get county name and value. Click on dots to follow over time. Hover or click on map to see linked dots. Use slider to move across years.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"beeswarm = {\n const svgNode = DOM.svg(width, height);\n\n const g = d3.select(svgNode).append(\"g\")\n .call(xAxis);\n\n fadeTransition(d3.select(svgNode),g,xAxis);\n\n const inset = svgNode.appendChild(map.node());\n d3.select(inset).attr(\"transform\", \"scale(0.4), translate(10,10)\");\n\n const legend = svgNode.appendChild(legendContent);\n d3.select(legend).attr(\"transform\", \"translate(700,10)\");\n\n d3.select(svgNode).append(\"text\")\n .attr(\"x\", 730)\n .attr(\"y\",364)\n .style(\"font-size\", \"14px\")\n .text(\"Physicians per 10,000 population\");\n \n return svgNode;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof year = slider({\n min: 2000, \n max: maxYear, \n step: 1, \n value: maxYear, \n title: \"Year\", \n description: \"Year of Physician Data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"viewof totalOrRate = DOM.select([\"rate\",\"total\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"dispatch = d3.dispatch(\"hoverIn\", \"hoverOut\", \"clicked\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"dodgedData = {\nconst data = dodge(dataYear.map(function(d){return {name: d.county, value: d[totalOrRate], metro: d.metro}}), radius, padding);\n \n return data.map(function(d){\n \treturn{\n x : d.x,\n y : d.y,\n name : d.data.name,\n metro : d.data.metro, \n\tvalue : d.data.value\n }\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"dataYear = allData.filter(d=>d.year == year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"allData = d3.csv(`https://data-dept-healthworkforce.cloudapps.unc.edu/data/region/spec023.csv`, function(d){\nif(d.type != 'county') return null;\n return {county : d.region,\n \tyear : +d.year,\n total : +d.total,\n \trate : +d.providerRate,\n \tmetro : omb_metro_map_2015.get(d.region.toUpperCase())\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"maxYear = d3.max(allData, d=>d.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(allData, d => d[totalOrRate])])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(d3.format(\",.1r\")).tickValues(tickValues))","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"tickValues = {\n yield totalOrRate == \"rate\" ? \n d3.range(0,120,10) :\n [0,10,50,200,400,1000,2000,3000]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"radius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"padding = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"fadeDuration = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"function fadeTransition(svg, g, axis) {\n //https://beta.observablehq.com/@mbostock/dont-transition-units\n var t = svg.transition().duration(fadeDuration); // Define a transition.\n g.transition(t).attr(\"opacity\", 0).remove(); // Fade-out the old.\n g = svg.append(\"g\").attr(\"opacity\", 0).call(axis); // Add the new.\n g.transition(t).attr(\"opacity\", 1); // Fade-in the new.\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"nc = d3.json(\"https://cdn.rawgit.com/gallowayevan/1b6056fdccb0aa0d860cbdee2bdf7597/raw/a7a6f4d80d077e74152e6c3196abdec9b899eb76/ncmap.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"legendContent = svg`Nonmetro (54 counties)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}