34:["$","title",null,{"children":"Hong Kong COVID-19 cases relation visualization Part2 | ylchan87 | Observable"}] 3c:T11b9,viewof chart = { const links = data_links.map(d => Object.create(d)); const nodes = data_nodes2.map(d => Object.create(d)); //this init the x y properties for each of the objects in the links & nodes array const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.case_no)) .stop(); //loads the pre-simulated positions for (var i=0;i d.x, d => d.y); var selectedNode = ""; var currentColorScheme = colorByLocalness; var colorByIsSelected = n => { if (n===selectedNode) return "#333333"; if (n.group_name_zh===selectedNode.group_name_zh) return colorByGroup(n); return "#DDDDDD"; }; const flyInXOffset = chart_width*0.05; const flyInTOffset = -550; //graphics let svg = d3.create("svg") .attr("viewBox", [-chart_width / 2, -chart_height / 2, chart_width, chart_height]); svg.append("g") .call(xAxis); let legend = svg.append("g") .attr("opacity",1.0) .attr("transform", `translate(${-chart_width/2*0.95},${-chart_height/2*0.95})`) .call(ordinalLegend(colorByLocalnessMap, Math.max(6,12*chart_width/954))); let link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.0) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); let gnode = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.0) .selectAll("circle") .data(nodes, d => d.case_no) .join("circle") .attr("r", Math.max(1.5,chart_width/954*2.5)) .attr("fill", currentColorScheme) .attr("opacity", 0.0); // .call( n => n gnode.append("title") .text(d => d.case_no + " " + d.group_name_zh); let desc = svg.append("g") .attr("fill", "black") .selectAll("text") .data(nodes) .join("text") // .text(d => (d.case_no)); link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x + (d.classification_en=="Imported" ? flyInXOffset : 0) ) .attr("y2", d => d.target.y); gnode.attr("cx", d => d.x + (d.classification_en=="Imported" ? flyInXOffset : 0) ) .attr("cy", d => d.y) ; desc.attr("x", d => d.x) .attr("y", d => d.y); //animation gnode .transition() .delay(d => Math.max( 0,(x(d.confirmation_date)-x.range()[0]) / (x.range()[1] - x.range()[0]) * 2000 + (d.classification_en=="Imported" ? flyInTOffset : 0))) .duration(1000) .attr("opacity",1.0) .attr("cx", d => d.x) ; link.transition() .delay(d => (x(d.target.confirmation_date)-x.range()[0]) / (x.range()[1] - x.range()[0]) * 2000) .duration(1000) .attr("stroke-opacity", 0.6) .attr("x2", d => d.target.x) ; svg.property("value", selectedNode); //---------------------------------------- // https://stackoverflow.com/questions/29261304/how-to- // get-the-click-coordinates-relative-to-svg-element-holding-the-onclick-lis var pt = svg.node().createSVGPoint(); function selectNearestNode(evt) { pt.x = evt.clientX; pt.y = evt.clientY; // The cursor point, translated into svg coordinates var cursorpt = pt.matrixTransform(svg.node().getScreenCTM().inverse()); var nn = quadtree.find(cursorpt.x, cursorpt.y, parseInt(chart_width/50)); if (nn){ selectedNode = nn; updateColorScheme(colorByIsSelected); }else{ selectedNode = ""; updateColorScheme(currentColorScheme); } // svg.property("value", cursorpt); svg.property("value", selectedNode); svg.dispatch("input"); } //---------------------------------------- function updateColorScheme(cScheme) { const t = svg.transition().duration(750); gnode.call(n => n.transition(t) .attr("fill", cScheme) ); legend.transition(t).attr("opacity", cScheme===colorByLocalness? 1: 0); }; return Object.assign(svg.node(), { updateColorScheme: s =>{ updateColorScheme(s); currentColorScheme = s; }, // updateTime: inTime => updateTime(inTime), onclick: e => selectNearestNode(e) }); }3d:[{"id":"79f695f18ff3d33e8c6f8d2ca66e0d08fcc44e32138fde84060765a597d10672b90ed6d5a0e34cf73f77f42d92f34c40e823123832550cf9adea98422032f4c6","href":"https://static.observableusercontent.com/files/79f695f18ff3d33e8c6f8d2ca66e0d08fcc44e32138fde84060765a597d10672b90ed6d5a0e34cf73f77f42d92f34c40e823123832550cf9adea98422032f4c6","name":"frozen_sim_state.json","type":"application/json","lastModified":1586875094306.887,"size":188541}] 38:{"id":"5fec2c6770326e66","slug":"hong-kong-covid-19-cases-relation-visualization-part2","title":"Hong Kong COVID-19 cases relation visualization Part2","thumbnail":"d3c8d0d6770a29b8a7a9515dd564bcb3cf8d08dec9214621d7254c15280b6a26","access_level":"public","create_time":"$D2020-04-14T13:00:26.488Z","update_time":"$D2020-04-19T05:01:20.360Z","view_time":null,"first_public_time":"$D2020-04-19T05:01:24.856Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0c395a413984bf2d","login":"ylchan87","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a6746ff56e2484b9ac71ba25d0c588557e3f397a34abcb76526886fcf6d068","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":656,"publish_version":656,"role":null,"authored":false,"authors":[{"type":"individual","id":"644345ff95d2a151","login":"ylchan87","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a6746ff56e2484b9ac71ba25d0c588557e3f397a34abcb76526886fcf6d068","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"644345ff95d2a151","login":"ylchan87","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a6746ff56e2484b9ac71ba25d0c588557e3f397a34abcb76526886fcf6d068","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hong Kong COVID-19 cases relation visualization Part2","cells":[{"id":0,"value":"md`# Hong Kong COVID-19 cases relation visualization Part2\n\nChart shows time line and clustering of the first 1000 COVID-19 cases at Hong Kong, fron Jan to 12 Apr 2020.\n\n- *Choose color by \"Tracalibity\"* to see risk of uncontrolled spread. Imported cases are pale colored as they are from known source. Local cases without clear source are colored strongest as they indicate unknown and possibly uncontrollable spread within the local communnity.\n\n- *Choose color by \"Group\"* to see cases cluster. A cluster could be an infection chain, or people of similar charateristic (eg. traveled overseas) \n\n- *Click on any node* to see the group it is in, as well as further details in table form.\n\n- *Click at empty space* to unselect a node. \n\nLink between nodes indicates known relationship between cases.\n\nNode positions in the chart were precalculated by d3-force sim from [Part1](https://observablehq.com/@ylchan87/hk-covid-19-cases-relation-visualization-part1)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"viewof colorChoice = radio({\n title: 'Color by',\n options: [\n { label: 'Tracability', value: \"Tracability\" },\n { label: 'Group', value: \"Group\" },\n \n ],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"html`\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Case	#${chart.case_no}
Patient	${chart.age} yo. ${chart.gender==\"M\"? \"Male\": \"Female\"}
Diagnosed	${chart? chart.confirmation_date.toDateString(): \"---\"}
Group	${chart.group_name_en}
Description	${chart.detail_en}

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md `\n# Credits\nAll data are from https://wars.vote4.hk/cases, a group of volunteers that aggregate data from various sources and maintain a dedicated web portal, tracking the situation at Hong Kong continously, before COVID-19 was even coined a name.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`# Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"{\n if (colorChoice==\"Tracability\"){\n (viewof chart).updateColorScheme(colorByLocalness)\n }\n else if (colorChoice==\"Group\"){\n (viewof chart).updateColorScheme(colorByGroup)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"cls_zh = [\"輸入個案\", \"輸入個案的密切接觸者\", \n \"可能本地個案的密切接觸者\", \"可能本地個案\", \n \"本地個案的密切接觸者\", \"本地個案\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"cls_en = [\"Imported\", \"Close contact of imported case\", \n \"Close contact of possibly local\", \"Possibly local\", \n \"Close contact of local case\", \"Local\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"colorByLocalnessMap = {\n const colors = [\"#fdd49e\",\"#fdbb84\",\"#fc8d59\",\"#ef6548\",\"#d7301f\",\"#990000\"];\n return d3.scaleOrdinal(cls_en,colors).unknown(\"#000000\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"colorByLocalness = {\n return d => colorByLocalnessMap(d.classification_en);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"Array.from(new Set(data_nodes2.map(d=>d.classification_en)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"chart_width = Math.round(width*1.0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"chart_height = Math.round(chart_width*0.75)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"scaleFacX = (x.range()[1] - x.range()[0]) / 914 // 914 is width back when the sim is done","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"scaleFacY = (chart_height-margin.top-margin.bottom) / 676 // 716 is height back when the sim is done","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"colorByGroup = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => {\n if (d.group_name_zh===d.case_no) return \"#DDDDDD\"; // color code for 1 member only \"group\"\n return scale(d.group_name_zh); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${chart_height/2 - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80 ).tickFormat(d3.utcFormat(\"%b%d\")).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"x = d3.scaleTime()\n .domain( d3.extent(data_nodes2, row=>row['confirmation_date']) )\n .range([-chart_width/2+margin.left, chart_width/2-margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"//zero padding format for numbers\nfunction pad(num, size) {\n var s = num+\"\";\n while (s.length < size) s = \"0\" + s;\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof legend = {\n var svg = d3.create(\"svg\");\n\nsvg.append(\"g\")\n .attr(\"transform\", \"translate(0,0)\")\n .call(ordinalLegend(colorByLocalnessMap));\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"function ordinalLegend(scale, symbolSize=12){\n var keys = scale.domain();\n // var symbolSize = 12\n \n return inNode => {\n \n inNode.selectAll(\"mydots\")\n .data(keys)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", symbolSize/2)\n .attr(\"cy\", function(d,i){ return (i+0.5)*symbolSize*1.8}) \n .attr(\"r\", symbolSize/2)\n .style(\"fill\", function(d){ return scale(d)})\n\n inNode.selectAll(\"mylabels\")\n .data(keys)\n .enter()\n .append(\"text\")\n .attr(\"x\", symbolSize+10)\n .attr(\"y\", function(d,i){ return (i+0.5)*symbolSize*1.8}) \n // .style(\"fill\", function(d){ return color(d)})\n .text(function(d){ return d})\n .attr(\"font-size\", symbolSize)\n .attr(\"text-anchor\", \"left\")\n .style(\"dominant-baseline\", \"middle\")\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {data_links, data_nodes2} from \"@ylchan87/hk-covid-19-cases-relation-visualization-part1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"frozen_sim_state = await FileAttachment(\"frozen_sim_state.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md `# Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = {\n const d3 = await require(\"d3\", \"d3-array\", \"d3-svg-legend\");\n return d3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null