31:T1180,map = { //Derived from https://observablehq.com/@d3/zoom-to-bounding-box - ISC License const zoom = d3 .zoom() .scaleExtent([1, 8]) .translateExtent([[0, 0], [width, height]]) .on("zoom", zoomed); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); const g = svg.append("g"); //Change to canvas layer? const zips = g .append("g") .attr("stroke", "none") .selectAll("zips") .data(topojson.feature(ncZipsGeo, ncZipsGeo.objects.ncZips).features) .join("path") .attr("class", "zips") .attr("fill", "none") .attr("cursor", "pointer") .attr("pointer-events", "all") .on("click", clicked) .attr("d", path); const circles = g .append("g") .attr("class", "circles") .attr("pointer-events", "none"); const radius = 5; const counties = g .append("g") .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-linejoin", "round") .selectAll("path") .data(ncCountiesGeo.features) .join("path") .attr("class", "counties") .attr("d", path); svg.call(zoom); let tooltipData; const tooltip = svg.append("g"); svg.selectAll(".zips").on("touchmove mousemove", function(event, d) { //Get the county const transform = d3.zoomTransform(svg.node()); const point = transform.invert(d3.pointer(event, svg.node())); const currCounty = countyQuery(projection.invert(point)).county; //Stroke the zip so it stands out d3.select(this) .attr("stroke", "#333") .attr("stroke-width", "1px") .raise(); //Get current zip data const { value, type } = tooltipData.get(+d.properties.zip); //Move the tooltip to the correct position tooltip .attr( "transform", `translate(${transform .apply(d3.pointer(event, this)) .map(e => e + 15)})` ) .call( callout, `${value} ${type}\nZip: ${d.properties.zip}\nPlace: ${d.properties.place}\nCounty: ${currCounty}` ); }); svg.selectAll(".zips").on("touchend mouseleave", function() { d3.select(this) .attr("stroke-width", "null") .attr("stroke", "none") .lower(); tooltip.call(callout, null); }); function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function updateData(cData) { svg.selectAll(".zips").attr("fill", d => { return cData.has(+d.properties.zip) ? cData.get(+d.properties.zip).color : "#fff"; }); tooltipData = cData; } function updateCircles(circleData) { const transform = d3.zoomTransform(svg.node()); const sqrtK = Math.sqrt(transform.k); circles .selectAll(".circle") .data(circleData) .join("circle") .attr("class", "circle") .attr("fill", d => d.color) .attr("r", radius / sqrtK) .attr("opacity", 0.7) .attr("cx", d => d.x) .attr("cy", d => d.y); } function clicked(event, d) { //d will be zip feature if click event, instead of call //kicked off by county selection. In that case, //need to pull appropriate county feature in order to zoom to county. let countyFeature = d; if (event) { const point = d3.pointer(event, svg.node()); const transform = d3.zoomTransform(svg.node()); const currCounty = countyQuery(projection.invert(transform.invert(point))) .FIPS_integ; countyFeature = countyMap.get(currCounty); } const [[x0, y0], [x1, y1]] = path.bounds(countyFeature); if (event) event.stopPropagation(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2) // d3.pointer(event, svg.node()) ); } function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); const sqrtK = Math.sqrt(transform.k); circles.selectAll(".circle").attr("r", d => radius / sqrtK); } Object.assign(svg.node(), { reset, clicked, zoomed, updateData, updateCircles }); return svg.node(); }32:[{"id":"606c5bc4d7c38c9379062c7c5eea11731c1998d4818105a2f19991564b18d615cc4b532d9216716bbaba02348731e1b4ac70818f32e53eb69253b7cbe85f8660","href":"https://static.observableusercontent.com/files/606c5bc4d7c38c9379062c7c5eea11731c1998d4818105a2f19991564b18d615cc4b532d9216716bbaba02348731e1b4ac70818f32e53eb69253b7cbe85f8660","name":"ncZips.json","type":"application/json","lastModified":1603994992908.24,"size":656359},{"id":"b0baab233da3a0fffb8613cbdfdb18c15c87e5255c7e5ca0f965bcd8561b26537d8859c6b2a5d2f67b827d5a3a4a6b9c4d35cffbfd819bbdf3b5c77723e0f56a","href":"https://static.observableusercontent.com/files/b0baab233da3a0fffb8613cbdfdb18c15c87e5255c7e5ca0f965bcd8561b26537d8859c6b2a5d2f67b827d5a3a4a6b9c4d35cffbfd819bbdf3b5c77723e0f56a","name":"casesAndDeaths.csv","type":"text/csv","lastModified":1603995579340.926,"size":2784352},{"id":"7ef963d2c5782d85c6885f455c6391ad386feeb542a91a777755eb60335c24b16dfcb2f884d5e2e4e65aa8bdd3ed8ce342e51e039bbecca046ce06bd92886eba","href":"https://static.observableusercontent.com/files/7ef963d2c5782d85c6885f455c6391ad386feeb542a91a777755eb60335c24b16dfcb2f884d5e2e4e65aa8bdd3ed8ce342e51e039bbecca046ce06bd92886eba","name":"Safetynet_list_March_17_2020.csv","type":"text/csv","lastModified":1604330405486.716,"size":152471},{"id":"0dcde8e16a44e5f4e11a634580901fbc6b315a897a04f21343909af984e7880cf7aa5706e0abfdee3a152eba5bcc6b4ff4fc8230b33776bcf24e0b769245d440","href":"https://static.observableusercontent.com/files/0dcde8e16a44e5f4e11a634580901fbc6b315a897a04f21343909af984e7880cf7aa5706e0abfdee3a152eba5bcc6b4ff4fc8230b33776bcf24e0b769245d440","name":"ncmap@1.geojson","type":"application/geo+json","lastModified":1604449998465.314,"size":72088}] 2f:{"title":"Zoomable Zip Map with County and Points of Interest Overlay","cells":[{"id":0,"value":"md`# Zoomable Zip Map with County and Points of Interest Overlay\n**Only intended as a demo of functionality, not for analysis or interpretation.**\n\nCovid Data Source: https://github.com/wraldata/nc-covid-data\n\nSafety Net Data Source: https://www.ncdhhs.gov/divisions/office-rural-health/safety-net-resources\n\nClick on county to zoom to that county.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"viewof casesOrDeaths = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof selectedCounty = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof currentDateIndex = Scrubber(dates.map((d, i) => i), {\n autoplay: false,\n initial: dates.length - 1,\n loopDelay: 1000,\n format: v =>\n dates[v].date.toLocaleDateString(undefined, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"legend({\n color: color,\n title: `${casesOrDeaths}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof selectedFacilityTypes = checkbox({\n title: \"Facility Type\",\n description: \"Select Safety Net Types\",\n options: Array.from(safetyNetTypes, d => d[0])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"safetyNetLegend = swatches({\n color: safetyNetColors\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"color = d3.scaleSequential(\n colorDomain,\n casesOrDeaths == \"cases\" ? d3.interpolateOranges : d3.interpolateReds\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"map.reset(reset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"map.updateCircles(currentSafetyNets)","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"map.updateData(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"selectedCounty == \"false\"\n ? \"\"\n : map.clicked(undefined, countyBoundsMap.get(selectedCounty))","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"height = 450","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"casesAndDeathsMap = d3.group(rawCasesAndDeaths, d => d.date, d => d.zip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"rawCasesAndDeaths = FileAttachment(\"casesAndDeaths.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"colorDomain = casesOrDeaths == \"cases\" ? casesExtent : deathsExtent","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"casesExtent = d3.extent(rawCasesAndDeaths, d => d.cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"deathsExtent = d3.extent(rawCasesAndDeaths, d => d.deaths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"currentData = new Map(\n Array.from(casesAndDeathsMap.get(dates[currentDateIndex].key), d => [\n d[0],\n {\n value: d[1][0][casesOrDeaths],\n color: color(d[1][0][casesOrDeaths]),\n type: casesOrDeaths\n }\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"dates = Array.from(casesAndDeathsMap.keys(), d => ({\n date: new Date(\n +d.toString().slice(0, 4),\n +d.toString().slice(4, 6) - 1,\n +d.toString().slice(6, 8)\n ),\n key: d\n})).sort((a, b) => d3.ascending(a.date, b.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"safetyNetColors = d3.scaleOrdinal(\n Array.from(safetyNetTypes, d => d[0]),\n d3.schemeTableau10\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"currentSafetyNets = selectedFacilityTypes.flatMap(function(d, i) {\n const currData = safetyNetTypes.get(d);\n return currData.map(e => ({\n x: projection([e.Longitude, e.Latitude])[0],\n y: projection([e.Longitude, e.Latitude])[1],\n color: safetyNetColors(d)\n }));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"safetyNetTypes = d3.group(safetyNet, d => d[\"Facility Type\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"safetyNet = FileAttachment(\"Safetynet_list_March_17_2020.csv\").csv({\n typed: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## Geo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"countyQuery = whichPolygon(ncCountiesGeo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"countyMap = new Map(\n ncCountiesGeo.features.map(d => [d.properties.FIPS_integ, d])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"projection = d3\n .geoAlbers()\n .rotate([0, 62, 0])\n .fitSize([width - 40, height - 40], ncCountiesGeo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"ncCountiesGeo = FileAttachment(\"ncmap@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"countyBoundsMap = new Map(\n counties.map(d => [\n d,\n ncCountiesGeo.features.find(e => e.properties.county == d)\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"counties = ncCountiesGeo.features.map(d => d.properties.county)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"ncZipsGeo = FileAttachment(\"ncZips.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import { slider, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"import { whichPolygon } from \"@gallowayevan/which-polygon\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"callout = (g, value) => {\n // Slightly altered from https://observablehq.com/@d3/line-chart-with-tooltip - ISC License\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"14px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}