3f:null 40:["$","title",null,{"children":"Horizontal Category Bar Chart | Jasper Croome | Observable"}] 46:Td34,horizontalbarChart = { // create data object 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() .domain(xDomain) .range([0, dimensions.width - dimensions.marginLeft * 2]); const yScale = d3 .scaleBand() .domain(yDomain) .range([dimensions.marginTop, dimensions.height - dimensions.marginTop]) .padding(0.05); // 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()) .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() - 8) .attr("x", dimensions.width / 3 - dimensions.marginLeft) .attr("font-size", "16") .attr("fill", "white") .attr("text-anchor", "start"); // 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() - 8) .attr("x", (d) => xScale(metricAccessor(d)) - 10 + dimensions.marginLeft) .attr("font-size", "16") .attr("fill", "white") .attr("text-anchor", "end"); // add the additional labels for the latitudes svg .append("g") .attr("class", "latitudeLabel") .selectAll("text") .data(data) .join("text") .text((d) => d["Latitude"]) .attr("y", (d) => yScale(categoryAccessor(d)) + yScale.bandwidth() - 8) .attr("x", dimensions.marginLeft + 5) .attr("font-size", "16") .attr("fill", "white") .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]); }); const latitudeLabels = svg.selectAll(".latitudeLabel"); categoryNameStyleArray.forEach((s) => { latitudeLabels.style(s[0], s[1]); }); return svg.node(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"2111ae8a34acd3ad","slug":"horizontal-bar-template","title":"Horizontal Category Bar Chart","thumbnail":"48bbf4abcb42ae65683e8e426be3e962c3847448ebe620c8186d3c364949f34c","access_level":"public","create_time":"$D2021-12-17T14:00:43.780Z","update_time":"$D2022-01-04T14:33:29.362Z","view_time":null,"first_public_time":"$D2021-12-17T14:37:44.011Z","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":1979,"publish_version":1979,"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":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Horizontal Category Bar Chart","cells":[{"id":0,"value":"# Horizontal Category Bar Chart\n\nThis is a Horizontal Chart, generally used to compare a single value across various categories.\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, copy-pasted directly from spreadsheet\ndata = d3.tsvParse(`City\tSolar Insolation\tLatitude\nSaint Petersburg (59º 57'N)\t14.16\t60º N\nMoscow (55º 45' N)\t14.93\t55º N\nParis (48º 51' N)\t15.53\t50º N\nGeneva (46º 12' N)\t16.02\t45º N\nSan Francisco (37º 47' N)\t16.42\t40º N\nSrinagar (34º 05' N)\t16.74\t35º N\nWuhan (30º 35' N)\t17\t30º N\nMiami (25º 47' N)\t17.21\t25º N\nMumbai (18º 59' N)\t17.38\t20º N\nBangkok (13º 45' N)\t17.5\t15º N\nPanama City (8º 59' N)\t17.59\t10º N\nMale (4º 11' N)\t17.64\t5º N\nNairobi (1º 17' S)\t17.66\t0º\nJakarta (6º 12' S)\t17.74\t5º S\nLima (12º 03' S)\t17.6\t10º S\nCairns (16º 56' S)\t17.51\t15º S\nPort Louis (20º 10' S)\t17.4\t20º S\nCuritiba (25º 25' S)\t17.24\t25º S\nPerth (31º 57' S)\t17.04\t30º S\nBuenos Aires (34º 36' S)\t16.79\t35º S\nHamilton (37º 47' S)\t16.47\t40º S\nHobart (42º 53' S)\t16.09\t45º S\nRio Gallegos (51º 38' S)\t15.62\t50º S\nPuerta Tora (55º 05' S)\t15.03\t55º S`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `Solar Energy Absorbed (kw/h) per square meter, mid-March`","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(\"~s\");\n return f(d);\n}","pinned":false,"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":false,"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":false,"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":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":114,"value":"dimensions = Object({\n height: 600,\n width: 600,\n marginLeft: 40,\n marginTop: 10\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"