31:T7aa,{ const height = 320; const margin = { top: 0, right: 30, bottom: 20, left: 30 }; const svg = d3 .create('svg') .attr('width', width) .attr('height', height); svg .append('rect') .classed('bg', true) .attr('x', margin.left) .attr('y', margin.top) .attr('width', width - margin.left - margin.right) .attr('height', height - margin.top - margin.bottom); const x = d3 .scaleTime() .domain(d3.extent(weeks)) .range([margin.left, width - margin.right]); // .rangeRound([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(ages) .range([margin.top, height - margin.bottom]); // .rangeRound([margin.top, height - margin.bottom]); const _color = d3 .scaleLinear() .domain([0, 300]) .range(['yellow', 'red']); const week = svg .selectAll('g.week') .data(weeks.slice(1, weeks.length)) .join('g') .classed('week', true) .attr('transform', d => `translate(${x(d)}, 0)`); const oneWeekWidth = x(weeks[weeks.length - 1]) - x(weeks[weeks.length - 2]); week .selectAll('rect') .data(d => getAges(casesOfWeek(d))) .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)); .attr('fill', d => color( (d.values.length / agePopulations.find(e => e.age === d.key).population) * 100000 ) ); const xAxis = d3.axisBottom().scale(x); const yAxis = d3.axisLeft().scale(y); const yRAxis = d3.axisRight().scale(y); svg .append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); svg .append('g') .attr('transform', `translate(${width - margin.right}, 0)`) .call(yRAxis); return svg.node(); }32:T7e2,{ const height = 300; const margin = { top: 0, right: 60, bottom: 20, left: 60 }; const svg = d3 .create('svg') .attr('width', width) .attr('height', height); svg .append('rect') .classed('bg', true) .attr('x', margin.left) .attr('y', margin.top) .attr('width', width - margin.left - margin.right) .attr('height', height - margin.top - margin.bottom); const x = d3 .scaleTime() .domain(d3.extent(weeks)) .range([margin.left, width - margin.right]); // .rangeRound([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(subprefectures) .range([margin.top, height - margin.bottom]); // .padding(.1); // .rangeRound([margin.top, height - margin.bottom]); const week = svg .selectAll('g.week') .data(weeks.slice(1, weeks.length)) .join('g') .classed('week', true) .attr('transform', d => `translate(${x(d)}, 0)`); const oneWeekWidth = x(weeks[weeks.length - 1]) - x(weeks[weeks.length - 2]); week .selectAll('rect') .data(d => getAreas(casesOfWeek(d))) .join('rect') .attr('x', -oneWeekWidth) .attr('y', d => y(d.key)) .attr('width', oneWeekWidth) .attr('height', y.bandwidth() - 1) .attr('fill', d => subprefsColor(getCaseRatio(d))); const xAxis = d3.axisBottom().scale(x); const yAxis = d3.axisLeft().scale(y); const yRAxis = d3.axisRight().scale(y); svg .append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append('g') .classed('yAxis', true) .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); svg .append('g') .classed('yAxis', true) .attr('transform', `translate(${width - margin.right}, 0)`) .call(yRAxis); svg .selectAll('g.yAxis') .selectAll('g.tick text') .attr('letter-spacing', function() { if (d3.select(this).text().length > 2) { return '-0.05em'; } return '.25em'; }); return svg.node(); }33:[] 2f:{"title":"COVID-19 in Hokkaido","cells":[{"id":0,"value":"md`# COVID-19 in Hokkaido`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`\n

\nHeatmap of COVID-19 Confirmed Cases in Hokkaido by Age over Time
\nData: Hokkaido Government. The cases excluded undisclosed age group.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"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(',d'),\n ticks: 2\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":33,"value":"color = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"getCaseRatio = d =>\n (d.values.length /\n populations.find(e => e.subprefecture === d.key).population) *\n 100000","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"weeks = d3.range(-38, 1).map(d => {\n const originDate = new Date(latestDate.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":31,"value":"ages = d3.range(80, -10, -10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"getAreas(casesOfWeek(weeks[weeks.length - 1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"html`\n

\nHeatmap of COVID-19 Confirmed Cases in Hokkaido by Residence over Time
\nData: Hokkaido Government. The cases excluded outside Hokkaido and undisclosed residence.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"subprefsColorLegend = {\n const svg = d3.select(\n legend({\n color: subprefsColor,\n title: \"Number of cases per 100 000 residents\",\n marginLeft: 60,\n tickFormat: d3.format(',d'),\n ticks: 2\n })\n );\n svg.attr('transform', 'translate(0, -20)');\n\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":102,"value":"subprefsColor = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"subprefectures = subprefecturesStr\n .split('\\n')\n .map(d => d.substring(3, 99).replace(/(総合|)振興局/, ''))","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"subprefecturesStr = `道央/空知総合振興局\n道央/石狩振興局\n道央/後志総合振興局\n日胆/胆振総合振興局\n日胆/日高振興局\n道南/渡島総合振興局\n道南/檜山振興局\n道北/上川総合振興局\n道北/留萌振興局\n道北/宗谷総合振興局\n道東/オホーツク総合振興局\n道東/十勝総合振興局\n道東/釧路総合振興局\n道東/根室振興局`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"getAreas(cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"getAreas = cases =>\n Array.from(\n d3.groups(cases.filter(d => /管内$/.test(d.居住地)), d => d.居住地),\n ([key, values]) => ({\n key: key.replace(/(総合|)振興局管内/, ''),\n values\n })\n ).sort((a, b) => b.values.length - a.values.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"getAges(cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"getAges = cases =>\n Array.from(\n d3.groups(cases.filter(d => d.age >= 0), d => d.age),\n ([key, values]) => ({ key, values })\n ).sort((a, b) => b.key - a.key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"casesOfWeek = date => {\n const fromDate = new Date(date).setDate(date.getDate() - 7);\n return cases.filter(d => d.リリース日 > fromDate && d.リリース日 <= date);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"latestDate = getLatestDate(cases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"getLatestDate = data => d3.max(data, d => d.リリース日)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"cases.slice(-10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"d3.group(cases, d => d.age)","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"cases.filter(d => /胆振/.test(d.居住地))","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"cases.find(d => /ｵﾎｰﾂｸ/.test(d.居住地))","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"cases = getCases({ prefName: 'Hokkaido', maxAge: 80 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"_cases = d3.csvParse(csvString, d3.autoType).map(d => {\n if (d.年代 === '非公表') {\n d.age_group = -1;\n }\n if (d.年代 === '10歳未満') {\n d.age_group = 0;\n }\n if (d.age_group >= 90) {\n d.age_group = 80;\n }\n // fix typo\n if (d.居住地 === '宗谷総合誌振興局管内') {\n d.居住地 = '宗谷総合振興局管内';\n }\n if (d.居住地 === 'ｵﾎｰﾂｸ総合振興局管内') {\n d.居住地 = 'オホーツク総合振興局管内';\n }\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"csvString = iconv.decode(arrayData, 'Shift_JIS')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"arrayData = new Uint8Array(await d3.buffer(uri))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"uri = `https://www.harp.lg.jp/opendata/dataset/1369/resource/2828/patients.csv`","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`#### 人口データ\n令和2年住民基本台帳人口・世帯数(令和2年1月1日現在） \n令和2年住民基本台帳年齢階級別人口（令和2年1月1日現在）\nhttp://www.pref.hokkaido.lg.jp/ss/tuk/900brr/index2.htm#juuminkihon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"populations.find(d => d.subprefecture === '石狩')","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"populations = popsData.split('\\n').map((d, i) => ({\n subprefecture: subprefectures[i],\n population: parseInt(d.replace(/,/g, ''))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"popsData = `287802\n2381920\n206592 \n387621 \n65586 \n389500 \n35119 \n490,316 \n44,638 \n62,707 \n277,502 \n336,986 \n227,420 \n74,053 `","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"agePopulations = {\n const ages = agePops.columns.slice(3);\n const populations = [];\n\n let age = 0;\n\n for (let i = 0; i < ages.length; i += 2) {\n const population1 = +agePops[0][ages[i]].replace(/,/g, '');\n const population2 =\n i < ages.length - 1 ? +agePops[0][ages[i + 1]].replace(/,/g, '') : 0;\n const population = population1 + population2;\n populations.push({ age, population });\n age += 10;\n }\n\n populations.find(d => d.age === 80).population +=\n populations.find(d => d.age === 90).population +\n populations.find(d => d.age === 100).population;\n\n return populations.slice(0, 9);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"agePops = d3.tsvParse(agePopsData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"agePopsData = `市区町村名\t性別\t総数\t0～4歳\t5～9\t10～14\t15～19\t20～24\t25～29\t30～34\t35～39\t40～44\t45～49\t50～54\t55～59\t60～64\t65～69\t70～74\t75～79\t80～84\t85～89\t90～94\t95～99\t100歳以上\n北　海　道\t計\t5,267,762\t169,948\t194,891\t206,987\t225,713\t233,277\t235,043\t261,204\t299,645\t353,265\t393,243\t349,972\t342,233\t343,957\t416,880\t400,590\t315,831\t245,114\t169,777\t81,316\t23,451\t3,388`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"iconv = require('https://bundle.run/iconv-lite@0.6.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"import { getCases, getPrefectureData } from \"@sugi2000/covid-19-data-in-japan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}