${data.title[0]}${ labelsRR[j]&&` (${labelsRR[j]})` } ${data.title[1]}${labels[i] && ` (${labels[i]})`}

27:null 28:["$","title",null,{"children":"Animated Cluster Map of COVID-19 Infection per Capita | Yu Lan | Observable"}] 2d:T7e4,map = { const width = 1200 const height = 700 const margin = 10 // create SVG element let svg = d3.select(DOM.svg(width, height)); const path = d3.geoPath(); // Add the text box for State svg.append("text") .attr("x", margin*14) .attr("y",height-30) .attr("dy", ".35em") .text(); const aa = svg.append("g"); const countyMap = aa.append("g") .attr("transform","translate("+margin+","+margin+")") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => color(data.get(d.id+" "+dateToString(date)))) .attr("d", path) .on("mouseover", function(d) { d3.select(this) .attr("stroke" , "orange") }) .on("mouseout", function(d) { d3.select(this) .attr("stroke" , "null") }) .on('click', function(e, d) { d3.selectAll("path") .style('stroke', null); d3.select(this) .style('stroke', 'orange'); svg.select("text").text(`${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}, ID: ${d.id}`); }) .append("title") .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`) aa.append("path") .attr("transform","translate("+margin+","+margin+") ") //.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b))); // Update the fill based on date scrubber function update(date) { countyMap.attr("fill", function(d) { var fclass = data.get(d.id+" "+dateToString(date)) }); } var zoom = d3.zoom() .scaleExtent([1, 8]) .on('zoom', zoomed); function zoomed(event) { const {transform} = event; aa.attr("transform", transform); aa.attr("stroke-width", 1 / transform.k); } aa.call(zoom); //return svg.node(); return Object.assign(svg.node(), {update}); }2e:T451,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${ labelsRR[j]&&` (${labelsRR[j]})` } ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; }2f:[{"id":"e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","href":"https://static.observableusercontent.com/files/e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","name":"counties-albers-10m@9.json","type":"application/json","lastModified":1696275806883.552,"size":745424},{"id":"7b37f7c2d12e96f291348163520ac7fc825abbcfd22cabe9fa7b8761f98b4016fc355db74a999972deedb03efd69937d4a9e5ac20295c04c66cf6620a8e1a263","href":"https://static.observableusercontent.com/files/7b37f7c2d12e96f291348163520ac7fc825abbcfd22cabe9fa7b8761f98b4016fc355db74a999972deedb03efd69937d4a9e5ac20295c04c66cf6620a8e1a263","name":"biLISA@2.csv","type":"text/csv","lastModified":1696277860976.652,"size":20971515},{"id":"467ae952c789150989c7591697c3f6948f2d65a2b387266fedcf8fb82644ca37b2a6c075c5d7b643ee41b328d1d1211d2a3d55333ca1b712cfc98a39c7ebb02e","href":"https://static.observableusercontent.com/files/467ae952c789150989c7591697c3f6948f2d65a2b387266fedcf8fb82644ca37b2a6c075c5d7b643ee41b328d1d1211d2a3d55333ca1b712cfc98a39c7ebb02e","name":"LISA@2.png","type":"image/png","lastModified":1696603460116.308,"size":185544},{"id":"16eca734040b8fc4f68c17c13e5e4ec73565d602f2be3501c0074fbf951a2113aa568620db4514c6f08ab1bbd3576fac6677a0c65070a0fcc669ac97ed3a96be","href":"https://static.observableusercontent.com/files/16eca734040b8fc4f68c17c13e5e4ec73565d602f2be3501c0074fbf951a2113aa568620db4514c6f08ab1bbd3576fac6677a0c65070a0fcc669ac97ed3a96be","name":"lisa_weekly@1.csv","type":"text/csv","lastModified":1696604617082.373,"size":9042645},{"id":"467ae952c789150989c7591697c3f6948f2d65a2b387266fedcf8fb82644ca37b2a6c075c5d7b643ee41b328d1d1211d2a3d55333ca1b712cfc98a39c7ebb02e","href":"https://static.observableusercontent.com/files/467ae952c789150989c7591697c3f6948f2d65a2b387266fedcf8fb82644ca37b2a6c075c5d7b643ee41b328d1d1211d2a3d55333ca1b712cfc98a39c7ebb02e","name":"LISA@1.png","type":"image/png","lastModified":1696603417890.957,"size":185544}] 2b:{"id":"3bdef93c74dcd533","slug":null,"title":"Animated Cluster Map of COVID-19 Infection per Capita","thumbnail":"fe3d3a703c8ca5736b9aa3322eeababbba484323c0c872196902e9e69a69f75b","access_level":"public","create_time":"$D2023-10-02T19:43:26.883Z","update_time":"$D2023-10-09T14:59:40.924Z","view_time":null,"first_public_time":"$D2023-10-02T19:43:26.883Z","has_unpublished_edits":null,"fork":{"id":"3f17a04bb02b71cd","slug":"animated-bivariate-map-of-covid-19-2021","title":"Animated Bivariate Map of COVID-19 2020~2022","owner":{"id":"d32524a28204ccc9","login":"ylan1","name":"Yu Lan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d32524a28204ccc9","login":"ylan1","name":"Yu Lan","avatar_url":"https://avatars-next.observableusercontent.com/e5addcb908a2668b70da74242c68e6d2d64a259b66ff96ec1b3dc4bc60367127","tier":"starter_2024"},"version":1133,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a70a00d294c89b6","login":"ylan1","name":"Yu Lan","avatar_url":"https://avatars-next.observableusercontent.com/e5addcb908a2668b70da74242c68e6d2d64a259b66ff96ec1b3dc4bc60367127","tier":null}],"members":[{"type":"individual","id":"5a70a00d294c89b6","login":"ylan1","name":"Yu Lan","avatar_url":"https://avatars-next.observableusercontent.com/e5addcb908a2668b70da74242c68e6d2d64a259b66ff96ec1b3dc4bc60367127","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Animated Cluster Map of COVID-19 Infection per Capita","cells":[{"id":229,"value":"md\n`# Animated Cluster Map of COVID-19 Infection per Capita`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md\n`This map shows the weekly cluster map of estimated COVID infection per capita from covidestim using Bivariate LISA. The infection per capita of the county is compared to (queen contiguity) neigbors from the last week.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"\ncolors = [\n \"#999\",\n \"#c51b8a\",\n \"#999\",\n \"#7fcdbb\",\n \"#999\",\n \"#999\",\n \"#999\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"{\n let node = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 70);\n let cellWidth = width / colors.length;\n let cellHeight = 70;\n\n for (let i = 0; i < colors.length; i++) {\n node\n .append(\"rect\")\n .attr(\"width\", cellWidth + \"px\")\n .attr(\"height\", cellHeight + \"px\")\n .attr(\"x\", cellWidth * i)\n .attr(\"y\", 1)\n .attr(\"fill\", colors[i]);\n }\n\n return node.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"Red is the high-high, and Green is the low-high. Grey is other groups or insignificant, and light grey is no data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1090,"value":"viewof date = Scrubber(dates.map(x => d3.timeParse(\"%Y-%m-%d\")(x)), {\n autoplay: false,\n loop: false,\n delay: 800,\n format: date => date.toLocaleString(\"en\", {month: \"long\", day: \"numeric\",year:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"Source: https://geodacenter.github.io/workbook/6c_local_multi/lab6c.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1124,"value":"lisa2 = FileAttachment(\"LISA@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md\n`## Data\nLoad the case data, county JSON file, and state JSON file. Create an array of dates for the data scrubber.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"dates = {\n //const data = await FileAttachment(\"biLISA@2.csv\").csv();\n const data = await FileAttachment(\"lisa_weekly@1.csv\").csv();\n var dd = data.map(function(d) { return d.date; });\n return [...new Set(dd)];\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"rrmap= {\n const testww = await FileAttachment(\"lisa_weekly@1.csv\").csv();\n return new Map(testww.map(({id,lisa_st,date}) => [(id+ \" \"+date), [+lisa_st]]))\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"data = Object.assign( \nrrmap\n,{title: [\"Bivariate LISA\"]},)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"labelsRR= [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"labels = [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"//n = Math.floor(Math.sqrt(colors.length))\nn=5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"//x = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))\nx = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"//y = d3.scaleLinear([0.053, 0.128,0.295 ,1000], d3.range(n))\ny = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))\n//y = d3.scaleQuantile([1,14], d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n return colors[value];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md\n`## D3 Setup\nSetup some useful D3 items. The \\`\\`color\\`\\` function will be used to map cases to the associated quantile color. The \\`\\`path\\`\\` and \\`\\`projection\\`\\` functions are needed for mapping the JSON data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${data.title[0]} ${a} ${labelsRR[x(a)] && ` (${labelsRR[x(a)]})`}\n${data.title[1]} ${b} ${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"//clean.filter(d => d[1] === dates[dates.length-1]).map(d => d[2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"//d => d[1] === dates[dates.length-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"//color = d3.scaleQuantile(d3.schemeRdPu[bins]).domain(clean.filter(d => d[1] === dates[dates.length-1]).map(d => d[2])); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"//path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"//projection = d3.geoAlbersUsa().ranslate( [width/2, height/2] );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"//states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));\nstates = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"us = FileAttachment(\"counties-albers-10m@9.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md\n` ## Import Useful Tools\nImport legend and date scrubber from Mike Bostok, and a general purpose slider from Jeremy Ashkenas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"//import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md\n`## Helper Functions\nHelper function to convert JS dates to format used in the data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"function dateToString(date) {\n var year = date.getFullYear();\n var month = (\"0\" + (date.getMonth() + 1)).slice(-2);\n var day = (\"0\" + date.getDate()).slice(-2);\n \n return `${year}-${month}-${day}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md\n`## Canvas Properties\nSet canvas properties, update behavior, and load D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"width = 500\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"update = map.update(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"import { viewof colorInterpolatorPicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"md\n`## References\n\n1. Animated Map of COVID-19 Cases:\nhttps://observablehq.com/@onoratod/animated-map-of-covid-19-cases\n\n2. Bivariate Choropleth:\nhttps://observablehq.com/@d3/bivariate-choropleth\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"