30:T52b,html`

Heatmap of COVID-19 Confirmed Cases by Age over Time in Japan

${colorLegend.node()}

Serious symptoms Deaths

${chart({ prefName: 'Osaka', maxTick: 200 })} ${chart({ prefName: 'Hokkaido' })}

${chart({ prefName: 'Hyogo' })} ${chart({ prefName: 'Tokyo', maxTick: 200 })}

${chart({ prefName: 'Fukuoka' })} ${chart({ prefName: 'Kanagawa' })}

${chart({ prefName: 'Okinawa' })} ${chart({ prefName: 'Aichi' })}

Data: Japanese and Local Governments, TOYO KEIZAI ONLINE
Chart Design by SUGIMOTO Tatsuo @sugi2000

`31:T15cc,chart = ({ prefName, maxTick = 100 } = {}) => { const width = 480; const height = 160; const margin = { top: 0, right: 40, bottom: 20, left: 40 }; const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .style('overflow', 'visible'); const cases = getCases({ prefName, maxAge: 80 }); const deaths = getPrefectureData({ prefName }); const agePopulations = getAgePopulation({ prefName }); const latestDate = getLatestDate(cases); const weeks = getWeeks({ latestDate, numOfWeek: 26 }); 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) .attr('font-family', `Roboto Condensed, sans-serif`) .attr('fill', backgroundColor); 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)`); // heatmap const oneWeekWidth = x(weeks[weeks.length - 1]) - x(weeks[weeks.length - 2]); week .selectAll('rect') .data(d => getAges({ cases: casesOfWeek({ cases, date: 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.get(d.key)) * 100000) ); svg .append('g') .selectAll('line') .data([10, 50]) .join('line') .attr('x1', margin.left - 20) .attr('y1', y) .attr('x2', width - margin.right) .attr('y2', y) .attr('stroke', '#caa') .attr('stroke-width', 1); // line chart const lineY = d3 .scaleLinear() .domain([0, maxTick]) .nice() .range([height - margin.bottom, margin.top]); const deathLine = d3 .line() .defined(d => !isNaN(d.newDeaths)) .x(d => x(d.date)) .y(d => lineY(d.newDeaths)); const seriouslLine = d3 .line() .defined(d => !isNaN(d.serious)) .x(d => x(d.date)) .y(d => lineY(d.serious)); const startDate = weeks[0]; svg .append("path") .datum(deaths.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", seriouslLine); const criticalPath = svg .append("path") .datum(deaths.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", seriouslLine); svg .append("path") .datum(deaths.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", deathLine); const path = svg .append("path") .datum(deaths.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", deathLine); // axes const xAxis = d3 .axisBottom() .scale(x) .tickFormat(d3.timeFormat('%m-%d')); const yAxis = d3 .axisLeft() .scale(y) .tickSize(0) .ticks(6) .tickFormat(d => (d === 80 ? `≥${d}` : d === 0 ? `0–9` : `${d}s`)); const yRAxis = d3.axisRight().scale(lineY); svg .append('g') .classed('axis', true) .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr('font-family', 'Roboto Condensed, sans-serif'); svg .append('g') .classed('axis', true) .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis) .attr('font-family', 'Roboto Condensed, sans-serif') .append('text') .attr('x', -(height - margin.top - margin.bottom) / 2) .attr('y', -margin.left) .attr('dy', '1.5em') .attr("text-anchor", "middle") .attr('transform', `rotate(-90)`) .attr('fill', '#000') .text('Age'); svg .append('g') .classed('axis', true) .attr('transform', `translate(${width - margin.right}, 0)`) .call(yRAxis) .attr('font-family', 'Roboto Condensed, sans-serif') .append('text') .attr('x', -(height - margin.top - margin.bottom) / 2) .attr('y', margin.right) .attr('dy', '-0.5em') .attr("text-anchor", "middle") .attr('transform', `rotate(-90)`) .attr('fill', '#000') .text('Serious Symptoms / Deaths'); svg.selectAll('g.axis').attr('opacity', 0.75); // pref name svg .append('g') .attr('transform', `translate(${margin.left + 8}, ${margin.top + 27})`) .append('text') .attr('font-family', 'Roboto Condensed') .attr('font-size', 30) .attr('font-weight', 400) // .attr('fill', '#fff') .text(prefName); return svg.node(); }32:[] 2e:{"title":"Heatmap of COVID-19 Confirmed Cases by Age over Time in Japan","cells":[{"id":0,"value":"md`# Heatmap of COVID-19 Confirmed Cases by Age over Time in Japan\n\n__These charts are no longer updated because the published data is so unstable.__\n\nIt takes a minute to load. The data is not live update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"colorLegend = {\n const svg = d3.select(\n legend({\n color: color,\n title: \"Number of cases per 100 000 residents\",\n marginLeft: 40,\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;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof prefName = select({\n title: 'Prefecture',\n options: [...prefNamesJ.keys()]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"chart({ prefName })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"backgroundColor = {\n const bgColor = d3.color(color(0)).brighter(.1);\n // bgColor.opacity = 0.5;\n return bgColor.toString();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// color = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])\ncolor = {\n // const scale = d3.scaleSequentialLog(d3.interpolateMagma).domain([1, 100]);\n const scale = d3.scaleSequentialLog(d3.interpolateOranges).domain([1, 200]);\n\n const interpolator = scale.interpolator(); // read its interpolator\n const mirror = t => interpolator(1 - t); // creates a mirror image of the interpolator\n // scale.interpolator(mirror); // updates the scale’s interpolator\n return scale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"ages = d3.range(80, -10, -10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"getWeeks = ({ latestDate, numOfWeek } = {}) =>\n d3.range(-numOfWeek, 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":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"getLatestDate = cases => d3.max(cases, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"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":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"casesOfWeek = ({ cases, 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":303,"value":"webfonts = md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`---\nDependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import { prefNamesJ, getAgePopulation } from \"@sugi2000/population-in-japan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { getCases, getPrefectureData } from \"@sugi2000/covid-19-data-in-japan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}