3f:null 40:["$","title",null,{"children":"Horizontal Bar Chart | Jasper Croome | Observable"}] 46:Tad0,horizontalbarChart = { // create data objects const xDomain = d3.extent([0, d3.max(data.map((d) => metricAccessor(d)))]); const yDomain = data.map((d) => categoryAccessor(d)); // create the scales const xScale = d3.scaleLinear(xDomain, [ 0, dimensions.width - dimensions.marginLeft * 2 ]); const yScale = d3.scaleBand(yDomain, [ dimensions.marginTop, dimensions.height - dimensions.marginTop ]); // create & append to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("width", dimensions.width) .attr("height", dimensions.height); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "annotationBold") .attr("y", dimensions.marginTop * (2 / 3)); // add the detail bars svg .append("g") .attr("class", "element") .selectAll("rect") .data(data) .join("rect") .attr("x", dimensions.marginLeft) .attr("y", (d) => yScale(categoryAccessor(d))) .attr("width", (d) => xScale(metricAccessor(d))) .attr("height", (d) => yScale.bandwidth() * (4 / 5)) .attr("fill", colors[1]); // add the labels for the detail bars svg .append("g") .attr("class", "categoryName") .selectAll("text") .data(data) .join("text") .text((d) => categoryAccessor(d)) .attr( "y", (d) => yScale(categoryAccessor(d)) + yScale.bandwidth() * (4 / 5) - 3 ) .attr("x", dimensions.marginLeft - 10) .attr("font-size", "20") .attr("text-anchor", "end"); // add the value labels for each bar svg .append("g") .attr("class", "valueLabel") .selectAll("text") .data(data) .join("text") .text((d) => formatValue(metricAccessor(d))) .attr( "y", (d) => yScale(categoryAccessor(d)) + yScale.bandwidth() * (4 / 5) - 3 ) .attr("x", (d) => xScale(metricAccessor(d)) + 10 + dimensions.marginLeft) .attr("font-size", "20") .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 titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.forEach((t) => { titleText.style(t[0], t[1]); }); const categoryNameStyleArray = Object.entries(summaryLabelStyle); const categoryNames = svg.selectAll(".categoryName"); categoryNameStyleArray.forEach((s) => { categoryNames.style(s[0], s[1]); }); const valueLabelStyleArray = Object.entries(detailLabelStyle); const valueLabels = svg.selectAll(".valueLabel"); valueLabelStyleArray.forEach((s) => { valueLabels.style(s[0], s[1]); }); return svg.node(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"1d2579cb1acdbd69","slug":"horizontal-bar-chart","title":"Horizontal Bar Chart","thumbnail":"715d2686bb085b7b3e5b307b3a506e55d3f0c1cab445251f068b88d75cb0fcae","access_level":"public","create_time":"$D2022-01-29T22:10:34.838Z","update_time":"$D2022-01-29T22:14:20.189Z","view_time":null,"first_public_time":"$D2022-01-29T22:14:23.373Z","has_unpublished_edits":null,"fork":true,"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":1988,"publish_version":1988,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizontal Bar Chart","cells":[{"id":0,"value":"# Horizontal Bar Chart","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, copy-pasted directly from spreadsheet\ndata = d3.tsvParse(\n `Entity\tFarmSize\nUnited States\t178.4\nBrazil\t72.8\nUnited Kingdom\t70.9\nFrance\t45.0\nAustria\t34.1\nNetherlands\t22.1\nIndia\t1.3\nEthiopia\t1.0\nVietnam\t0.7\n`,\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `Average Farm Size Across the Globe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"// this is where you specify the format to be used for the value labels. more info can be found here: https://github.com/d3/d3-format/blob/v3.1.0/README.md#format\nformatValue = (d) => {\n const f = d3.format(\"\");\n return f(d) + \" ha\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"#### Once complete, click on the three dots to the left of the chart and select 'Download SVG'.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":1831,"value":"metricAccessor = (d) => {\n return parseFloat(d[dataStructure.metricName]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"categoryAccessor = (d) => {\n return d[dataStructure.categoryName]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"// this is where you call out what columns should be used for metrics and categories in your chart.\ndataStructure = Object({\n metricName: data.columns[1],\n categoryName: data.columns[0]\n})","pinned":true,"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)}`.substring(0, 1) // this converts the values in the data object to gigatons","pinned":true,"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: 500,\n width: 900,\n marginLeft: 300,\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":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-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":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 { 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":"$W48","stdlib":"1"}} 45:"$44:body"