3f:null 40:["$","title",null,{"children":"Grouped Vertical Category Bar Chart | Jasper Croome | Observable"}] 46:Tf3e,{ // define the bounds of the chart const chartDimensions = { margin: dimensions.margin, boundedWidth: dimensions.width - dimensions.margin.left - dimensions.margin.right, boundedHeight: dimensions.height - dimensions.margin.top - dimensions.margin.bottom }; // create data objects const dataEntries = Object.entries(data); const groupedDataEntries = dataEntries.map((e) => { return [e[0], Object.entries(e[1])]; }); const xValues = []; const yValues = []; dataEntries.map((dataEntry) => { Object.entries(dataEntry[1]).map((category) => { xValues.push(category[0]); yValues.push(category[1]); }); }); const xDomain = xValues.filter((val, vNdx, self) => { return self.indexOf(val) === vNdx; }); const yDomain = d3.extent(yValues); const showZero = true; if (showZero) { if (yDomain[1] > 0) yDomain[0] = 0; else yDomain[1] = 0; } // create the scales const xScale = d3.scaleBand(xDomain, [ chartDimensions.margin.left, chartDimensions.boundedWidth - chartDimensions.margin.right ]); xScale.paddingInner(0.2); xScale.paddingOuter(0.2); const yScale = d3.scaleLinear(yDomain, [ chartDimensions.boundedHeight - chartDimensions.margin.bottom, chartDimensions.margin.top ]); // create & append to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("width", chartDimensions.boundedWidth) .attr("height", chartDimensions.boundedHeight); // add the x axis svg .append("g") .attr( "transform", `translate(0, ${ chartDimensions.boundedHeight - chartDimensions.margin.bottom })` ) .attr("class", "axis") .call(d3.axisBottom(xScale)); // add the y axis svg .append("g") .attr("transform", `translate(${chartDimensions.margin.left},0)`) .attr("class", "axis") .call(d3.axisLeft(yScale)); // add the bars groupedDataEntries.map((group, gNdx) => { svg .append("g") .selectAll("rect") .data(group[1]) .join("rect") .attr( "x", (d, dNdx) => xScale(d[0]) + xScale.bandwidth() * (gNdx / groupedDataEntries.length) ) .attr("width", xScale.bandwidth() / groupedDataEntries.length) .attr("y", (d) => yScale(d[1])) .attr( "height", (d) => chartDimensions.boundedHeight - chartDimensions.margin.bottom - yScale(d[1]) ) .attr("fill", colors[gNdx]) .attr("stroke", "white"); }); // add styling svg .append("text") .attr("class", "axisLabel bottom") .attr("text-anchor", "beginning") .attr("x", dimensions.margin) .attr("y", dimensions.height - dimensions.margin / 3) .text(axes.axisBottom.label); const axisPath = svg.selectAll(".axis .domain"); const axisTickLine = svg.selectAll(".axis .tick").selectAll("line"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisLabel = svg.selectAll(".axisLabel"); const axisLineStyleArray = Object.entries(axisStyle.lines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); axisLineStyleArray.map((s) => { axisPath.style(s[0], s[1]); axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "title") .attr("y", chartDimensions.margin.top * (2 / 3)) .attr("x", chartDimensions.margin.left * (1 / 2)); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); return svg.node(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"930cfd36b5f7beff","slug":"grouped-vertical-category-bar-chart","title":"Grouped Vertical Category Bar Chart","thumbnail":"fd225c6bf099b32e1e3cb81d3086690c43beafb3ea53be1ddada72a4758de7e9","access_level":"public","create_time":"$D2021-11-07T22:41:46.137Z","update_time":"$D2021-11-08T14:17:12.346Z","view_time":null,"first_public_time":"$D2021-11-07T23:59:37.547Z","has_unpublished_edits":null,"fork":{"id":"f303d2489931ebfa","slug":"grouped-horizontal-category-bar-chart","title":"Grouped Horizontal Category Bar Chart","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":1941,"publish_version":1941,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Grouped Vertical Category Bar Chart","cells":[{"id":0,"value":"# Grouped Vertical Category Bar Chart\n\nThis is a Grouped Vertical Bar Chart, generally used to categorize and compare the values of various 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{\n 2018:{Hydrogen:4,Bioenergy:7,Wind:11,\"Solar PV\":32,Other:4,\"All Renewables\":7},\n 2019:{Hydrogen:2,Bioenergy:8,Wind:12,\"Solar PV\":22,Other:7,\"All Renewables\":6},\n 2020:{Hydrogen:1,Bioenergy:2,Wind:11.9,\"Solar PV\":16,Other:3,\"All Renewables\":4},\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":"// example dataset\ndata = Object({\n 2018:{Hydrogen:4,Bioenergy:7,Wind:11,\"Solar PV\":32,Other:4,\"All Renewables\":7},\n 2019:{Hydrogen:2,Bioenergy:8,Wind:12,\"Solar PV\":22,Other:7,\"All Renewables\":6},\n 2020:{Hydrogen:1,Bioenergy:2,Wind:11.9,\"Solar PV\":16,Other:3,\"All Renewables\":4},\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$46","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":1844,"value":"dimensions = Object({\n margin: { left: 40, top: 60, bottom: 60, right: 10 },\n width: window.innerWidth,\n height: 600\n})","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":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":1932,"value":"axisLabelStyle = Object({\n \"font-weight\": 400,\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":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":false,"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 = `Vertical Category Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"import {\n styleString,\n textureArrays,\n colors,\n chartObjectStyle\n} 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":"$W48","stdlib":"1"}} 45:"$44:body"