3f:null 40:["$","title",null,{"children":"Grouped Horizontal Category Bar Chart | Jasper Croome | Observable"}] 46:T59a,// example dataset data = Object({ Energy: { Total: 732, // "Energy Use in Industry": { // Total: 242, "Iron and Steel": { Total: 72 }, "Non-Ferrous Metals": { Total: 7 }, "Chemical & Petrochemical": { Total: 36 }, "Food & Tobacco": { Total: 1 }, "Paper & Pulp": { Total: 6 }, Machinery: { Total: 5 }, "Other Industry": { Total: 106 }, // }, // Transport: { // Total: 162, "Road Transport": { Total: 119 }, Aviation: { Total: 19 }, Shipping: { Total: 17 }, Rail: { Total: 4 }, Pipeline: { Total: 2 }, // }, // "Energy Use in buildings": { // Total: 175, "Energy use in Residential Buildings": { Total: 109 }, "Energy use in Commercial Buildings": { Total: 66 }, // }, "Unallocated fuel combustion": { Total: 78 }, "Fugitive emissions from energy production": { Total: 58 }, "Energy in Agriculture & Fishing": { Total: 17 } }, Industry: { Total: 52, Chemicals: { Total: 22 }, Cement: { Total: 30 } }, Waste: { Total: 32, Wastewater: { Total: 13 }, Landfills: { Total: 19 } }, "Agriculture, Forestry & Land Use": { Total: 184, "Livestock & Manure": { Total: 58 }, "Agricultural soils": { Total: 41 }, "Rice Cultivation": { Total: 13 }, "Crop burning": { Total: 35 }, Deforestation: { Total: 22 }, Cropland: { Total: 14 }, Grassland: { Total: 1 } } })47:T2e49,{ // create data objects const dataEntries = Object.entries(data); let firstTier = {}; let secondTier = {}; let thirdTier = {}; dataEntries.map((d) => { firstTier[d[0]] = d[1]["Total"]; Object.entries(d[1]) .filter((d) => d[0] !== "Total") .sort((a, b) => b[1] - a[1]) .map((e) => { secondTier[e[0]] = { value: e[1]["Total"] ?? e[1], category: d[0] }; Object.entries(e[1]) .filter((d) => d[0] !== "Total") .sort((a, b) => b[1] - a[1]) .map((e3) => { thirdTier[e3[0]] = { value: e3[1], category: d[0] }; }); }); }); const firstTierEntries = Object.entries(firstTier).sort( (a, b) => b[1] - a[1] ); let iterator = 0; const cumulativeEntries = []; firstTierEntries.map((e) => { iterator += e[1]; cumulativeEntries.push([e[0], iterator]); }); const categories = firstTierEntries.map((e) => e[0]); const secondTierEntries = Object.entries(secondTier) .sort((a, b) => a[1].value - b[1].value) .sort( (a, b) => categories.indexOf(b[1].category) - categories.indexOf(a[1].category) ); const subCategories = secondTierEntries.map((e) => e[0]); const categoryStack = d3 .stack() .keys(categories) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const categoryStackData = categoryStack([firstTier]); const secondTierPreStack = [{}]; secondTierEntries.map((e) => { secondTierPreStack[0][e[0]] = e[1].value; }); const subCatStack = d3 .stack() .keys(subCategories) .order(d3.stackOrderReverse) .offset(d3.stackOffsetNone); const subCatStackData = subCatStack(secondTierPreStack); const xDomain = [0, d3.max(secondTierEntries.map((t) => t[1].value)) * 1.05]; const yDomain = secondTierEntries.map((t) => t[0]); const ySummaryDomain = [0, d3.sum(firstTierEntries.map((t) => t[1]))]; const ySummaryTextDomain = categories; // create the scales const xScale = d3.scaleLinear(xDomain, [ 0, (dimensions.width - dimensions.marginLeft) / 2 ]); const yHoriScale = d3.scaleBand(yDomain, [ dimensions.height - dimensions.marginTop, dimensions.marginTop ]); const yVertScale = d3.scaleLinear( [0, 963], [dimensions.height, dimensions.marginTop] ); const ySummaryScale = d3.scaleLinear(ySummaryDomain, [ dimensions.height - dimensions.marginTop * 2, dimensions.marginTop * 2 ]); const ySummaryTextScale = d3.scaleLinear(ySummaryTextDomain, [ dimensions.height - dimensions.marginTop * 2, dimensions.marginTop * 2 ]); const heightScale = d3.scaleLinear(xDomain, [0, yHoriScale.bandwidth()]); // create & append to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("width", dimensions.width) .attr("height", dimensions.height); textureArrays.map((t) => { svg.call(t); }); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "annotationBold") .attr("y", dimensions.marginTop * (2 / 3)); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); console.log(textureArrays); // add the detail bars switch (barAlignment) { case "horizontal": { svg .append("g") .attr("class", "element") .selectAll("rect") .data(secondTierEntries) .join("rect") .attr("x", dimensions.marginLeft) .attr("y", (d) => yHoriScale(d[0])) .attr("width", (d) => xScale(d[1].value)) .attr("height", (d) => yHoriScale.bandwidth() * (4 / 5)) .attr("fill", (d, dNdx) => { const groupIndex = categories.indexOf(d[1].category); return groupIndex === 0 ? "#4cb392" : textureArrays[groupIndex].url(); }); } break; case "vertical": { svg .append("g") .attr("class", "element") .selectAll("rect") .data(subCatStackData) .join("rect") .attr("x", dimensions.marginLeft + 5) .attr("y", (d) => dimensions.height - yVertScale(d[0][1])) .attr("width", "50px") .attr( "height", (d) => dimensions.height - yVertScale(d[0][1] - d[0][0]) ) .attr("fill", (d, dNdx) => { const groupIndex = categories.indexOf(d.key); return groupIndex === 0 ? "#4cb392" : colors[groupIndex]; }); } break; default: { svg .append("g") .attr("class", "element") .selectAll("rect") .data(secondTierEntries) .join("rect") .attr("x", dimensions.marginLeft) .attr("y", (d) => yHoriScale(d[0])) .attr("width", (d) => xScale(d[1].value)) .attr("height", (d) => yHoriScale.bandwidth() * (4 / 5)) .attr("fill", (d, dNdx) => { const groupIndex = categories.indexOf(d[1].category); return groupIndex === 0 ? "#4cb392" : colors[groupIndex]; }); } } // add the summary visual switch (summaryView) { case "Vertical Bar": { svg .append("g") .attr("class", "summaryElement") .selectAll("rect") .data(categoryStackData) .join("rect") .attr("x", dimensions.marginLeft + dimensions.width / 2.5) .attr("y", (d) => dimensions.height - ySummaryScale(d[0][0])) .attr( "height", (d) => (dimensions.height - dimensions.marginTop) * (firstTier[d.key] / ySummaryDomain[1]) ) .attr("width", "35px") .attr("fill", (d, dNdx) => dNdx === 0 ? "#4cb392" : textureArrays[dNdx].url() ); // add the labels for the summary bars svg .append("g") .attr("class", "summaryBarLabel") .selectAll(".summaryBarLabel") .data(categoryStackData) .join("text") .text((d) => `${d.key}: ${valueCalc(d[0][1] - d[0][0])} gigatons`) .attr("x", dimensions.marginLeft + dimensions.width / 2.5 + 40) .attr("y", (d) => dimensions.height - ySummaryScale(d[0][0])) .attr( "dy", (d) => ((dimensions.height - dimensions.marginTop) * (firstTier[d.key] / ySummaryDomain[1])) / 2 ); Object.entries(summaryLabelStyle).map((e) => { svg.selectAll(".summaryBarLabel").attr(`${e[0]}`, `${e[1]}`); }); } break; case "Text": { svg .append("g") .attr("class", "summaryBarText") .selectAll(".summaryBarText") .data(categoryStackData) .join("text") .text((d) => `${d.key}: ${valueCalc(d[0][1] - d[0][0])}`) .attr("x", dimensions.width) .attr("y", (d) => dimensions.height - ySummaryTextScale(d.key)) .attr("text-anchor", "end") .attr( "dy", (d) => (dimensions.height - dimensions.marginTop) * (categories.indexOf(d.key) / (categories.length - 1)) ) .attr("font-size", "36px"); Object.entries(summaryLabelStyle).map((e) => { svg.selectAll(".summaryBarLabel").attr(`${e[0]}`, `${e[1]}`); }); } break; case "Waffle": { const range = d3.range(0, 100); svg .append("g") .attr("class", "summaryWaffle") .selectAll("rect") .data(range) .join("rect") .attr("x", (d, dNdx) => (dNdx % 10) * yHoriScale.bandwidth()) .attr( "y", (d, dNdx) => Math.floor(dNdx / 10) * yHoriScale.bandwidth() ) .attr("height", yHoriScale.bandwidth()) .attr("width", yHoriScale.bandwidth()) .attr("fill", (d, dNdx) => { return; dNdx === 0 ? "#4cb392" : textureArrays[ cumulativeEntries.indexOf( cumulativeEntries.find((e) => { return e[1] >= (d + 1) * 10; }) ) ].url(); }) .attr("stroke", "white") .attr( "transform", `translate(${dimensions.marginLeft + dimensions.width / 3},${ dimensions.height * (1 / 3) })` ); } break; default: { svg .append("g") .attr("class", "summaryElement") .selectAll("rect") .data(categoryStackData) .join("rect") .attr("x", dimensions.marginLeft + dimensions.width / 2.5) .attr( "y", (d, dNdx) => dimensions.height / 2 + yHoriScale.bandwidth() * 1.05 * dNdx ) .attr("height", yHoriScale.bandwidth()) .attr("width", yHoriScale.bandwidth()) .attr("fill", (d, dNdx) => dNdx === 0 ? "#4cb392" : textureArrays[dNdx].url() ); // add the labels for the summary squares svg .append("g") .attr("class", "summaryBarLabel") .selectAll(".summaryBarLabel") .data(categoryStackData) .join("text") .text((d) => `${d.key}: ${valueCalc(d[0][1] - d[0][0])} gigatons`) .attr("x", dimensions.marginLeft + dimensions.width / 2.5 + 40) .attr( "y", (d, dNdx) => dimensions.height / 2 + yHoriScale.bandwidth() * dNdx + yHoriScale.bandwidth() ); Object.entries(summaryLabelStyle).map((e) => { svg.selectAll(".summaryBarLabel").attr(`${e[0]}`, `${e[1]}`); }); } } // add the labels for the detail bars svg .append("g") .attr("class", "barLabel") .selectAll(".barLabel") .data(barAlignment === "vertical" ? subCatStackData : secondTierEntries) .join("text") .text((d) => (barAlignment === "vertical" ? `${d.key}` : `${d[0]}`)) .attr("x", dimensions.marginLeft) .attr("y", (d) => barAlignment === "vertical" ? dimensions.height - yVertScale(d[0][1]) : yHoriScale(d[0]) ) .attr("dy", "-2px") .attr("transform", `translate(-3,${yHoriScale.bandwidth() * (2 / 3)})`) .attr("text-anchor", "end"); svg .append("g") .attr("class", "barLabel") .selectAll(".barLabel") .data(barAlignment === "vertical" ? subCatStackData : secondTierEntries) .join("text") .text((d) => barAlignment === "vertical" ? `${valueCalc(d[0][1] - d[0][0])}` : `${valueCalc(d[1].value)}` ) .attr("x", (d) => barAlignment === "vertical" ? dimensions.marginLeft + 75 : xScale(d[1].value) + dimensions.marginLeft ) .attr("y", (d) => barAlignment === "vertical" ? dimensions.height - yVertScale(d[0][1]) : yHoriScale(d[0]) ) .attr("dy", "-2px") .attr("transform", `translate(3,${yHoriScale.bandwidth() * (2 / 3)})`) .attr("text-anchor", "start"); Object.entries(detailLabelStyle).map((e) => { svg.selectAll(".barLabel").attr(`${e[0]}`, `${e[1]}`); }); // apply the standard style to the elements const styleArray = Object.entries(elementStyle); styleArray.map((s) => { svg.selectAll("rect").style(s[0], s[1]); }); // apply the threshold style to the elements if (threshold.show) { const thresholdCircles = svg.selectAll(".threshold"); const thresholdStyle = Object.entries(threshold.style); thresholdStyle.map((t) => { thresholdCircles.style(t[0], t[1]); }); } return svg.node(); }48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"f303d2489931ebfa","slug":"grouped-horizontal-category-bar-chart","title":"Grouped Horizontal Category Bar Chart","thumbnail":"e302cc3f1f4f452bc8abcbcae15562e16af53581d6b63ac57dfb865fe60d20d7","access_level":"public","create_time":"$D2021-11-01T03:40:22.270Z","update_time":"$D2022-01-07T13:40:53.911Z","view_time":null,"first_public_time":"$D2021-11-01T04:24:19.869Z","has_unpublished_edits":null,"fork":{"id":"e5943a17424479a1","slug":"grouped-waffle-chart-single-shape-per-category","title":"Grouped Waffle Chart - single shape per category","owner":{"id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":1813,"publish_version":1813,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Grouped Horizontal Category Bar Chart","cells":[{"id":0,"value":"# Grouped Horizontal Category Bar Chart\n\nThis is a Grouped Horizontal Chart, generally used to visualize the contribution of various groups to the value of a few larger groups. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"## 1. Declare your Data\n\nThis is where you would declare data as whatever you want to graph. For this chart, it needs to have a key-value pairing for each category, à la: \n\n```\n{\"Energy\": {\n \"Total\":73.2,\n \"Energy Use in Industry\":{\n \"Total\":24.2,\n \"Iron and Steel\":7.2,\n \"Non-Ferrous Metals\":0.7,\n \"Chemical & Petrochemical\":3.6,\n \"Food & Tobacco\":1,\n \"Paper & Pulp\":0.6,\n \"Machinery\":0.5,\n \"Other Industry\":10.6\n }\n}}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"viewof summaryView = Inputs.radio(\n [\"Text\", \"Vertical Bar\", \"Waffle\", \"Legend\"],\n {\n label: \"Select a Summary Visual\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"viewof barAlignment = Inputs.radio([\"horizontal\", \"vertical\"], {\n label: \"Select an alignment for the detail bars\"\n})","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":1220,"value":"**Anything below this box is maintenance-related, and doesn't directly change the experience of the grouped Waffle Chart**\n\n(apart from maybe breaking it)\n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"valueCalc = (n) => `${(n / 10000) * 494}`.substring(0, 4) // this converts the values in the data object to gigatons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"// This is where you declare what the threshold is (if there is one), and whether or not to display it. An example is provided below.\nthreshold = Object({\n show: false, // toggles whether or not to show\n showIndicator: false,\n target: \"y\", // can be x, y, z or category\n criteria: \">\", // can be any combination of '>','=','<', or '===' for string comparison\n value: \"75000\", // can either be one value or two (for comparing against a range, e.g. 'between 3.4 and 4.2' would be 'value: [3.4, 4.2]')\n drawingStyle: \"brush\", // choose brush, pencil, or computer\n style: { fill: \"salmon\" }, // the style passed through to any of the elements\n indicatorStyle: {\n stroke: \"#858585\"\n } // the style for the indicator line (if shown)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"dimensions = Object({\n height: 800,\n width: innerWidth,\n marginLeft: 320,\n marginTop: 60\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"//\n\naxes = Object({\n axisLeft: {\n show: false\n },\n axisBottom: {\n show: false\n },\n axisRight: { show: false }, // for now, this does nothing\n axisTop: { show: false } // samesies\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"axisStyle = Object({\n lines:{\n stroke:'#858585',\n 'stroke-width':'1px'\n },\n font:{\n 'font-size':'16px',\n 'font-weight':400,\n 'fill':'#858585',\n 'stroke-width':'1px',\n 'font-family':'helvetica',\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"detailLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"16\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"summaryLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"20\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"titleStyle = Object({\n 'font-size':'31.25px',\n 'font-weight':400,\n 'font-family':'helvetica, sans-serif',\n 'fill':'#707070'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// the basic style for elements within the chart\nelementStyle = Object({\n \"stroke-width\": \".5px\",\n // fill: \"#1D874E\",\n stroke: \"whitesmoke\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `In 2016, Humans were responsible for 49.4 gigatons of Co2 equivalent emissions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"import { styleString, textureArrays, colors } from \"@jasper/carbon-almanac-stylesheet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"{\n const defaultStyle = document.createElement(\"style\");\n defaultStyle.innerHTML = styleString;\n document.head.appendChild(defaultStyle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"