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

2f: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}); }30: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]} `; }31:[{"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}] 2d:{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1081,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"Source: https://geodacenter.github.io/workbook/6c_local_multi/lab6c.html","pinned":false,"hidden":false,"mode":"md"},{"id":1124,"value":"lisa2 = FileAttachment(\"LISA@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":935,"value":"data = Object.assign( \nrrmap\n,{title: [\"Bivariate LISA\"]},)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"labelsRR= [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"labels = [\"Group 1\", \"Group 2\",\"Group 3\", \"Group 4\"]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"//n = Math.floor(Math.sqrt(colors.length))\nn=5","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":395,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n return colors[value];\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":344,"value":"//clean.filter(d => d[1] === dates[dates.length-1]).map(d => d[2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"//d => d[1] === dates[dates.length-1]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":99,"value":"//path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"//projection = d3.geoAlbersUsa().ranslate( [width/2, height/2] );","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":408,"value":"us = FileAttachment(\"counties-albers-10m@9.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":174,"value":"//import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":224,"value":"md\n`## Canvas Properties\nSet canvas properties, update behavior, and load D3.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"width = 500\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"update = map.update(date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"import { viewof colorInterpolatorPicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}