3f:null 40:["$","title",null,{"children":"Vertical Positive/Negative Bar Chart | Jasper Croome | Observable"}] 46:T813,// example dataset, copy-pasted directly from spreadsheet data = d3.tsvParse( `year anomaly 1910 9.7 1911 0.6 1912 0 1913 0.1 1914 0 1915 0 1916 0 1917 2.6 1918 0.1 1919 5.8 1920 0 1921 0 1922 8.1 1923 0 1924 9.6 1925 0 1926 1 1927 0.1 1928 0 1929 0.1 1930 0 1931 13.3 1932 0 1933 4.1 1934 30.7 1935 1.6 1936 13.4 1937 5.2 1938 0 1939 1.2 1940 24.3 1941 0 1942 0.2 1943 2.9 1944 0 1945 0 1946 2 1947 0 1948 0.6 1949 0 1950 0 1951 5.8 1952 8.9 1953 9.5 1954 10 1955 0 1956 1.3 1957 0 1958 9.2 1959 0.9 1960 30.9 1961 1.8 1962 0.3 1963 1.6 1964 1.1 1965 0 1966 0 1967 0 1968 0 1969 0.3 1970 0.4 1971 0 1972 0 1973 0.1 1974 0.9 1975 0 1976 0 1977 0.7 1978 7.2 1979 0 1980 42.2 1981 7.2 1982 0.2 1983 0 1984 0 1985 6.4 1986 0 1987 0 1988 9.2 1989 1 1990 0 1991 0 1992 0 1993 0 1994 85.9 1995 1.7 1996 35.3 1997 0 1998 3.5 1999 0 2000 41.5 2001 18.4 2002 91.5 2003 65 2004 0 2005 3.4 2006 15 2007 47.7 2008 1.3 2009 0.4 2010 1.2 2011 56 2012 72.5 2013 15.9 2014 0.3 2015 4 2016 37.7 2017 42.8 2018 74.6 2019 40.9 2020 93.7 2021 52.9 1910 0 1911 -38.7 1912 -70.3 1913 -31.4 1914 -59.8 1915 -41.1 1916 -20.9 1917 -1.8 1918 -7.2 1919 -21.6 1920 -39 1921 -55.8 1922 -0.1 1923 -50.1 1924 0 1925 -40.8 1926 -0.4 1927 -42.1 1928 -13.7 1929 -4 1930 -0.9 1931 -1.3 1932 -5.5 1933 -0.7 1934 -1.5 1935 -0.8 1936 0 1937 -0.4 1938 -0.3 1939 0 1940 -0.3 1941 -75.5 1942 0 1943 -3.2 1944 -2.2 1945 -22.9 1946 0 1947 -13.4 1948 0 1949 -3.3 1950 -4.5 1951 -10.9 1952 0 1953 -0.3 1954 -0.8 1955 -24.6 1956 0 1957 -11.8 1958 0 1959 0 1960 -0.6 1961 -1.4 1962 0 1963 -5.9 1964 -2.8 1965 -66.2 1966 0 1967 -47.8 1968 -28 1969 -0.5 1970 0 1971 -0.8 1972 -7.2 1973 -1.1 1974 0 1975 -12.2 1976 -1.3 1977 0 1978 0 1979 -5.2 1980 -0.6 1981 0 1982 -11.7 1983 -13.7 1984 -36.8 1985 0 1986 -11.9 1987 -0.3 1988 -10.9 1989 -4.3 1990 -0.1 1991 -22 1992 -33.4 1993 -16.7 1994 0 1995 -2 1996 0 1997 -0.1 1998 0 1999 -17.4 2000 0 2001 0 2002 0 2003 0 2004 -8.2 2005 0 2006 0 2007 0 2008 0 2009 -1.5 2010 0 2011 0 2012 0 2013 0 2014 0 2015 -0.2 2016 0 2017 0 2018 0 2019 0 2020 0 2021 0 `, d3.autoType )47:Tc39,verticalBarChart = { // create data object const xDomain = data.map((d) => categoryAccessor(d)); const yDomain = [ d3.min(data, (d) => Math.min(metricAccessor(d))), d3.max(data, (d) => Math.abs(metricAccessor(d))) ]; // create the scales const xScale = d3 .scaleBand() .domain(xDomain) .range([dimensions.marginLeft, dimensions.width]) .padding(0.05); const yScale = d3 .scaleLinear() .domain(yDomain) .nice() .range([dimensions.height - dimensions.marginTop, 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)); // call the axes // svg // .append("g") // .attr("class", "axis") // .attr( // "transform", // `translate(0,${dimensions.height - dimensions.marginTop})` // ) // .call(d3.axisBottom(xScale)); svg .append("g") .attr("class", "valueLabel") .selectAll("text") .data(yScale.ticks(3)) .join("text") .text((d) => (d > 0 ? `+` + d : d)) .attr("x", dimensions.marginLeft - 5) .attr("y", (d) => yScale(d)) .attr("dy", 6) .attr("text-anchor", "end"); svg .append("g") .attr("class", "axisTicks") .selectAll("line") .data(yScale.ticks(3)) .join("line") .attr("x1", xScale.range()[0]) .attr("x2", xScale.range()[1]) .attr("y1", (d) => yScale(d)) .attr("y2", (d) => yScale(d)) .attr("stroke", "black") .attr("stroke-width", ".5"); // add the detail bars svg .append("g") .attr("class", "element") .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => xScale(categoryAccessor(d))) .attr("y", (d) => yScale(Math.max(0, metricAccessor(d)))) .attr("width", (d) => xScale.bandwidth()) .attr("height", (d) => Math.abs(yScale(metricAccessor(d)) - yScale(0))) .attr("fill", (d) => (metricAccessor(d) < 0 ? colors[3] : colors[1])); // add the x axis labels svg .append("g") .attr("class", "valueLabel") .selectAll("text") .data(d3.extent(xScale.domain())) .join("text") .text((d) => d) .attr("x", (d) => xScale(d)) .attr("y", yScale.range()[0] + 20) .attr("text-anchor", "middle"); // 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(); }48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"6d813ec580e75d43","slug":"vertical-positive-negative-bar-chart","title":"Vertical Positive/Negative Bar Chart","thumbnail":"e291e58564fec465cc44387586e2ba0bdecf6188b11d6d70adf243b3a9c44f72","access_level":"public","create_time":"$D2022-02-07T13:42:17.211Z","update_time":"$D2022-02-08T05:37:06.876Z","view_time":null,"first_public_time":"$D2022-02-07T14:36:39.150Z","has_unpublished_edits":null,"fork":{"id":"2111ae8a34acd3ad","slug":"horizontal-bar-template","title":"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":2102,"publish_version":2102,"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":"Vertical Positive/Negative Bar Chart","cells":[{"id":0,"value":"# Vertical Positive/Negative Bar Chart\n\nThis is a Positive/Negative Bar Chart, generally used to compare a single value across various categories, and styled to highlight positive and negative values.\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":542,"value":"title = `Global Precipitation Anomalies, 1901 - 2019`","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":"$47","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: 800,\n marginLeft: 40,\n marginTop: 30\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 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\": \"Times\",\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":"$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"