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

36:null 37:["$","title",null,{"children":"Animated Bivariate Map of COVID-19 2021 | Yu Lan | Observable"}] 3d:T578,map = { const svg = d3.create("svg") //.attr("viewBox", [0, 0, 300, 200]); .attr("viewBox", [0, 0, 975, 610]); svg.append(legend) .attr("transform", "translate(870,450)"); //.attr("transform", "translate(870,450)"); var countyMap = svg.append("g") .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) .append("title") .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(data.get(d.id+" "+ dateToString(date)))}`); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Update the fill based on date scrubber function update(date) { countyMap.attr("fill", function(d) { var fclass = data.get(d.id+" "+dateToString(date)); //console.log(d.id+" "+dateToString(date)) //console.log(fclass) //console.log(data.get(d.id+" "+dateToString(date))) //if (fclass) { // var fcolor = color(fclass); // } else { // var fcolor = "#cccc"; // } // return fcolor ; }); } //return svg.node(); return Object.assign(svg.node(), {update}); }3e: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]} `; }3f:[{"id":"e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","href":"https://static.observableusercontent.com/files/e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","name":"counties-albers-10m@9.json","type":"application/json","lastModified":1654349198760.927,"size":745424}] 3b:{"id":"1bb1a1df2643b06e","slug":"animated-bivariate-map-of-covid-19-2021/2","title":"Animated Bivariate Map of COVID-19 2021","thumbnail":"c06f970666eed59b1ceff2b3d166d9bbd1a45ef71edf344cd1f7890c000803fe","access_level":"public","create_time":"$D2022-06-04T13:26:38.760Z","update_time":"$D2022-06-04T13:26:38.760Z","view_time":null,"first_public_time":"$D2022-06-04T13:27:03.910Z","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","bio":"","following":false},"version":744,"publish_version":744,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a70a00d294c89b6","login":"ylan1","name":"Yu Lan","avatar_url":"https://avatars-next.observableusercontent.com/e5addcb908a2668b70da74242c68e6d2d64a259b66ff96ec1b3dc4bc60367127","tier":null,"bio":"","following":false}],"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animated Bivariate Map of COVID-19 2021","cells":[{"id":229,"value":"md\n`# Animated Bivariate Map of COVID-19 2021`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md\n`This map shows the bivariate map of relative risk of cluster and relative risk of county. The value of two variables are ranged from lowest, low, medium to high. You can hover the county to get details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof colors = {\n const form = html``;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof date = Scrubber(dates.map(x => d3.timeParse(\"%Y-%m-%d\")(x)), {\n autoplay: false,\n loop: false,\n delay: 100,\n format: date => date.toLocaleString(\"en\", {month: \"long\", day: \"numeric\",year:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dates = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/allgis_res_2021.csv\", d => {\n return d.date;\n });\n return [...new Set(data)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"//counties = FileAttachment(\"us_states@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"data = Object.assign(new Map(\n await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/allgis_res_2021.csv\", ({ID,RR_C,RR_L,date}) => [(ID+ \" \"+date), [+RR_C, +RR_L]])), \n {title: [\"RR of cluster\", \"RR of county\"]}\n )\n\n//number of days within the cluster\n//https://raw.githubusercontent.com/YuLan1014/Vis/master/biv_1017.csv\n\n//number of days within the cluster with the thresholde of 14 days (rr>0)\n//https://raw.githubusercontent.com/YuLan1014/Vis/master/biv14_1001.csv\n\n//number of days within the cluster with the thresholde of 14 days (rr>1)\n//https://raw.githubusercontent.com/YuLan1014/Vis/master/biv14RR1_1001.csv\n//test\n//https://raw.githubusercontent.com/YuLan1014/Vis/master/test.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#D3CFE6\", \"#A5BEDB\", \"#76ADD0\",\"#489CC5\",\n \"#D0A2CE\", \"#A395C5\", \"#7588BA\",\"#477AB1\",\n \"#CD74B5\", \"#A06BAD\", \"#7361A4\",\"#46589C\",\n \"#CA479E\", \"#9E4196\", \"#713B8F\",\"#453687\"\n ]\n },\n {\n name: \"RdBu\", \n colors: [\n \"#D3CFE6\", \"#A5BEDB\", \"#76ADD0\",\"#489CC5\",\n \"#D0A2CE\", \"#A395C5\", \"#7588BA\",\"#477AB1\",\n \"#CD74B5\", \"#A06BAD\", \"#7361A4\",\"#46589C\",\n \"#CA479E\", \"#9E4196\", \"#713B8F\",\"#453687\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"//path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"//import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"width = 500\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"update = map.update(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 3c:"$3b:body"