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

31:T51f,map = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 610]); svg.append(legend) .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}); }32: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]} `; }33:[{"id":"e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","href":"https://static.observableusercontent.com/files/e006bc50810dbc00e9b0f0af7920c1b1a08a10d5983220090195290a1fbb112e3552eb5298206c9334b0468cf1b427969b5d18ddcd4b77665df2b675ef128bd6","name":"counties-albers-10m@9.json","type":"application/json","lastModified":1604971405037.984,"size":745424}] 2f:{"title":"Animated Bivariate Map of COVID-19","cells":[{"id":229,"value":"md\n`# Animated Bivariate Map of COVID-19`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md\n`This map shows the bivariate map of relative risk and number of days that a county is in the cluster within the past 14 dyas (the relative risk is higher than 1). 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"},{"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"},{"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\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"$32","pinned":true,"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":16,"value":"dates = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/Vis/master/biv14RR1_1001.csv\", d => {\n return d.date;\n });\n return [...new Set(data)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"//counties = FileAttachment(\"us_states@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"data = Object.assign(new Map(\n await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/Vis/master/biv14RR1_1001.csv\", ({LOC_ID, date, REL_RISK, cc}) => [(LOC_ID+ \" \"+date), [+REL_RISK, +cc]])), \n {title: [\"Relative Risk\", \"#HighRiskCluster\"]}\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"},{"id":387,"value":"labels = [\"lowest\", \"low\",\"medium\", \"high\"]\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":389,"value":"n = Math.floor(Math.sqrt(colors.length))","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))\n//y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))\ny = 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 let [a, b] = value;\n return colors[y(b) + x(a) * n];\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":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"},{"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@5\")","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 = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"update = map.update(date)","pinned":false,"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":"$W33","stdlib":"1","titling":"auto"}