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

31:T9b6,map = { const width = 1200 const height = 600 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} ${format(data.get(d.id+" "+ dateToString(date)))}`); svg.append(legend) .attr("transform", "translate(100,500)"); //.attr("transform", "translate(870,450)"); 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)); //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 ; }); } 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}); }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":1641938307347.345,"size":745424},{"id":"c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","href":"https://static.observableusercontent.com/files/c3af4157bc9f946d2f26807b269d046fd5aee365321901ef0704b392e46069e0b12241ded8ac79de46b8eff5c73d49198535e789f930052fdb70f63c6d1d5d7f","name":"allcluster.csv","type":"text/csv","lastModified":1661016837934.716,"size":24464611}] 2f:{"title":"Animated Bivariate Map of COVID-19 2020~2022","cells":[{"id":229,"value":"md\n`# Animated Bivariate Map of COVID-19 2020~2022`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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\",year:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"$32","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":16,"value":"datestest = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/allcluster.csv\", d => {\n return d.date;\n });\n return [...new Set(data)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"dates = {\n const data = await FileAttachment(\"allcluster.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":963,"value":"testww = FileAttachment(\"allcluster.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":953,"value":"rrmap= {\n const testww = await FileAttachment(\"allcluster.csv\").csv();\n return new Map(testww.map(({id,rr_c,rr_l,date}) => [(id+ \" \"+date), [+rr_c, +rr_l]]))\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"data = Object.assign( \nrrmap\n,{title: [\"RR of cluster\", \"RR of county\"]},)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"datatest = 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 await d3.csv(\"https://raw.githubusercontent.com/YuLan1014/covid/main/allcluster.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"},{"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))","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 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@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":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"}