31:T5ba,provincedatarate = [ {name: "Canada", age: "<17", value: Math.ceil(633/382.46108)},{name: "Canada", age: "1764", value: Math.ceil(23738/382.46108)}, {name: "BC", age: "<17", value: Math.ceil(56/52.14805)},{name: "BC", age: "1764", value: Math.ceil(3085/52.14805)}, {name: "AB", age: "<17", value: Math.ceil(130/44.42879)},{name: "AB", age: "1764", value: Math.ceil(3400/44.42879)}, {name: "Ont", age: "<17", value: Math.ceil(339/148.26276)},{name: "Ont", age: "1764", value: Math.ceil(14396/148.26276)}, {name: "N.L", age: "<17", value: 0},{name: "N.L", age: "1764", value: Math.ceil(30/5.20553)}, {name: "N.S.", age: "<17", value: 0},{name: "N.S.", age: "1764", value: Math.ceil(45/9.92055)}, {name: "Man.", age: "<17", value: Math.ceil(45/13.83765)},{name: "Man.", age: "1764", value: Math.ceil(1506/13.83765)}, {name: "Sask.", age: "<17", value: Math.ceil(58/11.79844)},{name: "Sask.", age: "1764", value: Math.ceil(1150/11.79844)} ]32:Tec1,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height + 10]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft + 10},0)`) .call(yAxis) .attr("font-size", 25) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("font-size", 25) .attr("x", -marginLeft) .attr("y", 20) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 35); return Object.assign(svg.node(), {scales: {color: zScale}}); }33:[{"id":"072f86d48609c3b0eb40428f35d6ac89ea6548123bccfbcb79f5a8785bd446bf2cb489cab25dce494fb4156dac279d1d505570fa2406dc23e06ce2ce0037706d","href":"https://static.observableusercontent.com/files/072f86d48609c3b0eb40428f35d6ac89ea6548123bccfbcb79f5a8785bd446bf2cb489cab25dce494fb4156dac279d1d505570fa2406dc23e06ce2ce0037706d","name":"covid-19-hospitalization-emergency-department-statistics-jan-2020-mar-2021-en.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1637596861436.889,"size":206381}] 2f:{"title":"Covid-19 hospitalization rates: Age","cells":[{"id":0,"value":"# Covid-19 hospitalization rates: Age","pinned":true,"hidden":false,"mode":"md"},{"id":3,"value":"workbook = FileAttachment(\"covid-19-hospitalization-emergency-department-statistics-jan-2020-mar-2021-en.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"sheet1 = workbook.sheet(\"6. COVID-19 ED income quintile \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"partial = workbook.sheet(3, {headers: true, range: \"H5:K9\" }) // data = workbook.sheet(0, { headers: true, range: \":J\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"partial7 = workbook.sheet(3, { range: \"H6:K19\" }) // from cell C1 to column J, last row","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"ages = [\"<17\",\"1764\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"key = Legend(groupbarchart.scales.color, {title: \"Age (years)\"}) // try also Swatches","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"groupbarchart = GroupedBarChart(provincedatarate, {\n x: d => d.name,\n y: d => d.value,\n z: d => d.age,\n xDomain: d3.groupSort(provincedatarate, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Covid-19 hospitalilzation by age per 100,000\",\n zDomain: ages,\n colors: d3.schemeSpectral[ages.length - 1],\n width,\n height: 700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"popu= [\n {prname: \"Canada\",\n pop: 38246108},\n {prname: \"British Columbia\",\n pop: 5214805},\n {prname: \"Alberta\",\n pop: 4442879},\n {prname: \"Saskatchewan\",\n pop: 1179844},\n { prname: \"Manitoba\",\n pop: 1383765},\n {prname: \"Ontario\",\n pop: 14826276},\n { prname: \"Quebec\",\n pop: 8604495},\n { prname: \"Newfoundland and Labrador\",\n pop: 520553},\n { prname: \"Prince Edward Island\",\n pop: 164318},\n {prname: \"Yukon\",\n pop: 42986},\n {prname: \"Nunavut\",\n pop: 39403},\n {prname: \"Northwest Territories\",\n pop: 45504},\n { prname: \"Nova Scotia\",\n pop: 992055},\n {prname: \"New Brunswick\",\n pop: 789225},\n { prname: \"Repatriated travellers\",\n pop: 123333123}\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"provincedata = [\n {name: \"BC\", age: \"<17\", value: 56},{name: \"BC\", age: \"1764\", value: 3085},\n {name: \"AB\", age: \"<17\", value: 130},{name: \"AB\", age: \"1764\", value: 3400},\n {name: \"Ont\", age: \"<17\", value: 339},{name: \"Ont\", age: \"1764\", value: 14396},\n {name: \"N.L\", age: \"<17\", value: 0},{name: \"N.L\", age: \"1764\", value: 30},\n {name: \"N.S.\", age: \"<17\", value: 0},{name: \"N.S.\", age: \"1764\", value: 45},\n {name: \"Man.\", age: \"<17\", value: 45},{name: \"Man.\", age: \"1764\", value: 1506},\n {name: \"Sask.\", age: \"<17\", value: 58},{name: \"Sask.\", age: \"1764\", value: 1150}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"can = [{name: \"Canada\", age: \"<17\", value: 633},{name: \"Canada\", age: \"1764\", value: 23738}]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"data1 = [{name:\"Number of\",x : 100, y : 20}, {name:\"Covid-19 Hospitalizations \",x : 50, y : 50}, {name:\"by income\",x : 100, y : 80}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}