2d:null 2e:["$","title",null,{"children":"MD Zip New Cases Map | Prayag Gordy | Observable"}] 33:Te04,chart = { const width = 975; const height = 550; const zoom = d3 .zoom() .scaleExtent([1, 4]) .on("zoom", zoomed); const root = d3.create("div").attr("class", "root"); const svg = root .append("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "white"); svg .append("text") .attr("x", 280) .attr("y", 325) .attr("text-anchor", "middle") .style("font-size", "30px") .attr("font-weight", 700) .text("New COVID-19 cases by zip code"); svg .append("text") .attr("x", 280) .attr("y", 350) .attr("text-anchor", "middle") .style("font-size", "18px") .text("Blue indicates a decrease in new cases,"); svg .append("text") .attr("x", 280) .attr("y", 370) .attr("text-anchor", "middle") .style("font-size", "18px") .text("while red indicates an increase"); const g = svg.append("g"); const projection = d3 .geoAlbersUsa() .fitSize( [width, height], topojson.feature(maryland, maryland.objects.Maryland_Zip_Codes) ); const path = d3.geoPath().projection(projection); const tooltip = root.append("div").attr("class", "cooltip"); g.append("g") .attr("cursor", "pointer") .attr("stroke", "grey") .attr("stroke-width", 0.75) .attr("fill", "white") .selectAll("path") .data( topojson.feature(maryland, maryland.objects.Maryland_Zip_Codes).features ) .join("path") .attr("fill", d => color(diff[d.properties.ZIP_CODE])) .on("click", clicked) .attr("d", path) .on('mouseover', function(d) { this.classList.add('hovered'); d3.select(this) .attr("stroke", "black") .raise(); tooltip.style('display', ''); let node = tooltip.node(); node.innerHTML = ""; node.appendChild(getTooltipContents(d)); renderLineChart(tooltip, d); }) .on('mousemove', function() { const rootBounds = root.node().getBoundingClientRect(); const mouseX = d3.event.pageX - rootBounds.left; const mouseY = d3.event.pageY - rootBounds.top; tooltip .style( 'top', Math.min(mouseY - 10, root.node().offsetHeight - 225) + 'px' ) .style( 'left', (mouseX + 160 <= root.node().offsetWidth ? mouseX + 10 : mouseX - 190) + 'px' ) .style('display', 'block'); }) .on('mouseout', function() { this.classList.remove('hovered'); d3.select(this) .attr("stroke", null) .lower(); tooltip.style('display', 'none'); }); svg.call(zoom); function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(d) { const [[x0, y0], [x1, y1]] = path.bounds(d); d3.event.stopPropagation(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(3, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.mouse(svg.node()) ); } function zoomed() { const { transform } = d3.event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return root.node(); }34:T5ed,renderLineChart = (tooltip, d) => { const svg = d3.select(".lineChart"); const data = caseTrend.filter(({zip}) => zip == d.properties.ZIP_CODE).map(rollingAvg).filter(d => d != null) const slice = data.slice(data.length - 14, data.length) const margin = ({top: 10, right: 0, bottom: 10, left: 20}) const x = d3.scaleUtc() .domain(d3.extent(slice, d => d.date)) .range([margin.left + 5, lineChartWidth]); const y = d3.scaleLinear() .domain([d3.min(slice, d => d.new_cases), d3.max(slice, d => d.new_cases)]).nice() .range([lineChartHeight - margin.bottom, margin.top]); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickFormat(t => (t ? t : "")) .tickSize(0) //.tickValues(d3.range(d3.min(data, d => d.value), d3.max(data, d => d.value))) .ticks(2) ) .call(g => g.select(".domain").remove()); svg.append("g").call(yAxis); const line = d3.line() .defined(d => !isNaN(d.new_cases)) .x(d => x(d.date)) .y(d => y(d.new_cases)); const lineFill = diff[(d.properties.ZIP_CODE)] > 0 ? Math.max(diff[(d.properties.ZIP_CODE)], extent[1]/2) : Math.min(diff[(d.properties.ZIP_CODE)], extent[0]/2) svg.append("path") .datum(slice) .attr("fill", "none") .attr("stroke", color(lineFill)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); }35:[{"id":"311eb0ace0076c06ded15661926914b16c51cddf00ccd624ab224d066dc48cd2d26f8779d1ab626f07d8ec8f99d0c0406ec2f6929bfaff88c675257ef7268455","href":"https://static.observableusercontent.com/files/311eb0ace0076c06ded15661926914b16c51cddf00ccd624ab224d066dc48cd2d26f8779d1ab626f07d8ec8f99d0c0406ec2f6929bfaff88c675257ef7268455","name":"mdzip.json","type":"application/json","lastModified":1595865242537.273,"size":170896}] 31:{"id":"27e16c58ce375b8a","slug":"md-zip-new-cases-map","title":"MD Zip New Cases Map","thumbnail":"c766c52fb46a9f858be510089e97877cffb73de9568065cd6a1408f41d185078","access_level":"public","create_time":"$D2020-07-27T15:54:02.537Z","update_time":"$D2020-07-27T17:56:25.350Z","view_time":null,"first_public_time":"$D2020-07-27T17:49:14.385Z","has_unpublished_edits":null,"fork":{"id":"08e5fc3a5ca0fa98","slug":"md-zip-new-cases-map","title":"MD Zip New Cases Map","owner":{"id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8dd6422bb0578a38","login":"prayaggordy","name":"Prayag Gordy","avatar_url":"https://avatars-next.observableusercontent.com/cc95f338a0f78c78d1a9090c5e94c5eba102ed6a0d6b2743f31ff43298c3e044","tier":"starter_2024"},"version":1045,"publish_version":1045,"role":null,"authored":false,"authors":[{"type":"individual","id":"2cb1883273e762ce","login":"prayaggordy","name":"Prayag Gordy","avatar_url":"https://avatars-next.observableusercontent.com/cc95f338a0f78c78d1a9090c5e94c5eba102ed6a0d6b2743f31ff43298c3e044","tier":null}],"members":[{"type":"individual","id":"2cb1883273e762ce","login":"prayaggordy","name":"Prayag Gordy","avatar_url":"https://avatars-next.observableusercontent.com/cc95f338a0f78c78d1a9090c5e94c5eba102ed6a0d6b2743f31ff43298c3e044","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"MD Zip New Cases Map","cells":[{"id":0,"value":"md`# MD Zip New Cases Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":" function rollingAvg (b, index, array) {\n let count = 0;\n if (index < 6)\n return null;\n for (let i = 0; i < 7; ++i) {\n count += array[index - i].new_cases;\n };\n return {...b, new_cases: count/7};\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"getTooltipContents = d => {\n \n return html`

\n \n

${d.properties.NAME}

\n ${d.properties.ZIP_CODE} \n \n

New Cases (7 Day Avg.)

\n \n

Today: ${avgCases[(d.properties.ZIP_CODE)]}

Two weeks ago: ${twoWeeks[(d.properties.ZIP_CODE)]}

\n\n

14-Day Trend

\n \n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"lineChartWidth = 125","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"lineChartHeight = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"css =\n\nhtml` \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"color = v => v > 0 ? scaleHigh(v) : scaleLow(v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"scaleHigh = d3.scaleSequential(d3.interpolateReds).domain([0, extent[1]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"scaleLow = d3.scaleSequential(d3.interpolateBlues).domain([0, Math.min(extent[0], -extent[1])])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"log = l => Math.log(l+1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"extent = d3.extent(Object.values(diff))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"maryland = FileAttachment(\"mdzip.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"diff = {\n \n const diff = {}\n for (const zipCode of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({zip}) => zip == zipCode).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n diff[zipCode] = avgCases[zipCode] - twoWeeks[zipCode];\n }\n \n return diff;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"avgCases = {\n \n const avgCases = {}\n for (const zipCode of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({zip}) => zip == zipCode).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n avgCases[zipCode] = dailyAvg[dailyAvg.length - 1];\n }\n \n return avgCases;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"twoWeeks = {\n \n const twoWeeks = {}\n for (const zipCode of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({zip}) => zip == zipCode).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n twoWeeks[zipCode] = dailyAvg[dailyAvg.length - 15];\n }\n \n return twoWeeks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"caseTrend = Object.assign(await d3.csv(\"https://raw.githubusercontent.com/prayaggordy/D3-covid-map/master/data/md_zips.csv\", d3.autoType)).map(({date, zip, new_cases}) => ({date, zip, new_cases: +new_cases}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"mdcases = Object.assign(new Map(await d3.csv(\"https://raw.githubusercontent.com/prayaggordy/D3-covid-map/master/data/md_zips_today.csv\", ({zip, cases}) => [zip, +cases])), {title: \"Maryland Cases\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"