31:T15e5,{ const config = configAll.ageDatePlot; const logger = (...args) => console.log('ageDatePlot', ...args); const div = d3.create('div'); const infoList = div.append('ul'); const infoNumber = infoList.append('li'); const infoAge = infoList.append('li'); const infoNationality = infoList.append('li'); const infoConfirmDate = infoList.append('li'); const svg = div .append('svg') .classed('age-date-plot', true) .attr('width', config.width) .attr('height', config.height); // // // // // // arrowHead svg .append('defs') .append('marker') .attr('id', 'arrow-head') .attr('viewBox', '0 -5 10 10') .attr('refX', 5) .attr('refY', 0) .attr('markerWidth', 8) .attr('markerHeight', 8) .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5L10,0L0,5'); const stage = svg.append('g').attr(...ttrans(config.margin, config.margin)); const { ageMax, ageMin, contactMax, contactMin, dateStart, dateEnd } = calculated; const dateScaleX = d3 .scaleLinear() .domain([dateStart, dateEnd]) .range([0, config.clippedWidth]); const ageScaleY = d3 .scaleLinear() .domain([ageMax, 0]) .range([0, config.clippedHeight]); const xAxis = stage .append('g') .attr(...ttrans(0, config.clippedHeight)) .call( d3 .axisBottom(dateScaleX) .ticks(5) .tickFormat(d3.timeFormat("%m/%d")) ); const yAxis = stage.append('g').call(d3.axisLeft(ageScaleY)); const yAxisLabel = stage .append('text') .text('AGE') .attr(...ttrans(-30, -20)); const xAxisLabel = stage .append('text') .text('CONFIRMED DATE') .attr(...ttrans(config.clippedWidth - 200, config.clippedHeight - 30)); const onMouseEnter = (d, i, e) => { stage.selectAll(`.arrow-caused-${d.id}`).classed('hover', true); stage.select(`.patient-id-${d.id}`).classed('hover', true); stage.select(`.patient-id-${d.id} circle`).attr('r', 10); infoNumber.text(`Patient number ${d.id}`); infoAge.text(`Patient age ${d.age}`); infoConfirmDate.text( `Confirmed date ${d3.timeFormat("%m/%d")(d.confirmDate)}` ); infoNationality.text(`Nationality ${d.nationality}`); }; const onMouseLeave = (d, i, e) => { stage.selectAll(`.arrow-caused-${d.id}`).classed('hover', false); stage.select(`.patient-id-${d.id}`).classed('hover', false); stage.select(`.patient-id-${d.id} circle`).attr('r', 5); infoNumber.text(`Patient number -`); infoAge.text(`Patient age -`); infoConfirmDate.text(`Confirmed date -`); infoNationality.text(`Nationality -`); }; const drawCircle = plot => plot .append('circle') .attr('r', 5) .attr('data', d => JSON.stringify(d)); const drawPatientNumber = plot => plot .append('text') .classed('patient-number', true) .attr('transform', trans(5, -2.5)) .text(d => d.id); // ------------------------- function render() { const getPlotTrans = d => trans(dateScaleX(d.confirmDate), ageScaleY(d.age)); const enterPlot = plot => plot .append('g') // .classed('patient', true) .attr('class', d => `patient patient-id-${d.id}`) .classed('male', d => d.gender === 'm') .classed('female', d => d.gender === 'f') .attr('transform', getPlotTrans) .call(drawCircle) .call(drawPatientNumber); stage .selectAll('.patient') .data(patientData, d => d.id) .join(enterPlot); const getPatientById = id => patientData[id - 1]; const getArrowPath = (d, i) => { const endPatient = getPatientById(d.cause); const startX = dateScaleX(d.confirmDate) - 5; const startY = ageScaleY(d.age); const startPoint = [startX, startY]; const endX = dateScaleX(endPatient.confirmDate); const endY = ageScaleY(endPatient.age); const endPoint = [endX, endY]; const midX = (startX + endX) / 2 - Math.random() * 20 - 20; const midY = (startY + endY) / 2; const midPoint = [midX, midY]; return d3.line().curve(d3.curveNatural)([endPoint, midPoint, startPoint]); }; const enterArrow = plot => plot .filter(d => typeof d.cause === 'number') .append('path') .attr('class', d => `arrow arrow-id-${d.id} arrow-caused-${d.cause}`) .attr('d', getArrowPath) .attr('marker-end', 'url(#arrow-head)'); stage .selectAll('.arrow') .data(patientData, d => d.id) .join(enterArrow); // voronoi hitbox const delaunay = D3Delaunay.Delaunay.from( patientData, d => dateScaleX(d.confirmDate), d => ageScaleY(d.age) ); // data, fx, fy const voronoi = delaunay.voronoi([ 0, 0, config.clippedWidth, config.clippedHeight ]); const voronoiVisible = true; // debug key const voronoiPath = stage .append('g') .selectAll('voronoi-path') .data(patientData, d => d.id) .join('path') .attr('d', (d, i) => voronoi.renderCell(i)) .classed('voronoi-path', true) .attr('stroke-width', 1.0) .attr('stroke', voronoiVisible ? 'pink' : 'transparent') .attr('opacity', '0') .on('mouseover', onMouseEnter) .on('mouseleave', onMouseLeave); } render(); return div.node(); }32:T713,md` ## Superspreader Emerges There are some notable superspreaders in Korean COVID-19 cases. The patients with number 12, 16, 17, 29 and 31 contacted at least 100 people. In the early stage of outbreak, the patient No.3 was the most notorious among all; he ignored self-quarantine and report rule and has travelled widest distance alone, causing many human-to-human spread cases. As he refused cooperate with the government, it is still unclear how many people were affected. Fast forward to today, the patient No.31 is the biggest superspreader known so far, seems to have contacted at least 1000 people from her religious cult. It is unsure how many are actually infected. The people she infected are still in examination. ## 슈퍼 전파자가 등장하다 금번 코로나19에서는 눈여겨볼 만한 슈퍼 전파자가 있다. 12, 16, 17, 29 그리고 31번 확진자는 최소 100명을 접촉한 것으로 예상된다. 특히 질병이 시작된 초기에 환자 3번에 대해 매우 부정적인 여론이 형성되었다. 자가 격리 및 자가 보고 규칙을 무시하고 초창기 환자중에 가장 많은 지역을 이동하였으며, 상당한 수의 사람간 전염을 발생시켰다. 정부에 비협조적인 태도로 일관하여 정확히 얼마나 많은 접촉자들이 있었는지 여전히 불확실하다. 현재는 31번 확진자가 종교활동에서 최소 1000명 이상을 접촉하여 가장 큰 규모의 슈퍼 전파자가 되었으며, 얼마나 많은 감염자가 발생했는지 오리무중이다. 31번 환자로 인한 감염자는 여전히 조사중이다. move the mouse cursor over circles with patient number to focus: 확진자 번호 위의 원을 터치하거나 마우스를 갖다대면 확진자간의 전파 관계를 확인할 수 있다. `33:T14f2,{ const config = configAll.transmissionChart; const svg = d3 .create('svg') .classed('transmission-chain', true) .attr('width', config.width) .attr('height', config.height); const stage = svg .append('g') .attr(...ttrans(config.clippedWidth, config.margin)); const logger = (...args) => console.log('transmissionChart', ...args); // arrowHead const defs = svg.append('defs'); defs .append('linearGradient') .attr('id', 'mainGradient') .attr('gradientTransform', 'rotate(90)') .call(d => d .append('stop') .attr('stop-color', d3.interpolateViridis(0)) .attr('offset', '0') ) .call(d => d .append('stop') .attr('stop-color', d3.interpolateViridis(.5)) .attr('offset', '.5') ) .call(d => d .append('stop') .attr('stop-color', d3.interpolateViridis(1)) .attr('offset', '1') ); defs .append('marker') .attr('id', 'arrow-head') .attr('viewBox', '0 -5 10 10') .attr('refX', 5) .attr('refY', 0) .attr('markerWidth', 8) .attr('markerHeight', 8) .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5L10,0L0,5'); const contactAmountLabel = stage .append('text') .classed('label', true) .text('contacted people') .attr(...ttrans(20, -20)); const scaleY = d3 .scaleLinear() .domain([0, patientData.length - 1]) .range([0, config.clippedHeight]); const amountLegend = stage .append('g') .classed('legend', true) .attr(...ttrans(40, 0)) .call(a => a .append('rect') .attr('width', 10) .attr('height', 100) .attr('fill', 'url(#mainGradient)') ) .call(a => a .append('text') .attr(...ttrans(20, 0)) .text(calculated.contactMin) ) .call(a => a .append('text') .attr(...ttrans(20, 90)) .text(calculated.contactMax) ); const contactColorScale = d3 .scaleLinear() .domain([calculated.contactMin, calculated.contactMax]) .range([0, 1]); const contactColorScheme = d => { return d3.interpolateViridis(contactColorScale(d.contactAmount)); }; const drawCircle = patient => patient .append('circle') .classed('patient-bg', true) .attr('r', 10) .attr('fill', contactColorScheme); const drawPatientNumber = patient => patient .append('text') .classed('patient-number', true) .classed('textalign-center', true) .text(d => d.id); const drawContact = patient => patient .filter(d => d.contactAmount >= 1) .append('text') .classed('patient-contact', true) .text(d => d.contactAmount) .attr(...ttrans(15, -2.5)); const onPatientHover = (d, i, e) => { stage .select(`.patient-id-${d.id}`) .classed('hover', true) .raise(); stage.selectAll(`.arrow-caused-${d.id}`).classed('hover', true); stage.selectAll(`.patient-caused-${d.id}`).classed('caused', true); stage .select(`.patient-id-${d.id} circle`) .transition() .duration(200) .attr('r', 15); }; const onPatientLeave = (d, i, e) => { stage.select(`.patient-id-${d.id}`).classed('hover', false); stage.selectAll(`.arrow-caused-${d.id}`).classed('hover', false); stage.selectAll(`.patient-caused-${d.id}`).classed('caused', false); stage .select(`.patient-id-${d.id} circle`) .transition() .duration(200) .attr('r', 10); }; const drawHitbox = patient => patient .append('circle') .attr('r', 10) .attr('opacity', 0) .on('mouseenter', onPatientHover) .on('mouseleave', onPatientLeave); function render() { const enterPatient = patient => patient .append('g') .attr( 'class', d => `patient patient-id-${d.id} patient-caused-${d.cause}` ) .attr('transform', d => trans(0, scaleY(d.id))) .call(drawCircle) .call(drawPatientNumber) .call(drawContact) .call(drawHitbox); stage .selectAll('.patient') .data(patientData, d => d.id) .join(enterPatient); const getArrowPath = d => { const endPatient = patientData[d.cause - 1]; const diff = Math.abs(d.id - endPatient.id) + 1; const startPointY = scaleY(d.id); const startPoint = [0, startPointY]; const endPointY = scaleY(endPatient.id); const endPoint = [0, endPointY]; const midPoint = [ -diff * 5, ((startPointY + endPointY) / 2 + endPointY) / 2 ]; const midPoint2 = [ -diff * 5, ((startPointY + endPointY) / 2 + startPointY) / 2 ]; return d3.line().curve(d3.curveNatural)([ endPoint, midPoint, midPoint2, startPoint ]); }; const enterArrow = arrow => arrow .filter(d => typeof d.cause === 'number') .append('path') .attr('class', d => `arrow arrow-id-${d.id} arrow-caused-${d.cause}`) .attr('d', getArrowPath) .attr('transform', d => trans(-15, 0)) .attr('marker-end', 'url(#arrow-head)'); stage .selectAll('.arrow') .data(patientData, d => d.id) .join(enterArrow); } render(); return svg.node(); }34:Tab6,{ const config = configAll.hospitalChart; const svg = d3 .create('svg') .classed('hospital-chart', true) .attr('width', config.width) .attr('height', config.height); const stage = svg .append('g') .attr(...ttrans(config.marginHorizontal, config.marginVertical)); const labelHospitalized = stage .append('text') .classed('textalign-center', true) .attr(...ttrans(config.clippedWidth / 4, -30)) // on 1/4 .text('in hospital 🏥'); const labelReleased = stage .append('text') .classed('textalign-center', true) .attr(...ttrans((config.clippedWidth * 3) / 4, -30)) // on 3/4 .text('went back home 🏠'); const { dateStart, dateEnd } = calculated; const logger = (...args) => console.log('hospitalChart', ...args); const scaleDateY = d3 .scaleLinear() .domain([dateStart, dateEnd]) .range([0, config.clippedHeight]); const calculateDatum = (d, i, all) => { if (d.state === 'hospitalized') d.x = config.clippedWidth / 4; // on the 1/4 if (d.state === 'released') d.x = (config.clippedWidth * 3) / 4; // on the 3/4 d.y = scaleDateY(d.confirmDate); return d; }; let pdata = _.cloneDeep(patientData).map(calculateDatum); const simulation = d3 .forceSimulation(pdata) .force("x", d3.forceX(d => d.x)) .force("y", d3.forceY(d => d.y).strength(1)) // give more strength to Y axis .force("collide", d3.forceCollide(config.radius)) .stop(); for (var i = 0; i < 120; ++i) simulation.tick(); const axisDateY = d3 .axisLeft(scaleDateY) .ticks(10) .tickFormat(d3.timeFormat("%m/%d")) .tickSizeInner(config.clippedWidth) .tickSizeOuter(0); stage .append('g') .classed('axis-time', true) .attr(...ttrans(config.clippedWidth / 2, 0)) .call(axisDateY); stage .selectAll('.axis-time .tick') .call(g => g.select('text').attr(...ttrans(config.clippedWidth, 0))) .call(g => g.select('line').attr(...ttrans(config.clippedWidth / 2, 0))); const drawCircle = plot => plot.append('circle').attr('r', config.radius); const drawPatientNumber = plot => plot .append('text') .classed('textalign-center', true) .text(d => d.id); function render() { const enterPlot = plot => plot .append('g') .classed('plot', true) .classed('hospitalized', d => d.state === 'hospitalized') .classed('released', d => d.state === 'released') .attr('transform', d => trans(d.x, d.y)) .call(drawCircle) .call(drawPatientNumber); stage .selectAll('.plot') .data(pdata, d => d.id) .join(enterPlot); logger('pdata', { pdata, simulation }); } render(); return svg.node(); }35:T6a3,html` `36:[] 2f:{"title":"COVID-19(nCOV-2019) Outbreak in S.Korea","cells":[{"id":0,"value":"md`\n# COVID-19(nCOV-2019) Outbreak in S.Korea\n - shortened url: http://bit.ly/covid19kor\n - data: [Korean Center for Disease Control(KCDC) / 질병관리본부](http://ncov.mohw.go.kr)\n - by Sungryeol Park(박성렬)\n - Email: [sungryeolp@gmail.com](sungryeolp@gmail.com)\n - Instagram: [https://instagram.com/rabelais88](https://instagram.com/rabelais88)\n - Supports mobile view\n - Many parts of this visualization was made in the last minute of outbreak. The current number of estimated cases are at least 300 in South Korea and it is not included in this report.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\n## Beginning\nThe first batch of Korean COVID-19 patients are concentrated in middle aged adults and elderly who visited China; this is illustrated by a plot chart below. Red dots represent female patients, blue dots represent male. The arrow represents the human-to-human infection among patients. The numbers next to circles stand for patient number. The cases among youth is still rare(as of Feb 22).\n## 질병의 등장\n차트로 확인할 수 있듯이 첫 코로나19 환자들은 대부분 중국을 방문한 중년 또는 노년의 성인이다. 빨간 점은 여성 확진자를 나타내며, 파란 점은 남성 확진자를 나타낸다. 화살표는 확진자간의 감염을 나타낸다. 원 옆의 숫자는 확진자 번호를 뜻한다. 어린 나이에서의 확진자는 아직 빈번하지 않다.(2월 22일 기준)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md`\n## How many people are left the hospital?\nFeb 22: total of 82 cases of COVID-19 infection have been confirmed now in KCDC data. The data has become significantly unstable after patient 51, is not included in this visualized report. The government has simply lost track of the patients' detail. In the beginning of the outbreak, the speculation had been very optimistic because many of the early cases have shown that the patients were able to recover from the disease. Some of the early cases still remain such as patient No.5, 6, 9 are still in the hospital.\n## 얼마나 많은 확진자가 병원에 남아있나?\n질병관리본부(이하 질본)에 따르면 현재(2월 22일) 총 82명의 코로나19 확진자가 보고되어 있다. 51번째 환자 이후로는 너무 감염자 수가 많아 정보가 정확하게 집계되고 있지 않으며, 정확성을 상실하였기 때문에 이 시각화에 포함시키지 않는다. 여기서부터 질본은 환자 집계가 늦어지기 시작한 것 같다. 아래의 차트에서 보면 알 수 있듯, 초창기 환자 대부분은 좋은 회복력을 보여주었고, 많은 확진자들이 퇴원하여 전망이 매우 낙관적이었다. 그러나 5, 6, 9번 확진자처럼 초창기에 진단된 확진자 일부는 아직 병원에 남아있어, 이를 속단하기에는 아직 이르다고 볼 수 있다.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"D3Delaunay = require('d3-delaunay')","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"trans = (x,y) => `translate(${x},${y})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"ttrans = (x, y) => ['transform', trans(x, y)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"configAll = {\n const ageDatePlot = {\n width: width > 800 ? 800 : width,\n height: 700,\n margin: 30\n };\n\n ageDatePlot.clippedWidth = ageDatePlot.width - ageDatePlot.margin * 2;\n ageDatePlot.clippedHeight = ageDatePlot.height - ageDatePlot.margin * 2;\n\n const transmissionChart = {\n width: width > 600 ? 400 : width,\n height: 1200,\n margin: 50\n };\n\n transmissionChart.clippedWidth =\n transmissionChart.width - transmissionChart.margin * 2;\n transmissionChart.clippedHeight =\n transmissionChart.height - transmissionChart.margin * 2;\n\n const hospitalChart = {\n width: width > 800 ? 700 : width,\n height: 800,\n marginHorizontal: width > 800 ? 100 : 20,\n marginVertical: width > 800 ? 100 : 40,\n radius: 10\n };\n\n hospitalChart.clippedWidth =\n hospitalChart.width - hospitalChart.marginHorizontal * 2;\n hospitalChart.clippedHeight =\n hospitalChart.height - hospitalChart.marginVertical * 2;\n\n return {\n ageDatePlot,\n transmissionChart,\n hospitalChart\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"patientData = (await d3.tsv(patientUrl)).map(parsePatientRow);","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"parsePatientRow = p => ({\n ...p,\n id: parseInt(p.id, 10),\n birthYear: parseInt(p.birthYear, 10),\n cause: /([0-9]+)/.test(p.cause) ? parseInt(p.cause, 10) : p.cause,\n _cause: p.cause,\n confirmDate: new Date(p.confirmDate),\n age: parseInt(p.age, 10),\n contactAmount: p.contactAmount === '' ? -1 : parseInt(p.contactAmount, 10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"patientUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSX76cn1d97WX99fFhnwHRW50fxvpSW9P4BYP5CuWJPsbi7PV-1nd7n4We2I9x7HkgzxSyy3MjPR8i-/pub?gid=0&single=true&output=tsv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"calcUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSX76cn1d97WX99fFhnwHRW50fxvpSW9P4BYP5CuWJPsbi7PV-1nd7n4We2I9x7HkgzxSyy3MjPR8i-/pub?gid=697572856&single=true&output=tsv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"calculated = {\n const data = (await d3.tsv(calcUrl)).pop();\n\n return {\n ageMax: parseInt(data.ageMax, 10),\n ageMin: parseInt(data.ageMin, 10),\n contactMax: parseInt(data.contactMax, 10),\n contactMin: parseInt(data.contactMin, 10) || 0,\n dateStart: new Date(data.dateStart),\n dateEnd: new Date(data.dateEnd),\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}