32:T16db,chart = { const container = d3.select(DOM.element('div')); container.style("position", "relative"); const margin = { top: 55, right: 30, bottom: 25, left: 48 }; const plotHeight = height/2; let sexes = ["female", "male"]; data.forEach(d => { d.year = +d.year; d.age = +d.age; d.sex = d.sex; d.rate = +d.rate; d.pctile = +d.pctile; }); let data_cleaned = data.filter(d => d.sex != "total" && !isNaN(d.rate) && d.age <= 90); let colourScale = d3.scaleLinear() .range([1,0]) .domain(d3.extent(data_cleaned, d => d.pctile)); // .domain(d3.extent(data_cleaned, d => +d.rate)); sexes.forEach(sex => { const holder = container.append('div') .attrs({ class: 'holder ' + sex }) .styles({ position: 'relative' }); const canvas = holder.append('canvas') .attrs({ width: width*2, height: plotHeight*2 }) .styles({ width: `${width}px`, height: `${plotHeight}px` }); const context = canvas.node().getContext('2d'); context.scale(2,2); const svg = holder.append('svg') .attrs({ id: sex, width: width, height: plotHeight }) .styles({ position: "absolute", left: 0, width: `${width}px`, height: `${plotHeight}px` }); let plot_title = svg.append('text') .attrs({ class: 'plot_title', y: 30 }) .html(toTitleCase(sex)); let x = d3.scaleLinear() .range([margin.left,width-margin.right]) .domain([d3.min(data_cleaned, d => +d.year), d3.max(data_cleaned, d => +d.year)+1]); let xAxis = d3.axisBottom() .scale(x) .ticks(10) .tickFormat(d3.format("d")); svg.append('g') .attrs({ transform: `translate(0,${plotHeight-margin.bottom})` }) .call(xAxis); let xAxisTop = d3.axisTop() .scale(x) .ticks(10) .tickFormat(d3.format("d")); svg.append('g') .attrs({ transform: `translate(0,${margin.top})` }) .call(xAxisTop); let y = d3.scaleLinear() .range([plotHeight-margin.bottom,margin.top]) .domain([d3.min(data_cleaned, d => +d.age), d3.max(data_cleaned, d => +d.age)]); let yAxis = d3.axisLeft() .scale(y) .ticks(10) .tickFormat(d3.format("d")); svg.append('g') .attrs({ class: 'y-axis-left', transform: `translate(${margin.left},0)` }) .call(yAxis); svg.selectAll('.y-axis-left .tick').filter(d => d == 50) .selectAll('text') .html('Age 50'); let yAxisRight = d3.axisRight() .scale(y) .ticks(10) .tickFormat(d3.format("d")); svg.append('g') .attrs({ transform: `translate(${width-margin.right},0)` }) .call(yAxisRight); let blockWidth = x(1)-x(0); let blockHeight = y(0)-y(1); let plot_data = data_cleaned.filter(d => d.sex == sex); plot_data .forEach((d,i) => { // i % 100 == 0 ? console.log(colourScale(d.rate)):{}; context.fillStyle = d3.interpolateInferno(colourScale(d.pctile)); context.strokeStyle = d3.interpolateInferno(colourScale(d.pctile)); context.beginPath(); context.rect(x(+d.year), y(+d.age+0.5), blockWidth, blockHeight); context.fill(); context.stroke(); }); svg.on("mousemove", function(e){ let coords = d3.mouse(svg.node()); let xVal = ~~x.invert(coords[0]), yVal = ~~y.invert(coords[1]), dataPoint = plot_data.filter(d => d.year == xVal && d.age == yVal)[0], pctile = dataPoint.pctile, same_rate = data_cleaned.filter(d => d.pctile == pctile); // console.log(xVal, yVal); container.selectAll('rect.same_rate').remove(); container.selectAll('svg').each(function(){ let panel = d3.select(this), panel_sex = panel.attr("id"); panel.selectAll('rect.same_rate') .data(same_rate.filter(d => d.sex == panel_sex)) .enter() .append('rect') .attrs({ class: 'same_rate', transform: d => `translate(${x(d.year)}, ${y(d.age+1)})` }) .styles({ x: 0, width: blockWidth, y: 0, height: blockHeight, stroke: 'cyan', 'stroke-width': 1, fill: 'none', 'pointer-events': 'none' }); }); container.selectAll(`.holder .tooltip-holder`).remove(); let tooltipString = `Age: ${dataPoint.age}
Year: ${dataPoint.year}
${d3.format('.1f')(dataPoint.rate*1000).replace(/\.0/g,"")} deaths per 1,000`; let tooltip = container.selectAll(`.holder.${sex}`).append('div') .attrs({ class: 'tooltip-holder' }) .styles({ left: `${coords[0]}px`, top: `${coords[1]}px` }) .append('div') .attrs({ class: 'tooltip' }) .styles({ position: 'absolute', bottom: 0, right: 0 }) .html(tooltipString.replace(/\>1\<\/b\>\ \;deaths/g,">1 death")); }); svg.on("mouseout", function(e){ container.selectAll('rect.same_rate').remove(); container.selectAll(`.holder .tooltip-holder`).remove(); }); }); return container.node(); }33:[] 30:{"title":"Mortality rate by age and sex, England & Wales, 1841 to 2020","cells":[{"id":190,"value":"md`# Mortality rate by age and sex, England & Wales, 1841 to 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`

Hover over or tap any grid to show all other sex+age+year combinations with the same mortality rate

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`Visual inspiration: [Kieran Healy](https://kieranhealy.org/blog/archives/2018/12/04/heatmaps-of-mortality-rates/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`Data source: [Human Mortality Database](https://www.mortality.org/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = d3.csv('https://gist.githubusercontent.com/johnburnmurdoch/0de956a2a646dbddc47a54cc967481f1/raw/b8e411b9ba0374bf1b85aa48d0d68a697dbc73af/HMD_EW2020.csv');","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"toTitleCase = function(str){\n return str.replace(\n /\\w\\S*/g,\n function(txt) {\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require.alias({ 'd3-selection': 'd3@5', 'd3-transition': 'd3@5' })(\n 'd3@5',\n 'd3-selection-multi',\n 'd3-array@2'\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}