32:T12a7,viewof chart = { let filteredData; if(sorting !== "time") { filteredData = [].concat.apply([], dataByRegion.map(d=>d.values)); } else { filteredData = data.sort((a,b)=> a.start-b.start); } filteredData.forEach(d=> d.color = d3.color(color(d.vaccine))) let parent = this; if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom+10).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) // Add top axis label: // svg.append("text") // .attr("text-anchor", "middle") // .attr("x", 0) // .attr("y", margin.top-30 ) // .text("🍺"); const hitLine = g.append("g") .attr("transform", `translate(${x(hit)}, 0)`); hitLine.append("polyline") .attr("stroke", "red") .attr("stroke-width", 2) .attr("stroke-dasharray", "5, 5") .attr("points", [[0, margin.top-60], [0, height-88]]); hitLine.append("text") .attr("x", 0) .attr("y", margin.top-80) .style("text-anchor", "middle") .style("fill", "red") .style("paint-order", "stroke fill") .style("stroke", "white") .style("stroke-width", 4) .style("stroke-opacity", .8) .text("🍺"); hitLine.append("text") .attr("x", 0) .attr("y", height-75) .style("text-anchor", "middle") .style("fill", "red") .style("paint-order", "stroke fill") .style("stroke", "white") .style("stroke-width", 4) .style("stroke-opacity", .8) .text("🎇"); svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom+10})`) .call(axisBottom) // Add bottom axis label: svg.append("text") .attr("text-anchor", "middle") .attr("x", (width+margin.left+margin.right)/2) .attr("y", height-margin.bottom+45 ) .text("Số ngày tính từ 24/2/2021 (lô đầu tiên về nước)"); // Today const todayColor = "gray"; //const todayColor = "#A857AA"; const gToday = g.append("g") .attr("transform", `translate(${x(currentDay)},0)`); gToday.append("line") .attr("class", "today") .style("stroke-width", "1.5") .style("stroke-dasharray", "3") .style("stroke", todayColor) .attr("x1", 0) .attr("x2", 0) .attr("y1", margin.top-60) .attr("y2", height-88); gToday.append("path") .attr("d", `M0,${height-89} L -10,${height-83} L 10,${height-83}`) .style("fill", todayColor); gToday.append("text") .attr("dy", height-74.5) .style("text-anchor", "middle") .style("font-size", 10) .style('text-transform', 'uppercase') .style("fill", todayColor) .text(Math.round(currentDay)); gToday.append("text") .attr("dy", margin.top-61) .style("text-anchor", "middle") .style("font-size", 10) .style('text-transform', 'uppercase') .style("fill", todayColor) .text("today"); gToday.append("text") .attr("dy", margin.top-50) .style("text-anchor", "middle") .style("font-size", 10) .style('text-transform', 'uppercase') .style("fill", todayColor) .text("(10.21816M AZ)"); svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y +=140; if(x>width/2) x-= 130 else x+= 25; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; } else { const civs = d3.selectAll(".civ") civs.data(filteredData, d=>d.stage) .transition() // .delay((d,i)=>i*10) .ease(d3.easeCubic) .attr("transform", (d,i)=>`translate(0 ${y(i)})`) } return parent }33:[{"id":"812671bbfbe294eef7807664fd0f87433ebc1ac9c9f74ff2b60cdd4a8acf7c883bc032d245b57800f579fba2f81d2d0ff06ad9dbb1b4986cfe32b5eeadd46683","href":"https://static.observableusercontent.com/files/812671bbfbe294eef7807664fd0f87433ebc1ac9c9f74ff2b60cdd4a8acf7c883bc032d245b57800f579fba2f81d2d0ff06ad9dbb1b4986cfe32b5eeadd46683","name":"vaccine_VN - in (3)@2.csv","type":"text/csv","lastModified":1614265215595.536,"size":538},{"id":"2e90f6b69a0b5981827cabd124c34703ceb123ee973f98182d724d167766aef6f8cc4005b671f2543747118fb9b7eb14fd6f4b8dc5e47af5d40de3e1aa0cbd71","href":"https://static.observableusercontent.com/files/2e90f6b69a0b5981827cabd124c34703ceb123ee973f98182d724d167766aef6f8cc4005b671f2543747118fb9b7eb14fd6f4b8dc5e47af5d40de3e1aa0cbd71","name":"vaccine_VN - in (3)@3.csv","type":"text/csv","lastModified":1614358899173.945,"size":718},{"id":"ed4ac7b892cf5f21de042cbfb7e1bd370e13315df9ace5efe4a2b330bbe67f4fa453dee0114f4a9535867ace7f99092325646f27416527381dba3ac8944be995","href":"https://static.observableusercontent.com/files/ed4ac7b892cf5f21de042cbfb7e1bd370e13315df9ace5efe4a2b330bbe67f4fa453dee0114f4a9535867ace7f99092325646f27416527381dba3ac8944be995","name":"vaccine_VN - in (3)@4.csv","type":"text/csv","lastModified":1614555102031.288,"size":718},{"id":"cd2f60df94465c57ba78092ebcd6e3756e7e6b4cfbed8c9ce3158e80bde5d3f54cf3a30fb4158ad89e7b0c6866920e6afb2db60e04f2da82ff961f1a5d90a11a","href":"https://static.observableusercontent.com/files/cd2f60df94465c57ba78092ebcd6e3756e7e6b4cfbed8c9ce3158e80bde5d3f54cf3a30fb4158ad89e7b0c6866920e6afb2db60e04f2da82ff961f1a5d90a11a","name":"vaccine_VN - in (3)@5.csv","type":"text/csv","lastModified":1615458799670.622,"size":648},{"id":"886b0eb8e2221a50a9e27b8ca4881e7d773756919b84c453ef85c7cb759529ef1e51f30635f439889b3125cd70f040366c7e783c474b1f6b80fd5ed07861cb6e","href":"https://static.observableusercontent.com/files/886b0eb8e2221a50a9e27b8ca4881e7d773756919b84c453ef85c7cb759529ef1e51f30635f439889b3125cd70f040366c7e783c474b1f6b80fd5ed07861cb6e","name":"vaccine_VN - in (3)@6.csv","type":"text/csv","lastModified":1615460263360.048,"size":648},{"id":"a434bed22e3e80d0507b33a052027388999daac8c61f273d3a8f779e94b72348a6d54df3e578aba659fef6b05ea75b8a77fe7698cb8586ea4d8214c9bb9b84be","href":"https://static.observableusercontent.com/files/a434bed22e3e80d0507b33a052027388999daac8c61f273d3a8f779e94b72348a6d54df3e578aba659fef6b05ea75b8a77fe7698cb8586ea4d8214c9bb9b84be","name":"vaccine_VN - in (3)@7.csv","type":"text/csv","lastModified":1615460967900.639,"size":648},{"id":"8aa09257d876ca6884607a1c296f95bbbfb255560a295307f66d5dc67e74400f89f2c0bbc4bd113807591c4b34606dfd915523d862e518e6af67aea7378c60d1","href":"https://static.observableusercontent.com/files/8aa09257d876ca6884607a1c296f95bbbfb255560a295307f66d5dc67e74400f89f2c0bbc4bd113807591c4b34606dfd915523d862e518e6af67aea7378c60d1","name":"vaccine_VN - in (3)@8.csv","type":"text/csv","lastModified":1615555819226.377,"size":648},{"id":"2d988270eb3b0f4dbfaf04e4aa520bfd6959e07b3d3b90a8acfc8af014b313858f21dd70892d3daf8882bbfd493b14ebec213ea1fbbff3ee243080ab0b11d4bb","href":"https://static.observableusercontent.com/files/2d988270eb3b0f4dbfaf04e4aa520bfd6959e07b3d3b90a8acfc8af014b313858f21dd70892d3daf8882bbfd493b14ebec213ea1fbbff3ee243080ab0b11d4bb","name":"vaccine_VN - in (3)@9.csv","type":"text/csv","lastModified":1617367653351.693,"size":647},{"id":"20e1f2914955d6927912218569826e9cbd25bb56c722315c9ff3b2bc61d21567b961521d0469b842906c675a4e04df6c428e5633b6727ae3bd9be763c995e1fe","href":"https://static.observableusercontent.com/files/20e1f2914955d6927912218569826e9cbd25bb56c722315c9ff3b2bc61d21567b961521d0469b842906c675a4e04df6c428e5633b6727ae3bd9be763c995e1fe","name":"vaccine_VN - in (3)@10.csv","type":"text/csv","lastModified":1617368856625.99,"size":647},{"id":"7734255aa96bf41d5d8943874e96a0c7d40fdf3b1396c0bab38c537b95cb6ffc2599f5df02e97cb61c6664ccc3c710d910b6cb95f26e23a5e679774f080e1e47","href":"https://static.observableusercontent.com/files/7734255aa96bf41d5d8943874e96a0c7d40fdf3b1396c0bab38c537b95cb6ffc2599f5df02e97cb61c6664ccc3c710d910b6cb95f26e23a5e679774f080e1e47","name":"vaccine_VN - in (3)@22.csv","type":"text/csv","lastModified":1627045628900.475,"size":801},{"id":"8aa5ca6c7b7c5e60fcdd61444fde797fc724781367be31cbf8ff4cce0ad9b081b1e6e8ae490d69c627f2c05932aeaec381a2750e9a9b9faa1960ce5bc32a6122","href":"https://static.observableusercontent.com/files/8aa5ca6c7b7c5e60fcdd61444fde797fc724781367be31cbf8ff4cce0ad9b081b1e6e8ae490d69c627f2c05932aeaec381a2750e9a9b9faa1960ce5bc32a6122","name":"vaccine_VN - in (3)@18.csv","type":"text/csv","lastModified":1625824632956.244,"size":722},{"id":"705b1ffcd8b27e71d0b723bdd0567570892a79fd1a08308995619fe5095ef15cc1232d1a044038bf40abe00da033f49c47dd5b08efd17b2fa9e9631185ee8af7","href":"https://static.observableusercontent.com/files/705b1ffcd8b27e71d0b723bdd0567570892a79fd1a08308995619fe5095ef15cc1232d1a044038bf40abe00da033f49c47dd5b08efd17b2fa9e9631185ee8af7","name":"vaccine_VN - in (3)@19.csv","type":"text/csv","lastModified":1625824721789.363,"size":722},{"id":"da9a90e64d8c4895a08e31e7debd95bb3bc0a4fce47ff5e02efcaf08bfe7ee5054ec7a78a3331ec216351b9ef289a92930d36feff3bb95f5313e7e0fe1b096aa","href":"https://static.observableusercontent.com/files/da9a90e64d8c4895a08e31e7debd95bb3bc0a4fce47ff5e02efcaf08bfe7ee5054ec7a78a3331ec216351b9ef289a92930d36feff3bb95f5313e7e0fe1b096aa","name":"vaccine_VN - in (3)@20.csv","type":"text/csv","lastModified":1625824872497.894,"size":722},{"id":"2c48a219cbf02fefc4c8377fe202210d14ee9cb5a99b74c1371dd409460c71b1b2861a35e054eeb3092a48c0d3a100ac01ccdb622a40e6b0f2d91d4ede2c8278","href":"https://static.observableusercontent.com/files/2c48a219cbf02fefc4c8377fe202210d14ee9cb5a99b74c1371dd409460c71b1b2861a35e054eeb3092a48c0d3a100ac01ccdb622a40e6b0f2d91d4ede2c8278","name":"vaccine_VN - in (3)@23.csv","type":"text/csv","lastModified":1627570780513.253,"size":803},{"id":"b5d69fd02f00350e6fcaab69bfff45c07454252dc30ec45d485e674ba87c74b149a9bb59587d8dc0c8eff9e7528f393f58cba4dd45250c4cea026dd99496dc5a","href":"https://static.observableusercontent.com/files/b5d69fd02f00350e6fcaab69bfff45c07454252dc30ec45d485e674ba87c74b149a9bb59587d8dc0c8eff9e7528f393f58cba4dd45250c4cea026dd99496dc5a","name":"vaccine_VN - in (3)@24.csv","type":"text/csv","lastModified":1627571220826.305,"size":809},{"id":"544d153b5389a688715fcd23290d9217c9a00bac6a9e85362e4d2664108dee73208d98c876b03a4b2af36ba35ab23eda295fa8feebac8e0f5d41ee98c19d778d","href":"https://static.observableusercontent.com/files/544d153b5389a688715fcd23290d9217c9a00bac6a9e85362e4d2664108dee73208d98c876b03a4b2af36ba35ab23eda295fa8feebac8e0f5d41ee98c19d778d","name":"vaccine_VN - in (3)@12.csv","type":"text/csv","lastModified":1620980291123.369,"size":650},{"id":"7b5e51f6f489a48d76145cdae737d05480cde5b1c6408821f6ad865a22780fe7b430da533d9005d62c588c87cae35b6c58950c0b167b3cf3059b52d3c72f634e","href":"https://static.observableusercontent.com/files/7b5e51f6f489a48d76145cdae737d05480cde5b1c6408821f6ad865a22780fe7b430da533d9005d62c588c87cae35b6c58950c0b167b3cf3059b52d3c72f634e","name":"vaccine_VN - in (3)@13.csv","type":"text/csv","lastModified":1620980925084.439,"size":642},{"id":"cd22c0d90f0190a12c6743e1e7bd4bac9a64512b682e81749694115b1fbef02f7ac6ebe109ecfb0bca2a18c32e6476372814b12e4e0be7baae4efe689b1b2e7b","href":"https://static.observableusercontent.com/files/cd22c0d90f0190a12c6743e1e7bd4bac9a64512b682e81749694115b1fbef02f7ac6ebe109ecfb0bca2a18c32e6476372814b12e4e0be7baae4efe689b1b2e7b","name":"vaccine_VN - in (3)@14.csv","type":"text/csv","lastModified":1620981519552.809,"size":642},{"id":"5252613f5ae53051aae78de1948fb1baa8e6047730e6a52cabcc9bc3fccd78b8e01489d6847a8cc40b2eb7c207fddf71d6b861cdb650c45f1cce009e851c95ab","href":"https://static.observableusercontent.com/files/5252613f5ae53051aae78de1948fb1baa8e6047730e6a52cabcc9bc3fccd78b8e01489d6847a8cc40b2eb7c207fddf71d6b861cdb650c45f1cce009e851c95ab","name":"vaccine_VN - in (3)@15.csv","type":"text/csv","lastModified":1620981649200.173,"size":642},{"id":"a9c621b1738391ed35ea7e0c3303e30b2cb60bcef66d151060a62106726a573cdc69bae20e658b95cda695c1b76738250ba6d9b0cbbf8b6f1e08df35999df461","href":"https://static.observableusercontent.com/files/a9c621b1738391ed35ea7e0c3303e30b2cb60bcef66d151060a62106726a573cdc69bae20e658b95cda695c1b76738250ba6d9b0cbbf8b6f1e08df35999df461","name":"vaccine_VN - in (3)@17.csv","type":"text/csv","lastModified":1622025176219.507,"size":720},{"id":"6da5a0a303089f4bb5f9cb0174da62064bb760d7e377329dfe596fcac4aa63fbaa9b25b9fae32a194c742b1ecdbc8ee9de7579167b1a2108d8143b40fad81298","href":"https://static.observableusercontent.com/files/6da5a0a303089f4bb5f9cb0174da62064bb760d7e377329dfe596fcac4aa63fbaa9b25b9fae32a194c742b1ecdbc8ee9de7579167b1a2108d8143b40fad81298","name":"vaccine_VN - in (3)@25.csv","type":"text/csv","lastModified":1628257718004.184,"size":888},{"id":"742ad6e3b1eb90395be8f0de85d3a82a8e081071285c244893360ef222b38342db68350db4fe5cf99614e4b42bbba0a71ff29134655cae357098d93ecdce710d","href":"https://static.observableusercontent.com/files/742ad6e3b1eb90395be8f0de85d3a82a8e081071285c244893360ef222b38342db68350db4fe5cf99614e4b42bbba0a71ff29134655cae357098d93ecdce710d","name":"vaccine_VN - in (3)@21.csv","type":"text/csv","lastModified":1626339701694.102,"size":724},{"id":"ac2bfd39fc91f466c259947d60a3b74f54e76bd1e78a297e1a6f01bde2f1b88edbcd8b1edf9d76d61a9f985bb2da116e5980ecf0e3331a97a0930423a7e5d187","href":"https://static.observableusercontent.com/files/ac2bfd39fc91f466c259947d60a3b74f54e76bd1e78a297e1a6f01bde2f1b88edbcd8b1edf9d76d61a9f985bb2da116e5980ecf0e3331a97a0930423a7e5d187","name":"vaccine_VN - in (3)@26.csv","type":"text/csv","lastModified":1628879573064.996,"size":968},{"id":"7e8d5100c2c3a825a36d17ddec0cfdcf2383b833b1029d27e38936861e5f3714cec8cfb398c4b0f7fbae0f3833c4dd2db698b6d5d3821209a338ddd1de498ec8","href":"https://static.observableusercontent.com/files/7e8d5100c2c3a825a36d17ddec0cfdcf2383b833b1029d27e38936861e5f3714cec8cfb398c4b0f7fbae0f3833c4dd2db698b6d5d3821209a338ddd1de498ec8","name":"vaccine_VN - in (3)@27.csv","type":"text/csv","lastModified":1629665012866.17,"size":1048},{"id":"a8683cc9b0728a1d4813897d78db076c49e39225d3c0d69845082e4a2170cff076a8b1f00819d5ff0c8b760c246fb1908a2263a1c091ef3ea89e027068f15f74","href":"https://static.observableusercontent.com/files/a8683cc9b0728a1d4813897d78db076c49e39225d3c0d69845082e4a2170cff076a8b1f00819d5ff0c8b760c246fb1908a2263a1c091ef3ea89e027068f15f74","name":"vaccine_VN - in (3)@28.csv","type":"text/csv","lastModified":1630485135054.207,"size":1228}] 30:{"title":"","cells":[{"id":0,"value":"viewof title = md`## Chi tiết lịch trình các đợt cung ứng vaccine COVID-19 ở Việt Nam (số liệu lấy từ báo [LAO ĐỘNG](https://laodong.vn/infographic/60-trieu-lieu-vaccine-covid-19-tai-viet-nam-se-ve-viet-nam-khi-nao-886851.ldo)) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"viewof countdown = md`### Số liều vaccine mua của AstraZeneca qua VNVC (30 triệu) đã nhập về VN: 10218160. Đồng hồ đếm ngược đến 01/01/2022: ${clock}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"clock = {\n const p = md`## ${days} ngày ${hours}:${minutes}:${seconds}`;\n p.style.color = d3.interpolateRainbow(now /(1000));\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof sorting = select({title: 'Sorted by', options:[\"vaccine\",\"time\"], value:\"vaccine\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"dashboard = html` \n \n

\n ${viewof chart}\n ${viewof note}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"viewof note = md `#### ⚠️ Hover your mouse over the bars to see more info `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"seconds = Math.round(((((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24 - Math.trunc((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24))*60) - Math.trunc(((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24 - Math.trunc((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24))*60))*60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"minutes =Math.trunc(((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24 - Math.trunc((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24))*60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"hours = Math.trunc((((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24) - Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24)))*24)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"days = Math.trunc(((new Date(\"2022/01/01\") - new Date(now)))/(1000*60*60*24))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"dayleft = Math.round(hit - currentDay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"startOfDelivery = new Date(\"2021/02/24\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"currentDay = {\n const today = new Date();\n const diff = (today - startOfDelivery)/(1000*60*60*24);\n return (diff);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"hit = {\n const ny = new Date(\"2021-12-31T24:00:00\");\n const diff = (ny - startOfDelivery)/(1000*60*60*24);\n return (diff);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"day21 = {\n const ny = new Date(\"2021/05/25\");\n const diff = (ny - startOfDelivery)/(1000*60*60*24);\n return (diff);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"getTooltipContent = function(d) {\nreturn `${d.stage}\n
\n${d.vaccine}\n
\n${d.timeline}\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"width = window.defWidth || window.innerWidth * 0.98","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"\n y= d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.2)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"x = d3.scaleLinear()\n .domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])\n .range([0, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"xtop = d3.scaleTime()\n .domain([new Date(\"2021/02/24\"),new Date(\"2022/07/01\")])\n .range([0, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"margin = ({top: 50, right: 40, bottom: 50, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"createTooltip = function(el) {\n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"11px sans-serif\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"getRect = function(d){\n const el = d3.select(this);\n const sx = x(d.start);\n const mi = (x(d.end) + x(d.start))/2;\n const w = x(d.end) - x(d.start);\n const isLabelRight =(sx > width/2 ? sx+w < width : sx-w>0);\n\n el.style(\"cursor\", \"pointer\")\n\n el\n .append(\"rect\")\n .attr(\"x\", sx)\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", w)\n .attr(\"fill\", d.color);\n\n el\n .append(\"text\")\n .text(d.stage)\n //.attr(\"x\",isLabelRight ? sx-5 : sx+w+5)\n .attr(\"x\", sx)\n .attr(\"y\", 4.5)\n .attr(\"fill\", \"black\")\n //.style(\"text-anchor\", isLabelRight ? \"end\" : \"start\")\n .style(\"dominant-baseline\", \"hanging\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"dataByTimeline = d3.nest().key(d=>d.timeline).entries(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"dataByRegion = d3.nest().key(d=>d.vaccine).entries(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"axisBottom = d3.axisBottom(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"axisTop = d3.axisTop(xtop)\n .tickPadding(2)\n .tickFormat(d3.timeFormat(\"%d/%m/%y\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"formatDateTop = d=> `${d}`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"formatDate = d=> d < 0 ? `${-d}BC` : `${d}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"csv =d3.csvParse(await FileAttachment(\"vaccine_VN - in (3)@28.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"data = csv.map(d=>{\nreturn {\n ...d,\n start: +d.start,\n end: +d.end\n}\n}).sort((a,b)=> a.start-b.start);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"date = csv.map(d=>{\nreturn {\n ...d,\n start: +d.startLabel,\n end: +d.endLabel\n}\n}).sort((a,b)=> a.startLabel-b.startLabel);","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"regions = d3.nest().key(d=>d.stage).entries(data).map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"timelines = dataByTimeline.map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"color = d3.scaleOrdinal(d3.schemeSet2).domain(regions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"html`CSS`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}