2d:null 2e:["$","title",null,{"children":"MD Counties New Cases Map | Adam Chazan | Observable"}] 33:Tc5e,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, -20, width, height]) .on("click", reset); const g = svg.append("g"); const projection = d3.geoAlbersUsa() .fitSize([width, height], topojson.feature(maryland, maryland.objects.Maryland_Counties)) const path = d3.geoPath() .projection(projection); const tooltip = root .append("div") .attr("class", "cooltip"); svg.append("g") .attr("transform", "translate(20,35)") .append(() => legend({ color: scale, // this needs to go from scaleLow to scaleHigh somehow title: "Change in new cases", tickFormat: "+r", width: 300, ascending: true })); g.append("g") .attr("cursor", "pointer") .attr("stroke", "grey") .attr("stroke-width", 0.75) .selectAll("path") .data(topojson.feature(maryland, maryland.objects.Maryland_Counties).features) .join("path") .attr("fill", d => scale(diff[(d.properties.FIPS)])) .on("click", clicked) .attr("d", path) .on('mouseover', function (d) { this.classList.add('hovered') d3.select(this) .attr("stroke", "black") .attr("stroke-width", 3) .raise() tooltip.style('display', ''); let node = tooltip.node(); node.innerHTML = ""; node.appendChild(getTooltipContents(d)); renderLineChart(tooltip, d, root); }) .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 - 205) + 'px') .style('left', (mouseX + 145 <= root.node().offsetWidth ? (mouseX + 10) : (mouseX - 170)) + 'px') .style('display', 'block') }) .on('mouseout', function () { this.classList.remove('hovered') d3.select(this) .attr("stroke", null) .attr("stroke-width", 1) .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); } window.addEventListener("resize", () => resized(width, root, svg)); setTimeout(() => resized(width, root, svg), 12); return root.node(); }34:T62f,renderLineChart = (tooltip, d, root) => { const svg = root.select(".lineChart"); const data = caseTrend.filter(({fips}) => fips == d.properties.FIPS).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()) .call(g => g.selectAll(".tick text") .attr("font-size", "10px")); 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.FIPS)] > 0 ? Math.max(diff[(d.properties.FIPS)], extent[1]/2) : (diff[(d.properties.FIPS)]*2/3 + maxBlue/3) svg.append("path") .datum(slice) .attr("fill", "none") .attr("stroke", scale(lineFill)) .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); }35:[{"id":"f7de3e03c7ca9d63759c468d5fe1ce3b17d0277ac97be3698d4ac30a9eb3f63f0a9bed5a35fc93c9451ad82a8bacea08e56561122ce2f4b590f41359dc9db5ba","href":"https://static.observableusercontent.com/files/f7de3e03c7ca9d63759c468d5fe1ce3b17d0277ac97be3698d4ac30a9eb3f63f0a9bed5a35fc93c9451ad82a8bacea08e56561122ce2f4b590f41359dc9db5ba","name":"mdcounties@2.json","type":"application/json","lastModified":1595119552176.51,"size":56581}] 31:{"id":"44ce79ba170e8d63","slug":"md-counties-new-cases-map","title":"MD Counties New Cases Map","thumbnail":"77043377ebbe8d93ebbf3514b0aa6193269b864b5d7cc0dabc700e7c62173ae3","access_level":"public","create_time":"$D2020-07-19T00:45:52.176Z","update_time":"$D2020-10-23T20:06:04.025Z","view_time":null,"first_public_time":"$D2020-07-20T01:09:28.265Z","has_unpublished_edits":null,"fork":{"id":"26c60eb5a766bfac","slug":"coronavirus-dashboard","title":"MD Counties Total Cases Map","owner":{"id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan"}},"stars":1,"starred":false,"owner":{"type":"team","id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":"starter_2024"},"version":1139,"publish_version":1139,"role":null,"authored":false,"authors":[{"type":"individual","id":"254eb01f4d862ede","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":null}],"members":[{"type":"individual","id":"254eb01f4d862ede","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":null,"role":"editor"}],"comments":[{"id":"d0a62903e59a9579","reply_to_id":null,"content":"Hi Adam, this a really nice map with the trend line and also the \"cooltips\" up and running. You included the \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"scale = d3.scaleDiverging().domain([maxBlue, 0, maxRed]).interpolator(t => (d3.interpolateRdBu(1 - t)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"maxBlue = Math.min(Math.min(extent[0], -extent[1]), -20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"maxRed = Math.max(Math.max(-extent[0], extent[1]), 20)","pinned":false,"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(\"mdcounties@2.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 county of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({fips}) => fips == county).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n diff[county] = (avgCases[county]) - (twoWeeks[county]);\n console.log(county);\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 county of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({fips}) => fips == county).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n avgCases[county] = 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 county of mdcases.keys()) {\n const dailyAvg = caseTrend.filter(({fips}) => fips == county).map(rollingAvg).filter(d => d != null).map(({new_cases}) => Math.round(new_cases));\n console.log(dailyAvg);\n twoWeeks[county] = 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_counties_cases.csv?token=APZJICOZRHLILJIZFAT5B6C7DDEWM\", d3.autoType)).map(({date, fips, new_cases, per_100k}) => ({date, fips, new_cases: +new_cases, per_100k: +per_100k}))","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_counties_today.csv\", ({fips, cases}) => [fips, +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"},{"id":968,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"