40:null 41:["$","title",null,{"children":"Mortality rate by age and sex, Norway, 1846 to 2020 | Jari Bakken | Observable"}] 47:T1664,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(); }48:[{"id":"3bc8a1d6d63c86627da78263d5009ac512ec35a5730432fd9363f6ba75317420ed78bf1f0f00c5338b154f5f21c7064f66aaab7fd06176039c18fc4c20ec0f0a","href":"https://static.observableusercontent.com/files/3bc8a1d6d63c86627da78263d5009ac512ec35a5730432fd9363f6ba75317420ed78bf1f0f00c5338b154f5f21c7064f66aaab7fd06176039c18fc4c20ec0f0a","name":"no-mortality.csv","type":"text/csv","lastModified":1679074748871.245,"size":294982}] 45:{"id":"31554bad668f749c","slug":null,"title":"Mortality rate by age and sex, Norway, 1846 to 2020","thumbnail":"455f86c4a7741dbccd22e89f8ba7ee4b5e1cce6ca3405d7208576c9dbebe4291","access_level":"public","create_time":"$D2023-03-17T17:37:51.815Z","update_time":"$D2023-03-17T17:41:07.050Z","view_time":null,"first_public_time":"$D2023-03-17T17:37:51.815Z","has_unpublished_edits":null,"fork":{"id":"a283876770c880d4","slug":null,"title":"Mortality rate by age and sex, Norway, 1846 to 2020","owner":{"id":"a48c08d678815cda","login":"jarib","name":"Jari Bakken"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a48c08d678815cda","login":"jarib","name":"Jari Bakken","avatar_url":"https://avatars-next.observableusercontent.com/0d321229fc951cbcaa21bcfeee18c14b16ba1ba494243859a6e267f4a4e83c8a","tier":"starter_2024","bio":"Journalism, code, music ","following":false},"version":348,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7a3852806266669","login":"jarib","name":"Jari Bakken","avatar_url":"https://avatars-next.observableusercontent.com/0d321229fc951cbcaa21bcfeee18c14b16ba1ba494243859a6e267f4a4e83c8a","tier":null,"bio":"Journalism, code, music ","following":false}],"members":[{"type":"individual","id":"d7a3852806266669","login":"jarib","name":"Jari Bakken","avatar_url":"https://avatars-next.observableusercontent.com/0d321229fc951cbcaa21bcfeee18c14b16ba1ba494243859a6e267f4a4e83c8a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mortality rate by age and sex, Norway, 1846 to 2020","cells":[{"id":190,"value":"md`# Mortality rate by age and sex, ${selected.name}, ${yearRange[0]} to ${yearRange[1]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"data = selected.file.csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"datasets = [{ name: \"Norway\", file: FileAttachment(\"no-mortality.csv\") }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"selected = datasets[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"yearRange = d3.extent(data, (d) => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"