31:T1a87,{ const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .attr('font-family', 'Roboto Condensed, sans-serif'); const defs = svg.append('defs'); const newCases = defs.append('clipPath').attr('id', "newCases"); const over40Cases = defs.append('clipPath').attr('id', "over40Cases"); const over60Cases = defs.append('clipPath').attr('id', "over60Cases"); const filter = svg.append('filter').attr('id', 'shadow'); filter .append('feGaussianBlur') .attr('in', 'SourceAlpha') .attr('stdDeviation', 1); filter .append('feComponentTransfer') .append('feFuncA') .attr('type', 'linear') .attr('slope', 0.5); filter .append('feOffset') .attr('dx', 0) .attr('dy', 0); const feMerge = filter.append('feMerge'); feMerge.append('feMergeNode'); feMerge.append('feMergeNode').attr('in', 'SourceGraphic'); newCases .selectAll('circle') .data(dates) .join('circle') .attr( 'transform', d => `translate( ${monthTransform(d.getMonth() + 1).x + dayTransform(d).x} , ${monthTransform(d.getMonth() + 1).y + dayTransform(d).y})` ) .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d))); over40Cases .selectAll('circle') .data(dates) .join('circle') .attr( 'transform', d => `translate( ${monthTransform(d.getMonth() + 1).x + dayTransform(d).x} , ${monthTransform(d.getMonth() + 1).y + dayTransform(d).y})` ) .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d, 'over40cases'))); over60Cases .selectAll('circle') .data(dates) .join('circle') .attr( 'transform', d => `translate( ${monthTransform(d.getMonth() + 1).x + dayTransform(d).x} , ${monthTransform(d.getMonth() + 1).y + dayTransform(d).y})` ) .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d, 'over60cases'))); svg .append('g') .attr('opacity', 0.1) .append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'yellow'); svg .append('g') .append('text') .text('Calendar of COVID-19 Confirmed Cases in Tokyo') .attr('font-size', 32) .attr('x', margin.left) .attr('y', margin.top - 36); const g = svg .append('g') .attr('font-family', 'Roboto Condensed, sans-serif') .attr('font-size', 12); g.append('circle') .attr('cx', width - margin.right - 140) .attr('cy', margin.top - 36 - 10) .attr('r', r(150)) .attr('fill', 'orange') .attr('opacity', 0.1); // g.append('circle') // .attr('cx', width - margin.right - 140) // .attr('cy', margin.top - 36 - 10) // .attr('r', r(70)) // .attr('fill', 'coral') // .attr('opacity', 0.2); g.append('circle') .attr('cx', width - margin.right - 140) .attr('cy', margin.top - 36 - 10) .attr('r', r(30)) .attr('fill', 'red') .attr('opacity', 0.2); g.append('text') .text('Age over 60') .attr('x', width - margin.right - 140 - r(35)) .attr('y', margin.top - 36 - 10 + 4) .attr('text-anchor', 'end') .attr('fill', 'red') .attr('opacity', 0.4); // g.append('text') // .text('Over 40 years old') // .attr('x', width - margin.right - 120) // .attr('y', margin.top - 36 - 10) // .attr('fill', 'coral') // .attr('opacity', 0.6); g.append('text') .text('New confirmed cases') .attr('x', width - margin.right - 140 + r(155)) .attr('y', margin.top - 36 - 10 + 4) .attr('fill', 'orange') .attr('opacity', 0.6); svg .append('g') .attr('filter', 'url(#shadow)') .attr('opacity', 0.1) .append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'orange') .attr('clip-path', 'url(#newCases)'); // svg // .append('g') // .attr('filter', 'url(#shadow)') // .attr('opacity', 0.2) // .append('rect') // .attr('width', '100%') // .attr('height', '100%') // .attr('fill', 'coral') // .attr('clip-path', 'url(#over40Cases)'); svg .append('g') .attr('filter', 'url(#shadow)') .attr('opacity', 0.1) .append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'red') .attr('clip-path', 'url(#over60Cases)'); // month const month = svg .selectAll('g.month') .data(d3.range(12)) .join('g') .classed('month', true) .attr( 'transform', d => `translate( ${monthTransform(d + 1).x} , ${monthTransform(d + 1).y})` ); month // .selectAll('text.month-label') .append('text') .classed('month-label', true) .text(d => monthLabel[d]) .attr('font-size', 16) .attr('font-weight', 500); month .selectAll('text.day-of-week') .data('MTWTFSS'.split('')) // .data('月火水木金土日'.split('')) .join('text') .classed('day-of-week', true) .text(d => d) .attr('font-size', 12) .attr('text-anchor', 'middle') .attr('x', (d, i) => dayX(i) + dayX.bandwidth() / 2) .attr('y', monthMargin.top); const day = svg .append('g') .classed('day', true) .selectAll('g') .data(dates) .join('g') .attr( 'transform', d => `translate( ${monthTransform(d.getMonth() + 1).x + dayTransform(d).x} , ${monthTransform(d.getMonth() + 1).y + dayTransform(d).y})` ); day .append('g') .append('text') .text(d => d.getDate()) .attr('font-size', 10) .attr('text-anchor', 'middle') .attr('x', dayX.bandwidth() / 2) .attr('y', dayY.bandwidth() / 2 - 10) .attr('opacity', 0.5); //text day .append('g') .append('text') .text(d => (d.getTime() > lastConfirmedDate.getTime() ? '' : caseOfDate(d))) .attr('font-size', 12) .attr('text-anchor', 'middle') .attr('x', dayX.bandwidth() / 2) .attr('y', dayY.bandwidth() / 2 + 6 + 12) .attr('font-weight', 400); // .attr('stroke', '#fff') // .attr('stroke-width', 2) // .attr('stroke-linecap', 'butt') // .attr('stroke-linejoin', 'miter') // .attr('paint-order', 'stroke'); day .append('g') .append('text') .text(d => d.getTime() > lastConfirmedDate.getTime() ? '' : caseOfDate(d, 'over60cases') ) .attr('text-anchor', 'middle') .attr('x', dayX.bandwidth() / 2) .attr('y', dayY.bandwidth() / 2 + 6) .attr('font-weight', 600) .attr('stroke', '#fff') .attr('stroke-width', 2) .attr('stroke-linecap', 'butt') .attr('stroke-linejoin', 'miter') .attr('paint-order', 'stroke'); return svg.node(); }32:T1084,chart = { const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .attr('font-family', 'Roboto Condensed, sans-serif'); const g = svg .append('g') .attr('font-family', 'Roboto Condensed, sans-serif') .attr('font-size', 12); const defs = svg.append('defs'); const newCases = defs.append('clipPath').attr('id', "newCases"); g.append('text') .text('Calendar of COVID-19 Confirmed Cases in Tokyo') .attr('font-size', 32) .attr('x', margin.left) .attr('y', margin.top - 36); g.append('circle') .attr('cx', width - margin.right - 140) .attr('cy', margin.top - 36 - 10) .attr('r', r(150)) .attr('fill', 'orange') .attr('opacity', 0.1); g.append('circle') .attr('cx', width - margin.right - 140) .attr('cy', margin.top - 36 - 10) .attr('r', r(70)) .attr('fill', 'coral') .attr('opacity', 0.2); g.append('circle') .attr('cx', width - margin.right - 140) .attr('cy', margin.top - 36 - 10) .attr('r', r(30)) .attr('fill', 'red') .attr('opacity', 0.2); g.append('text') .text('Over 60 years old') .attr('x', width - margin.right - 120) .attr('y', margin.top - 36 - 10 - 14) .attr('fill', 'red') .attr('opacity', 0.4); g.append('text') .text('Over 40 years old') .attr('x', width - margin.right - 120) .attr('y', margin.top - 36 - 10) .attr('fill', 'coral') .attr('opacity', 0.6); g.append('text') .text('New confirmed cases') .attr('x', width - margin.right - 120) .attr('y', margin.top - 36 - 10 + 14) .attr('fill', 'orange') .attr('opacity', 0.6); const month = g .selectAll('g') .data(getYearData(2020).values) .join('g') .attr( 'transform', d => `translate(${monthTransform(d.key).x}, ${monthTransform(d.key).y})` ); month .append('rect') .attr('width', monthX.bandwidth()) .attr('height', monthY.bandwidth()) .attr('fill', 'none'); month .append('text') // .text(d => `${d.key}月`) .text(d => `${monthLabel[+d.key - 1]}`) .attr('y', -4) .attr('font-size', 16) .attr('font-weight', 500); month .selectAll('text.day-of-week') .data('MTWTFSS'.split('')) // .data('月火水木金土日'.split('')) .join('text') .classed('day-of-week', true) .text(d => d) .attr('text-anchor', 'middle') .attr('x', (d, i) => dayX(i) + dayX.bandwidth() / 2) .attr('y', monthMargin.top); const day = month .selectAll('g.day') .data(d => d.values) .join('g') .classed('day', true) .attr( 'transform', d => `translate(${dayTransform(d).x}, ${dayTransform(d).y})` ); day .append('rect') .attr('width', dayX.bandwidth()) .attr('height', dayY.bandwidth()) .attr('fill', 'none'); newCases.selectAll('circle').data(getYearData(2020).values); day .append('g') .attr('opacity', 0.1) .append('circle') .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d))) .attr('fill', 'orange'); day .append('g') .append('circle') .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d, 'over40cases'))) .attr('fill', 'coral') .attr('opacity', 0.2); day .append('g') .append('circle') .attr('cx', dayX.bandwidth() / 2) .attr('cy', dayY.bandwidth() / 2) .attr('r', d => r(caseOfDate(d, 'over60cases'))) .attr('fill', 'red') .attr('opacity', 0.2); day .append('g') .append('text') .text(d => d.getDate()) .attr('font-size', 10) .attr('text-anchor', 'middle') .attr('x', dayX.bandwidth() / 2) .attr('y', 12) .attr('opacity', 0.5); day .append('text') .text(d => (d.getTime() > lastConfirmedDate.getTime() ? '' : caseOfDate(d))) .attr('text-anchor', 'middle') .attr('x', dayX.bandwidth() / 2) .attr('y', dayY.bandwidth() / 2 + 6) .attr('font-weight', 600) .attr('stroke', '#fff') .attr('stroke-width', 2) .attr('stroke-linecap', 'butt') .attr('stroke-linejoin', 'miter') .attr('paint-order', 'stroke'); return svg.node(); }33:T1a5e,map = { const margin = { top: 30, right: 75, bottom: 40, left: 30 }; const height = ages.length * 30 + margin.top + margin.bottom; const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .attr('font-family', 'Roboto Condensed, sans-serif') .attr('font-size', 12); svg .append('text') .text( 'Data: Tokyo Metropolitan Government (cases, residents), TOYO KEIZAI ONLINE (serious symptoms, deaths). Chart design by SUGIMOTO Tatsuo' ) .attr('x', margin.left) .attr('y', height - margin.bottom + 35) .attr('font-size', 12); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('rect') .attr('width', width - margin.left - margin.right) .attr('height', height - margin.top - margin.bottom) .attr('fill', color(color.domain()[0])); // const startDate = new Date('2020-06-01'); // const startDate = new Date( // new Date(weeks[0]).setDate(weeks[0].getDate() - 7) // ); const startDate = weeks[0]; const xWeek = d3 .scaleTime() .domain(d3.extent(weeks)) .range([margin.left, width - margin.right]); const x = d3 .scaleTime() .domain(d3.extent(weeks)) // .domain([startDate, lastConfirmedDate]) .range([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(ages) .range([margin.top, height - margin.bottom]); const yLabel = d3 .scaleBand() .domain(agesLabel) .range([margin.top, height - margin.bottom]); // const data = casesByDate // .filter(d => d.date.getTime() >= startDate) // .map(({ date, values }) => { // const agesData = ages.map(age => ({ // key: age, // count: values.filter(d => d.age === age).length // })); // return { date, values, agesData }; // }); // week base const week = svg .selectAll('g.week') .data(weeks.slice(1, weeks.length)) .join('g') .classed('week', true) .attr('transform', d => `translate(${xWeek(d)}, 0)`); const oneWeekWidth = xWeek(weeks[weeks.length - 1]) - xWeek(weeks[weeks.length - 2]); week .selectAll('rect') .data(d => getAges(casesOfWeek(d)).filter( e => ages.find(age => age === e.key) !== undefined ) ) .join('rect') .attr('x', -oneWeekWidth) .attr('y', d => y(d.key)) .attr('width', oneWeekWidth) .attr('height', y.bandwidth()) .attr('fill', d => color((d.values.length / getResidentsOfAgeGroup(d.key)) * 100000) ); const getAgeData = age => casesByDate .filter(d => d.date.getTime() >= startDate) .map(({ date, values }) => ({ date, count: values.filter(d => d.age === age).length, rate: (values.filter(d => d.age === age).length / getResidentsOfAgeGroup(age)) * 1000000 })); const age = svg .selectAll('g.age') .data(ages) .join('g') .classed('age', true) .attr('transform', d => `translate(0, ${y(d)})`); const oneDayWidth = x(new Date('2020-04-02')) - x(new Date('2020-04-01')); // age // .selectAll('rect') // .data(getAgeData) // .join('rect') // .attr('x', d => x(d.date) - oneDayWidth / 2) // .attr('y', 0) // .attr('width', oneDayWidth) // .attr('height', y.bandwidth()) // .attr('stroke', 'none') // .attr('fill', d => // d.rate < color.domain()[0] ? color(color.domain()[0]) : color(d.rate) // ); const lineY = d3 .scaleLinear() // .domain([0, d3.max(tokyoDeaths, d => d.newDeaths)]) // .domain([0, d3.max(criticalCases, d => d.count)]) .domain([0, 100]) .nice() .range([height - margin.bottom, margin.top]); const line = d3 .line() .defined(d => !isNaN(d.newDeaths)) .x(d => x(d.date)) .y(d => lineY(d.newDeaths)); const criticalLine = d3 .line() .defined(d => !isNaN(d.serious)) .x(d => x(d.date)) .y(d => lineY(d.serious)); svg .append("path") .datum(tokyoDeaths.filter(d => d.date.getTime() >= startDate)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", 0.8) .attr("d", criticalLine); const criticalPath = svg .append("path") .datum(tokyoDeaths.filter(d => d.date.getTime() >= startDate)) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", criticalLine); svg .append("path") .datum(tokyoDeaths.filter(d => d.date.getTime() >= startDate)) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", 0.8) .attr("d", line); const path = svg .append("path") .datum(tokyoDeaths.filter(d => d.date.getTime() >= startDate)) .attr("fill", "none") .attr("stroke", "maroon") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // path // .clone(true) // .lower() // .attr("stroke-width", 5) // .attr("stroke", "white"); const xAxis = d3.axisBottom().scale(x); const yAxis = d3 .axisLeft() .scale(yLabel) .tickSize(0); const deathsAxis = d3.axisRight().scale(lineY); svg .append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr('font-family', 'Roboto Condensed, sans-serif'); svg .append('g') // .attr('transform', `translate(${margin.left}, 0)`) .attr('transform', `translate(${margin.left - oneDayWidth / 2}, 0)`) .call(yAxis) .attr('font-family', 'Roboto Condensed, sans-serif') .append('text') .attr('x', -8) .attr('y', margin.top - 4) .attr('fill', '#000') .text('Age'); const deathsAxisG = svg .append('g') .attr( 'transform', `translate(${width - margin.right + oneDayWidth / 2}, 0)` ) .call(deathsAxis) .attr('font-family', 'Roboto Condensed, sans-serif'); deathsAxisG .append('text') .attr('y', margin.top - 20) .attr('fill', 'steelblue') .text('Serious Symptoms'); deathsAxisG .append('text') .attr('y', margin.top - 8) .attr('fill', 'maroon') .text('Deaths'); svg .selectAll('line.age') .data(ages) .join('line') .attr('x1', margin.left - oneDayWidth / 2) .attr('x2', width - margin.right + oneDayWidth / 2) .attr('y1', y) .attr('y2', y) .attr('stroke', '#fff') .attr('opacity', 0.4); return svg.node(); }34:[{"id":"f8a97ccfc5c910805112218bf35d2d32ec5c1f3ac59c4efdbfd8a9a7176ff8974b3cb54c85dec7acc495d4290ffa425e973e9baed20339742f6b6d178f328b1f","href":"https://static.observableusercontent.com/files/f8a97ccfc5c910805112218bf35d2d32ec5c1f3ac59c4efdbfd8a9a7176ff8974b3cb54c85dec7acc495d4290ffa425e973e9baed20339742f6b6d178f328b1f","name":"tokyo-critical-cases@4.csv","type":"text/csv","lastModified":1597662931930.374,"size":1582},{"id":"7f37a7642015a338791b97ee176d297393998177929e79a31f269e5a2e71f7d0ae837f710cc315797bc78f3410975f83b96945fe2ebdca1628616b768de222cc","href":"https://static.observableusercontent.com/files/7f37a7642015a338791b97ee176d297393998177929e79a31f269e5a2e71f7d0ae837f710cc315797bc78f3410975f83b96945fe2ebdca1628616b768de222cc","name":"prefectures.csv","type":"text/csv","lastModified":1595284867938.86,"size":275626},{"id":"b07af6c65007fa5c52a0d9950f8897035e8e716ecc9e4a9050f86d99dcb819afb42cbe00c3b3dbb2047ebf0f5b09ab4e51a5d4fa491a99b39f86b4fca6c96455","href":"https://static.observableusercontent.com/files/b07af6c65007fa5c52a0d9950f8897035e8e716ecc9e4a9050f86d99dcb819afb42cbe00c3b3dbb2047ebf0f5b09ab4e51a5d4fa491a99b39f86b4fca6c96455","name":"tokyo-age.csv","type":"text/csv","lastModified":1595456070810.768,"size":995},{"id":"82fc90aa6970c44b1e26396519c8d9d7e7ccd279fc4644e0d99b7af75e9843f0ae6bc5b146320e1ed9931bf09936eca14e10b64f355010f76b8e29091f1d1d03","href":"https://static.observableusercontent.com/files/82fc90aa6970c44b1e26396519c8d9d7e7ccd279fc4644e0d99b7af75e9843f0ae6bc5b146320e1ed9931bf09936eca14e10b64f355010f76b8e29091f1d1d03","name":"tokyo-critical-cases@1.csv","type":"text/csv","lastModified":1595768976297.256,"size":1274},{"id":"8ba134c62996e838948faf737ec69591811ad3f83c7e29ac082c0cfdfaa5971a2098cf5e46e67c0fc73b2af2aa65611608e2f0a26fb1874abe3a4496a32944d5","href":"https://static.observableusercontent.com/files/8ba134c62996e838948faf737ec69591811ad3f83c7e29ac082c0cfdfaa5971a2098cf5e46e67c0fc73b2af2aa65611608e2f0a26fb1874abe3a4496a32944d5","name":"tokyo-critical-cases@2.csv","type":"text/csv","lastModified":1596206339454.341,"size":1344},{"id":"88d187e7e5bf4e2b60a27278deac079ea187bdbcb7da5ae41318ea8e3ad5839f5b1dc9e92ccd62a08c888c79b25b10c01e43a4441764942c424eaac63d4f259e","href":"https://static.observableusercontent.com/files/88d187e7e5bf4e2b60a27278deac079ea187bdbcb7da5ae41318ea8e3ad5839f5b1dc9e92ccd62a08c888c79b25b10c01e43a4441764942c424eaac63d4f259e","name":"tokyo-critical-cases@3.csv","type":"text/csv","lastModified":1596977534820.572,"size":1470}] 2f:{"title":"Calendar of COVID-19 Confirmed Cases in Tokyo","cells":[{"id":0,"value":"md`# Calendar of COVID-19 Confirmed Cases in Tokyo\n\nIt takes a minute for loading data.\nSource is live update.\nSometime you may see network errors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"getYearData(2020).values","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"monthLabel = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"caseOfDate = (date, key = 'cases') =>\n casesByDate.find(d => d.date.getTime() === date.getTime())\n ? casesByDate.find(d => d.date.getTime() === date.getTime())[key]\n : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"r = d3\n .scaleSqrt()\n .domain([0, d3.max(casesByDate, d => d.cases)])\n .range([0, 50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"dayTransform = date => {\n const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);\n let firstDateDay = firstDate.getDay();\n firstDateDay -= 1;\n if (firstDateDay < 0) {\n firstDateDay = 6;\n }\n const day = date.getDate() - 1 + firstDateDay;\n return {\n x: dayX(day % 7),\n y: dayY(Math.floor(day / 7))\n };\n // return `translate(${dayX(day % 7)}, ${dayY(Math.floor(day / 7))})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"dayX = d3\n .scaleBand()\n .domain(d3.range(7))\n .rangeRound([0, monthX.bandwidth()])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"dayY = d3\n .scaleBand()\n .domain(d3.range(6))\n .rangeRound([monthMargin.top, monthY.bandwidth() - monthMargin.bottom])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"monthTransform = month => ({\n x: monthX(Math.floor((month - 1) / 3)),\n y: monthY((month - 1) % 3)\n})\n// `translate(${monthX(Math.floor((month - 1) / 3))},\n// ${monthY((month - 1) % 3)})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"monthX = d3\n .scaleBand()\n .domain(d3.range(4))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"monthY = d3\n .scaleBand()\n .domain(d3.range(3))\n .rangeRound([margin.top, height - margin.bottom])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"margin = ({ top: 120, right: 20, bottom: 20, left: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"monthMargin = ({ top: 20, right: 0, bottom: 0, left: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"years = [...new Set(dates.map(d => d.getFullYear()))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// months = dates\n// .map(d => d.getMonth() + 1)\n// .filter((d, i, a) => a.indexOf(d) === i)\n\nmonths = [...new Set(dates.map(d => d.getMonth() + 1))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"getYearData(2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"getYearData = year => yearsDates(dates).find(d => d.key === year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"yearsDates(dates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"yearsDates = dates =>\n Array.from(d3.group(dates, d => d.getFullYear()), ([key, values]) => ({\n key,\n values: monthsDates(values)\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"monthsDates = dates =>\n Array.from(d3.group(dates, d => d.getMonth() + 1), ([key, values]) => ({\n key,\n values\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"dates.slice(-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"dates = d3\n .range(\n startDate.getTime(),\n endDate.getTime() + 24 * 60 * 60 * 1000,\n 24 * 60 * 60 * 1000\n )\n .map(d => new Date(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"startDate = new Date('2020-01-01')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"endDate = new Date('2020-12-31')","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"latestDate = getLatestDate(cases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"new Date(new Date(weeks[0]).setDate(weeks[0].getDate() - 7))","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"weeks = d3.range(-27, 1).map(d => {\n const originDate = new Date(getLatestDate(cases).getTime()); //new Date('2020-11-01');\n\n return new Date(originDate.setDate(originDate.getDate() + d * 7));\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"ages","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"ages.find(d => d === \"10代\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"getAges(casesOfWeek(weeks[0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`---\n### Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`

\nCOVID-19 in Tokyo | Heatmap of Confirmed Cases and Line Chart of \nSerious Symptoms / \nDeaths\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"colorLegend = {\n const svg = d3.select(\n legend({\n color: color,\n title: \"Number of cases per 100 000 residents\",\n marginLeft: 30,\n tickFormat: d3.format('.0f'),\n ticks: 2\n })\n );\n\n svg.attr('transform', 'translate(0, -20)');\n svg\n .selectAll('text')\n .attr('font-family', 'Roboto Condensed, sans-serif')\n .attr('font-weight', 'Normal');\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"color = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"colorLegend","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"{\n const age = '20代';\n return d3.max(\n casesByDate\n .filter(d => d.date.getTime() >= new Date(2020, 3, 1))\n .map(({ date, values }) => ({\n date,\n count: values.filter(d => d.age === age).length,\n rate:\n (values.filter(d => d.age === age).length /\n getResidentsOfAgeGroup(age)) *\n 1000000\n })),\n d => d.rate\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"md`### Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"getLatestDate = data => d3.max(data, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"casesOfWeek = date => {\n const fromDate = new Date(date).setDate(date.getDate() - 7);\n return cases.filter(d => d.date > fromDate && d.date <= date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"getAges = cases =>\n Array.from(d3.groups(cases, d => d.age), ([key, values]) => ({\n key,\n values\n })) //.sort((a, b) => b.key - a.key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"agesLabel = [\n '≥90',\n // '≥100',\n // '90–99',\n '80–89',\n '70–79',\n '70–79',\n '60–69',\n '50–59',\n '40–49',\n '30–39',\n '20–29',\n '10–19',\n '0–9'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"ages = agesData\n .map(d => d.key)\n .filter(d => d !== '不明' && d !== \"-\" && d !== \"'-\")\n .sort(\n (a, b) =>\n Number(a.replace(/^(\\d+).+/, '$1')) - Number(b.replace(/^(\\d+).+/, '$1'))\n )\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"agesData = Array.from(d3.groups(cases, d => d.age), ([key, values]) => ({\n key,\n values\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"+'40代'.replace(/(\\d+).+/, '$1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"lastConfirmedDate = casesByDate[casesByDate.length - 1].date","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"casesByDate = nestCases.map(d => ({\n date: new Date(d.key),\n cases: d.values.length,\n over60cases: d.values.filter(\n d => +d.患者_年代.replace(/^(\\d+).+/, '$1') >= 60\n ).length,\n over40cases: d.values.filter(\n d => +d.患者_年代.replace(/^(\\d+).+/, '$1') >= 40\n ).length,\n over20cases: d.values.filter(\n d => +d.患者_年代.replace(/^(\\d+).+/, '$1') >= 20\n ).length,\n under40cases: d.values.filter(\n d => +d.患者_年代.replace(/^(\\d+).+/, '$1') < 40\n ).length,\n values: d.values\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"nestCases = Array.from(\n d3.groups(cases, d => d.date.toISOString()),\n ([key, values]) => ({\n key,\n values\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"await fetch('https://cors-anywhere.herokuapp.com/')","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"d3.buffer(`https://sugi2000cors.herokuapp.com/${caseDataUri}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":949,"value":"caseDataUri = 'https://stopcovid19.metro.tokyo.lg.jp/data/130001_tokyo_covid19_patients.csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"cases = (await load(\n 'https://stopcovid19.metro.tokyo.lg.jp/data/130001_tokyo_covid19_patients.csv'\n)).map(d => ({\n date: new Date(d.公表_年月日),\n age:\n d.患者_年代 === '100歳以上' || d.患者_年代 === '90代'\n ? '90歳以上'\n : d.患者_年代,\n ...d\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"positive_by_developed = d3.json(\n 'https://raw.githubusercontent.com/tokyo-metropolitan-gov/covid19/development/data/positive_by_developed.json',\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":587,"value":"md`### Population data from [住民基本台帳による東京都の世帯と人口令和2年１月](https://www.toukei.metro.tokyo.lg.jp/juukiy/2020/jy20000001.htm)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"getResidentsOfAgeGroup('10歳未満')","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"getResidentsOfAgeGroup = age => {\n age = age === '10歳未満' ? 0 : +age.replace(/(\\d+).+/, '$1');\n return residentsByAgeGroup.find(d => d.age === age).residents;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"residentsByAgeGroup = d3.range(0, 100, 10).map(age => {\n const ageGroupData = residentsByAge.filter(\n d => d.age >= age && d.age < age + 10\n );\n const residents = d3.sum(ageGroupData, d => d.population);\n return { age, residents };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"d3.sum(residentsByAge, d => d.population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"residentsByAge = d3.csvParse(\n await FileAttachment(\"tokyo-age.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`### Prefectures Data from [新型コロナウイルス国内感染の状況](https://toyokeizai.net/sp/visual/tko/covid19/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"tokyoDeaths = getPrefectureData({ prefName: 'Tokyo' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"{\n tokyoDeaths.forEach((d, i, a) => {\n d.newDeaths = i === 0 ? d.deaths : d.deaths - a[i - 1].deaths;\n });\n return tokyoDeaths;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"_tokyoDeaths = prefectures\n .filter(d => d.prefectureNameE === 'Tokyo')\n .map(d => ({\n date: new Date(d.year, d.month - 1, d.date),\n deaths: d.deaths ?? 0,\n serious: d.serious ?? 0\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"prefectures = d3.csv(\n 'https://raw.githubusercontent.com/kaz-ogiwara/covid19/master/data/prefectures.csv', d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"criticalCases = d3.csvParse(\n await FileAttachment(\"tokyo-critical-cases@4.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"import { getPrefectureData } from \"@sugi2000/covid-19-data-in-japan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"import { load } from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}