3f:null 40:["$","title",null,{"children":"Multiple Bar Charts | Jasper Croome | Observable"}] 46:T16c2,{ // 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 the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("shape-rendering", "geometricPrecision") .attr("width", chartDimensions.boundedWidth) .attr("height", chartDimensions.boundedHeight); // create data objects metrics.map((metric, mNdx) => { const xValues = []; const yValues = []; const miniBounds = { top: (chartDimensions.boundedHeight - 80 - chartDimensions.margin.top) * (mNdx / metrics.length), bottom: (chartDimensions.boundedHeight - 80 - chartDimensions.margin.top) * ((mNdx + 1) / metrics.length) }; const chartHeight = miniBounds.bottom - miniBounds.top; const metricName = Object.entries(metric[0])[3][0]; const categoryName = Object.entries(metric[0])[0][1]; const categoryAccessor = Object.entries(metric[0])[0][0]; const entrifiedMetric = []; const sortedMetric = metric.sort((a, b) => parseFloat(a[metricName] - b[metricName]) ); const filteredMetric = sortedMetric.filter((d) => { return meats.includes(d[categoryAccessor]); }); filteredMetric.map((dataEntry) => { const entry = Object.entries(dataEntry); xValues.push(entry[0][1]); yValues.push(parseFloat(entry[3][1])); entrifiedMetric.push(entry); }); const yDomain = d3.extent(yValues); const xDomain = xValues.filter((val, vNdx, self) => { return self.indexOf(val) === vNdx; }); const showZero = true; if (showZero) { if (yDomain[1] > 0) { yDomain[0] = 0; yDomain[1] *= 1.25; } else yDomain[1] = 0; } // create the scales const xScale = d3.scaleBand(xDomain, [ chartDimensions.margin.left, chartDimensions.boundedWidth - chartDimensions.margin.right ]); const yScale = d3.scaleLinear(yDomain, [0, chartHeight - 15]); // add the bars and labels svg .append("g") .attr( "transform", `translate(0,${miniBounds.top + chartDimensions.margin.top})` ) .attr("class", `metric${mNdx}`) .selectAll("rect") .data(filteredMetric) .join("rect") .attr("x", (d) => xScale(d[categoryAccessor])) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(d[metricName])) .attr("y", (d) => chartHeight - yScale(d[metricName])) .attr("stroke", "none") .attr("fill", (d) => (categories.length > 0 ? categories : ["Beef (beef herd)"]).includes( d[categoryAccessor] ) ? colors[0] : colors[1] ) .attr("opacity", "0.8"); svg .selectAll(`.metric${mNdx}`) .selectAll("text") .data(filteredMetric) .join("text") .text((d) => (categories.length > 0 ? categories : ["Beef (beef herd)"]).includes( d[categoryAccessor] ) ? formatValue(d[metricName]) : "" ) .attr("class", "summaryLabel") .attr("x", (d) => xScale(d[categoryAccessor]) + 5) .attr("y", (d) => chartHeight - yScale(d[metricName]) + 24); svg .append("g") .attr( "transform", `translate(${0}, ${ chartHeight * (mNdx + 1) + chartDimensions.margin.top })` ) .attr("class", "axis") .attr("text-anchor", "end") .call(d3.axisBottom(xScale)); svg .append("text") .attr("class", "legendItemText") .text(metricName) .attr("x", chartDimensions.margin.left) .attr("y", chartDimensions.margin.top + miniBounds.top + 80) .attr("text-anchor", "start"); }); // add title svg .append("text") .text(title) .attr("class", "title") .attr("y", chartDimensions.margin.top * (2 / 3)) .attr("x", chartDimensions.margin.left * (1 / 2)); // add styling const axisPath = svg.selectAll(".axis .domain"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisTickDash = svg.selectAll(".axis .tick").selectAll("line"); const axisTickLine = svg.selectAll(".tickLine"); const axisLabel = svg.selectAll(".axisLabel"); const legendText = svg.selectAll(".legendItemText"); const summaryText = svg.selectAll(".summaryLabel"); const { titleStyle, axisLabelStyle, axisStyle, detailLabelStyle } = chartObjectStyle; const axisLineStyleArray = Object.entries(axisStyle.lines); const axisTickLineStyleArray = Object.entries(axisStyle.tickLines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); const legendTextStyleArray = Object.entries(detailLabelStyle); const summaryLabelStyleArray = Object.entries(summaryLabelStyle); axisFontStyleArray.push( ["text-anchor", "end"], ["transform", "rotate(-15deg)"] ); axisLineStyleArray.map((s) => { axisPath.style("stroke", "none"); axisTickDash.style("stroke", "none"); }); axisTickLineStyleArray.map((s) => { axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); legendTextStyleArray.map((s) => { legendText.style(s[0], s[1]); }); summaryLabelStyleArray.map((s) => { summaryText.style(s[0], s[1]); }); 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":"ecd7166e6a041559","slug":"multiple-bar-charts","title":"Multiple Bar Charts","thumbnail":"90cd0343fd79e2c04226ecc56b4eaa7e8031fc10f6b552efcd871333353b3778","access_level":"public","create_time":"$D2021-11-11T05:10:47.614Z","update_time":"$D2021-11-12T00:17:38.084Z","view_time":null,"first_public_time":"$D2021-11-11T19:16:51.813Z","has_unpublished_edits":null,"fork":{"id":"e33e7d9c2cf641f5","slug":"horizontal-scatterplot-series","title":"Horizontal ScatterPlot Series","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":2391,"publish_version":2391,"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":"Multiple Bar Charts","cells":[{"id":0,"value":"# Multiple Bar Charts\n\nThis is a Series of simplified bar charts, to compare categories across similar but separate metrics.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"## Focus Categories\nChoose which categories you'd like to focus on. By default, we're focusing on `${defaultFocus}`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2306,"value":"viewof categories = Inputs.checkbox(meats, {\n label: \"Select Categories to focus on\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2151,"value":"import {\n eutrophyingEmissionsPerKg,\n eutrophyingEmissionsPer100gProtein,\n landUsePer1000kCals,\n landUsePer100gProtein\n} from \"@jasper/getting-food-resource-data-from-github\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2323,"value":"meats = Array(\n \"Tofu (soybeans)\",\n \"Peas\",\n \"Fish (farmed)\",\n \"Prawns (farmed)\",\n \"Poultry Meat\",\n \"Pig Meat\",\n \"Lamb & Mutton\",\n \"Beef (beef herd)\",\n \"Beef (dairy herd)\"\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":2293,"value":"defaultFocus = \"Beef (beef herd)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2367,"value":"formatValue = (number) => {\n return d3.format(\".4s\")(number);\n}","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: 60, top: 80, bottom: 60, right: 10 },\n width: 800,\n height: 1200\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":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\": 800,\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":542,"value":"title = `The Impact of ${\n categories.map((c) => c).length > 0 ? categories.map((c) => c) : defaultFocus\n} across various dimensions`","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":2164,"value":"metrics = Array(\n eutrophyingEmissionsPerKg,\n eutrophyingEmissionsPer100gProtein,\n landUsePer1000kCals,\n landUsePer100gProtein\n)","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"