2c:null 2d:["$","title",null,{"children":"COVID-19 in Hokkaido | SUGIMOTO Tatsuo | Observable"}] 32: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(); }33: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(); }34:[] 30:{"id":"6c2340f03bf19eb7","slug":"covid-19-in-hokkaido","title":"COVID-19 in Hokkaido","thumbnail":"67c564b696b5b789dab423c52ea73bd7feb5caf914ab818e98076c3c88b1d34d","access_level":"public","create_time":"$D2020-11-07T11:51:56.251Z","update_time":"$D2020-12-02T14:11:07.013Z","view_time":null,"first_public_time":"$D2020-11-07T12:08:22.031Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":"starter_2024"},"version":315,"publish_version":315,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d9120adfa730123d","slug":"covid-19","title":"COVID-19","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"type":"notebook","body":{"titling":"auto","title":"COVID-19 in Hokkaido","cells":[{"id":0,"value":"md`# COVID-19 in Hokkaido`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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

\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"subprefsColor = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"subprefectures = subprefecturesStr\n .split('\\n')\n .map(d => d.substring(3, 99).replace(/(総合|)振興局/, ''))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"subprefecturesStr = `道央/空知総合振興局\n道央/石狩振興局\n道央/後志総合振興局\n日胆/胆振総合振興局\n日胆/日高振興局\n道南/渡島総合振興局\n道南/檜山振興局\n道北/上川総合振興局\n道北/留萌振興局\n道北/宗谷総合振興局\n道東/オホーツク総合振興局\n道東/十勝総合振興局\n道東/釧路総合振興局\n道東/根室振興局`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"getAreas(cases)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"getAges(cases)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"latestDate = getLatestDate(cases)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"getLatestDate = data => d3.max(data, d => d.リリース日)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"cases.slice(-10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"d3.group(cases, d => d.age)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"cases.filter(d => /胆振/.test(d.居住地))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"cases.find(d => /ｵﾎｰﾂｸ/.test(d.居住地))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"cases = getCases({ prefName: 'Hokkaido', maxAge: 80 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"csvString = iconv.decode(arrayData, 'Shift_JIS')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"arrayData = new Uint8Array(await d3.buffer(uri))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"uri = `https://www.harp.lg.jp/opendata/dataset/1369/resource/2828/patients.csv`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"populations.find(d => d.subprefecture === '石狩')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"agePops = d3.tsvParse(agePopsData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"iconv = require('https://bundle.run/iconv-lite@0.6.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"import { getCases, getPrefectureData } from \"@sugi2000/covid-19-data-in-japan\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"