2a:Tebe,// 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 = 90, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 60, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},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("x", -marginLeft) .attr("font-size", 40) .attr("y", 40) .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", 40); return Object.assign(svg.node(), {scales: {color: zScale}}); }2b:Tf6c,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart2(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }2c:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart13(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key2) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }2d:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart12(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key3) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }2e:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart11(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key4) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }2f:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart10(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key5) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }30:Tf6d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart9(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key6) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }31:Tf6d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart8(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key7) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }32:Tf6d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart7(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key8) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }33:Tf6d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart6(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key9) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }34:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart5(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key10) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }35:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart4(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key11) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }36:Tf6e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart3(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 = 250, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 155, // left margin, in pixels width = 700, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.4, // 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]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 60) .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("x", -marginLeft) .attr("font-size", 80) .attr("font-weight", "bold") .attr("y", 60) .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", 50); svg.append(() => key12) .attr("transform", `translate(150,-700)`) .attr("width", width/2 +500) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }37:[{"id":"a68d56ae099d657ff6148661a184fd5009b11576d6dc4caf710cdf758d447141a49d7ebf50f31ca1bdc8b69c07954e2765e88bf91470770fb22ce9688e55e9c5","href":"https://static.observableusercontent.com/files/a68d56ae099d657ff6148661a184fd5009b11576d6dc4caf710cdf758d447141a49d7ebf50f31ca1bdc8b69c07954e2765e88bf91470770fb22ce9688e55e9c5","name":"vaccination-coverage-byAgeAndSexDownload.csv","type":"text/csv","lastModified":1639222525225.325,"size":3129097},{"id":"9725e6990f855a9d03b8a92a45a0d9fba985ed9696db866fba8be1a73a5220c0f2c4e621a8a36093b8efd31ac18acea97a400040a385ef5944abac53240be4d9","href":"https://static.observableusercontent.com/files/9725e6990f855a9d03b8a92a45a0d9fba985ed9696db866fba8be1a73a5220c0f2c4e621a8a36093b8efd31ac18acea97a400040a385ef5944abac53240be4d9","name":"vaccination-coverage-byAgeAndSexDownload@1.csv","type":"text/csv","lastModified":1639227256445.163,"size":3158304}] 29:{"title":"Covid-19 vaccination rates by Province grouped by Age and Sex","cells":[{"id":0,"value":"# Covid-19 vaccination rates by Province grouped by Age and Sex","pinned":true,"hidden":false,"mode":"md"},{"id":449,"value":"key = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"key2 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"key3 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"key4 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"key5 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"key6 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"key7 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"key8 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"key9 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"key10 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"key11 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"key12 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"key13 = Legend(d3.scaleOrdinal([\"Male\", \"Female\"], d3.schemeSpectral[sexy.length +2]), {\n tickSize: 0, \n fontSize: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"key.setAttribute(\"font-size\", 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"key.getAttribute(\"font-size\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof groupbarbc = GroupedBarChart(bcdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ BC Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n yDomain:[0,1],\n zDomain: sexy,\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 2000\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof groupbar2bc = GroupedBarChart2(bcdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ BC Covid-19 Vaccinations rate by age and sex\",\n yDomain:[0,1],\n yFormat: \"%\",\n zDomain: sexy,\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof groupbar2alb = GroupedBarChart3(abdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ AB Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n yDomain:[0,1],\n zDomain: sexy,\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof groupbar2man = GroupedBarChart4(MNdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ MN Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"viewof groupbar2sas = GroupedBarChart5(SKdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ SK Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"viewof groupbar2ont = GroupedBarChart6(ONdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Ont. Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof groupbar2que = GroupedBarChart7(QBdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Quebec Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof groupbar2Nfl = GroupedBarChart8(NFLdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ NFL Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof groupbar2NB = GroupedBarChart9(NBdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ NB Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"viewof groupbar2PEI = GroupedBarChart10(PEIdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ PEI Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"viewof groupbar2NUN = GroupedBarChart11(NUNdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Nunavut Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof groupbar2YUK = GroupedBarChart12(YKdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Yukon Covid-19 Vaccination rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"viewof groupbar2NWT = GroupedBarChart13(NWdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ NWT Covid-19 Vaccinations rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":808,"value":"viewof groupbar2NS = GroupedBarChart12(NSdata, {\n x: d => d.age,\n y: d => d.prop_fully /100,\n z: d => d.sex,\n // xDomain: d3.groupSort(data, D => d3.sum(D, d => -d.value), d => d.name).slice(0, 8), // top 6\n yLabel: \"↑ Nova Scotia Covid-19 Vaccination rate by age and sex\",\n yFormat: \"%\",\n zDomain: sexy,\n yDomain:[0,1],\n colors: d3.schemeSpectral[sexy.length +2],\n width,\n height: 1700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":742,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"ages2 = [\"0–15\",\n\"16–69\",\n\"70–74\",\n\"75–79\",\n\"80+\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"sexy = [\"m\",\"f\"]","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":359,"value":"population = FileAttachment(\"vaccination-coverage-byAgeAndSexDownload@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"bcdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"British Columbia\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"abdata[15].prop_fully","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"abdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Alberta\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"ONdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Ontario\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"QBdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Quebec\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"SKdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Saskatchewan\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"MNdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Manitoba\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"NSdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Nova Scotia\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"NUNdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Nunavut\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"NWdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Northwest Territories\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"YKdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Yukon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"NFLdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Newfoundland and Labrador\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"PEIdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"Prince Edward Island\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"NBdata = population.filter(d => d.week_end > date && d.age != \"All ages\" && d.age != \"Unknown\" && d.age != \"Not reported\" && d.age != \"0–4\" && d.age != \"05–11\"&& d.prename == \"New Brunswick\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"date = new Date(2021,11,3)","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":295,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}