2d:null 2e:["$","title",null,{"children":"MD Counties Election Map | Adam Chazan | Observable"}] 33:Tb3c,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(countyMap, countyMap.objects.Maryland_Counties)) const tooltip = root .append("div") .attr("class", "map-tooltip"); const path = d3.geoPath() .projection(projection); g.append("g") .attr("cursor", "pointer") .attr("stroke", "white") .attr("stroke-width", 0.75) .selectAll("path") .data(topojson.feature(countyMap, countyMap.objects.Maryland_Counties).features) .join("path") .attr("fill", d => color(mdvotes.get(d.properties.NAME).pctbiden)) .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)); }) .on('mousemove', function () { const rootBounds = root.node().getBoundingClientRect(); const mouseX = d3.event.pageX - rootBounds.left; const mouseY = d3.event.pageY - rootBounds.top; let measuredWidth = tooltip.node().getBoundingClientRect().width tooltip .style("top", (mouseY + 10) + "px") .style("left", (mouseX - measuredWidth / 2) + "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:T423,getTooltipContents = d => { return html`

${d.properties.NAME}

Candidate		Votes	Pct.
	Biden	${d3.format(",")(mdvotes.get(d.properties.NAME).votebiden)}	${d3.format(",.1f")(mdvotes.get(d.properties.NAME).pctbiden)*100}%
	Trump	${d3.format(",")(mdvotes.get(d.properties.NAME).votetrump)}	${d3.format(",.1f")(mdvotes.get(d.properties.NAME).pcttrump*100)}%

`; }35:[{"id":"f7de3e03c7ca9d63759c468d5fe1ce3b17d0277ac97be3698d4ac30a9eb3f63f0a9bed5a35fc93c9451ad82a8bacea08e56561122ce2f4b590f41359dc9db5ba","href":"https://static.observableusercontent.com/files/f7de3e03c7ca9d63759c468d5fe1ce3b17d0277ac97be3698d4ac30a9eb3f63f0a9bed5a35fc93c9451ad82a8bacea08e56561122ce2f4b590f41359dc9db5ba","name":"mdcounties@2.json","type":"application/json","lastModified":1604452452075.896,"size":56581},{"id":"54a57c56e01524e028995d38c22aea6b938c50a71d995f2f697dc956ef22b2792c9aa0c5d69090219ca59e061709ef9d7836c7961322b7c3b013d691dd78f85c","href":"https://static.observableusercontent.com/files/54a57c56e01524e028995d38c22aea6b938c50a71d995f2f697dc956ef22b2792c9aa0c5d69090219ca59e061709ef9d7836c7961322b7c3b013d691dd78f85c","name":"pres.csv","type":"text/csv","lastModified":1674865793191.59,"size":1472}] 31:{"id":"e8dd19682f47b070","slug":"md-counties-election-map","title":"MD Counties Election Map","thumbnail":"e5b71ea78f3becacb7b12ae397a3d3cd44c683af1db40d4e2c765531eb2c5c96","access_level":"public","create_time":"$D2020-11-04T01:14:12.075Z","update_time":"$D2023-01-28T00:34:45.771Z","view_time":null,"first_public_time":"$D2020-11-04T01:54:55.064Z","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":0,"starred":false,"owner":{"type":"team","id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":"starter_2024"},"version":955,"publish_version":null,"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":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"MD Counties Election Map","cells":[{"id":0,"value":"md`# MD Counties Election 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":815,"value":"function resized(width, root, svg) {\n let measuredWidth = root.node().getBoundingClientRect().width;\n if (measuredWidth == 0) {\n setTimeout(() => resized(width, root, svg), 12);\n return;\n }\n let scale = width / measuredWidth;\n svg.selectAll(\"line\").attr(\"stroke-width\", scale + \"px\");\n svg.selectAll(\"text\").attr(\"transform\", \"scale(\" + scale + \" \" + scale + \")\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"html` \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"color = v => scale(v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"scale = d3.scaleQuantile()\n .domain([0, 0.35, 0.5, 0.65, 1])\n .range([\"#CB4141\", \"#DC7F7F\", \"#E9AFAF\", \"#ACC6EC\", \"#6998DD\", \"#3473D1\"])","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":6,"value":"countyMap = FileAttachment(\"mdcounties@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"mdvotes = Object.assign(new Map(await d3.csv(\"pres.csv\", ({county, trump, biden, trump_pct, biden_pct, reported}) => [county, { votetrump: +trump, votebiden: +biden, pcttrump: +trump_pct , pctbiden: +biden_pct, reported: +reported }])), {title: \"Maryland Presidential Election\"})","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":785,"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"