2b:null 2c:["$","title",null,{"children":"Arc Diagram - Covid-19 Cases in Laos | Douangtavanh Kongphaly | Observable"}] 31:Tec2,chart = { const wrapper = d3.create("div").attr("class", "chart"); const svg = wrapper.append("svg").attr("height", height).attr("width", width); //Tooltip const tooltip = wrapper .append("div") .attr("class", "tooltip-for-chart") .attr("id", "tooltip-vis-map") .html( `` ) .style("opacity", 0); //xAxis: case let xAxisDraw = svg .append("g") .attr("id", "xAxis") .call(xAxis) .style("transform", `translateY(${height * 0.55}px)`) .style("color", "#838383"); //Text Axis xAxisDraw .append("text") .attr("id", "text-xAxis") .attr("x", width / 2) .attr("y", 50) .style("font-size", "12px") .style("fill", "#838383") .style("font-family", "Helvetica") .text("Case index"); //Create text lengend case for each circle const textCaseChart = svg.append("g").attr("class", "case-text"); data.nodes.map((d) => { textCaseChart .append("text") .attr("id", `case-${d.case}`) .datum(d) .attr("x", x(d.case) - 2) .attr("y", height / 2 + 20) .style("font-size", "12px") .text(`${d.case}`); }); //Create Path const arcs = svg.append("g"); arcs .selectAll("path") .data(data.link) .join("path") .attr("id", (d, i) => `node-${i}`) .attr("fill", "none") .attr("stroke", "#e8e8e8") .attr("stroke-width", 1.5) .attr("d", (d) => arc(d)); //Create circle const circleChart = svg.append("g"); data.nodes.map((d) => { circleChart .append("circle") .attr("id", `case-${d.case}`) .datum(d) .attr("cx", x(d.case)) .attr("cy", height / 2) .attr("r", circleSize(data.nodes.length)) .attr("fill", "#5ac8c8"); }); circleChart.selectAll("circle").on("mouseover", (event, datum) => { //Tooltip rectMouseOverStack(event, datum, x); //Highlight mouseover circle d3.select(event.target).classed("hover", true); //Highlight arc line arcs .selectAll("path") .filter((d, i) => d.target === datum.case || d.source === datum.case) .classed("hover", true); //Highlight circle let activeCircle = []; data.link.map((d) => { if (datum.case === d.source) { activeCircle.push(d.target); } if (datum.case === d.target) { activeCircle.push(d.source); } }); activeCircle.map((d) => { circleChart .selectAll("circle") .filter((j, k) => j.case === d) .classed("hover", true); textCaseChart .selectAll("text") .filter((j, k) => j.case === d) .classed("hover", true); }); }); circleChart.selectAll("circle").on("mouseout", (event, datum) => { //Tooltip rectMouseLeaveStack(); //Highlight circle d3.select(event.target).classed("hover", false); arcs .selectAll("path") .filter((d, i) => d.target === datum.case || d.source === datum.case) .classed("hover", false); let activeCircle = []; data.link.map((d) => { if (datum.case === d.source) { activeCircle.push(d.target); } if (datum.case === d.target) { activeCircle.push(d.source); } }); activeCircle.map((d) => { circleChart .selectAll("circle") .filter((j, k) => j.case === d) .classed("hover", false); textCaseChart .selectAll("text") .filter((j, k) => j.case === d) .classed("hover", false); }); }); return wrapper.node(); }32:T413,html` `33:[] 2f:{"id":"a1f817b2740e14a5","slug":"arc-diagram-covid-19-cases-in-laos","title":"Arc Diagram - Covid-19 Cases in Laos","thumbnail":"d4fe9c5b335b65b6d141790f786b34e30ed8a7d2d3a532086c82af26d904493e","access_level":"public","create_time":"$D2021-04-24T17:12:17.258Z","update_time":"$D2021-07-24T07:50:26.522Z","view_time":null,"first_public_time":"$D2021-04-25T10:06:55.914Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3018b7145a923605","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/60ab1a97785893547cbab516f323284edf4040a54b237939540bbdcf0715f3f1","tier":"starter_2024"},"version":402,"publish_version":402,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6fd38622cdc8db7","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/bf59f6200519f0a141fe723961e8b217a8c0829b25b43fba872cf8e9f5a08878","tier":null}],"members":[{"type":"individual","id":"b6fd38622cdc8db7","login":"douangtavanh","name":"Douangtavanh Kongphaly","avatar_url":"https://avatars-next.observableusercontent.com/bf59f6200519f0a141fe723961e8b217a8c0829b25b43fba872cf8e9f5a08878","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Arc Diagram - Covid-19 Cases in Laos","cells":[{"id":0,"value":"md`# Arc Diagram - Covid-19 Cases in Laos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"viewof minData = Range(caseRange, {\n value: 1,\n step: 1,\n label: \"View a case from:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"viewof maxData = Range([minData, caseRange[1]], {\n value: caseRange[1],\n step: 1,\n label: \"To case:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"//Tooltip for Bar Chart section Viz1\nrectMouseOverStack = (event, datum, xScale) => {\n // let clientMouseX = d3.pointer(event)[0];\n // let clientMouseY = d3.pointer(event)[1];\n d3.select(\"#data-tooltip-date\").html(`Date: ${datum[\"date_registered\"]}`);\n d3.select(\"#data-tooltip-case\").html(`Case: ${datum[\"case\"]}`);\n d3.select(\"#data-tooltip-age\").html(`Age: ${datum[\"age\"]}`);\n d3.select(\"#data-tooltip-gender\").html(`Gender: ${datum[\"gender\"]}`);\n d3.select(\".tooltip-for-chart\")\n .style(\"opacity\", 0.7)\n .style(\n \"transform\",\n `translate(` +\n `calc(-50% + ${x(datum.case)}px),` +\n `calc(-100% + ${height / 2}px)` +\n `)`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"rectMouseLeaveStack = () => {\n d3.selectAll(\".tooltip-for-chart\")\n .style(\"opacity\", 0)\n .transition()\n .duration(0.2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"data.nodes.map((d) => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"//Function for circle size\ncircleSize = (dataset) => {\n let length = dataset;\n let r_defualt = 4;\n if (length < 30) {\n r_defualt = 7;\n } else if (length >= 30) {\n r_defualt = 5;\n }\n return r_defualt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"//xAxis\nxAxis = d3.axisBottom().scale(x).tickValues([minData, 30, 60, 90, maxData])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"arc = (d) => {\n const x1 = x(d.source);\n const x2 = x(d.target);\n const r = Math.abs(x2 - x1) / 2;\n return `M${x1} ${height / 2} A ${r},${r} 0,0,${x1 < x2 ? 1 : 0} ${x2},${\n height / 2\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"x = d3\n .scalePoint()\n .domain(data[\"nodes\"].map((d) => d.case))\n .range([dms.left, width - dms.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"target = data.link.map((d) => d.target)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"source = data.link.map((d) => d.source)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"data = ({\n nodes: importData.nodes.slice(minData - 1, maxData),\n link: importData.link\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"caseRange = d3.extent(importData.nodes, (d) => d.case)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"importData = d3.json(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"url = \"https://raw.githubusercontent.com/douangtavanh/covid19-data-visualization-laos/master/data/caes_link.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"dms = ({\n top: 20,\n right: 20,\n bottom: 20,\n left: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"width = 910","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"