2a:null 2b:["$","title",null,{"children":"Mortality rate by age and sex, England & Wales, 1841 to 2020 | johnburnmurdoch | Observable"}] 30: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(); }31:[] 2e:{"id":"c0777dc9ca35ed3b","slug":"mortality-rate-by-age-and-sex-england-wales-1841-to-2016","title":"Mortality rate by age and sex, England & Wales, 1841 to 2020","thumbnail":"7d2fd28671db30dcff4dc7d9a4b1b22f4774b25b3f8ce71657e965f3c198822c","access_level":"public","create_time":"$D2019-09-02T14:10:03.563Z","update_time":"$D2022-10-23T13:53:33.818Z","view_time":null,"first_public_time":"$D2019-09-13T06:42:04.322Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"c72427f1036f62b9","login":"johnburnmurdoch","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de57be7c9bd04e77db4b60770c9a9e2f51a19f47a966b9ce8f1eb6cdfbd82529","tier":"starter_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"838a7c575073136d","login":"johnburnmurdoch","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de57be7c9bd04e77db4b60770c9a9e2f51a19f47a966b9ce8f1eb6cdfbd82529","tier":null}],"members":[{"type":"individual","id":"838a7c575073136d","login":"johnburnmurdoch","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de57be7c9bd04e77db4b60770c9a9e2f51a19f47a966b9ce8f1eb6cdfbd82529","tier":null,"role":"editor"}],"comments":[{"id":"3e8c271358211461","reply_to_id":null,"content":"I get an error...maybe due to it using API no more valid in newer version of D3?","create_time":"$D2020-12-20T13:37:20.691Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c2f17e4031105178","login":"espinielli","name":"Enrico Spinielli","avatar_url":"https://avatars-next.observableusercontent.com/2bf5259d0c49a57cec6acc725062bdc41374a518de8772a2a051315f6be64567","tier":null}},{"id":"47afa8d80a85338b","reply_to_id":"3e8c271358211461","content":"It can be fixed requiring 'd3-selection@1'","create_time":"$D2020-12-20T13:53:09.373Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c2f17e4031105178","login":"espinielli","name":"Enrico Spinielli","avatar_url":"https://avatars-next.observableusercontent.com/2bf5259d0c49a57cec6acc725062bdc41374a518de8772a2a051315f6be64567","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`Data source: [Human Mortality Database](https://www.mortality.org/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = d3.csv('https://gist.githubusercontent.com/johnburnmurdoch/0de956a2a646dbddc47a54cc967481f1/raw/b8e411b9ba0374bf1b85aa48d0d68a697dbc73af/HMD_EW2020.csv');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"