31:T1a73,map = { const margin = { top: 60, 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 (severe cases, 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(tokyoDeaths, (d) => d.serious)]) // .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("Severe Cases"); 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(); }32:[{"id":"b07af6c65007fa5c52a0d9950f8897035e8e716ecc9e4a9050f86d99dcb819afb42cbe00c3b3dbb2047ebf0f5b09ab4e51a5d4fa491a99b39f86b4fca6c96455","href":"https://static.observableusercontent.com/files/b07af6c65007fa5c52a0d9950f8897035e8e716ecc9e4a9050f86d99dcb819afb42cbe00c3b3dbb2047ebf0f5b09ab4e51a5d4fa491a99b39f86b4fca6c96455","name":"tokyo-age.csv","type":"text/csv","lastModified":1629351452679.495,"size":995},{"id":"f8a97ccfc5c910805112218bf35d2d32ec5c1f3ac59c4efdbfd8a9a7176ff8974b3cb54c85dec7acc495d4290ffa425e973e9baed20339742f6b6d178f328b1f","href":"https://static.observableusercontent.com/files/f8a97ccfc5c910805112218bf35d2d32ec5c1f3ac59c4efdbfd8a9a7176ff8974b3cb54c85dec7acc495d4290ffa425e973e9baed20339742f6b6d178f328b1f","name":"tokyo-critical-cases@4.csv","type":"text/csv","lastModified":1629351452679.495,"size":1582}] 2f:{"title":"Heatmap of COVID-19 Confirmed Cases in Tokyo","cells":[{"id":0,"value":"md`# Heatmap of COVID-19 Confirmed Cases in Tokyo`","pinned":false,"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 \nSevere Cases / \nDeaths\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$31","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: 3\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, 1000])","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"colorLegend","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"weeks = d3\n // .range(-52, 1)\n .range(-27, 1)\n .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":false,"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":false,"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":false,"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":false,"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":949,"value":"caseDataUri = 'https://stopcovid19.metro.tokyo.lg.jp/data/130001_tokyo_covid19_patients.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"cases = (await d3.csv(`https://sugi2000cors.herokuapp.com/${caseDataUri}`))\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":false,"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":1438,"value":"tokyoDeaths.slice(-10)","pinned":true,"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":1440,"value":"prefectures.slice(-10)","pinned":true,"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// )\nprefectures = d3.csv(\n 'https://sugi2000cors.herokuapp.com/' + 'https://toyokeizai.net/sp/visual/tko/covid19/csv/prefectures.csv', d3.autoType\n)\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":"$W32","stdlib":"1","titling":"auto"}