2b:null 2c:["$","title",null,{"children":"Diverging bar chart | Chad Sang's Workspace | Observable"}] 31:T9ef,chart = { const data = d3.sort(states, d => d[2019] - d[2010]) .map((d) => ({ ...d, value: metric === "absolute" ? d[2019] - d[2010] : (d[2019] - d[2010]) / d[2010] })); // Specify the chart’s dimensions. const barHeight = 25; const marginTop = 30; const marginRight = 60; const marginBottom = 10; const marginLeft = 60; const height = Math.ceil((data.length + 0.1) * barHeight) + marginTop + marginBottom; // Create the positional scales. const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .rangeRound([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(data.map(d => d.State)) .rangeRound([marginTop, height - marginBottom]) .padding(0.1); // Create the format function. const format = d3.format(metric === "absolute" ? "+,d" : "+.1%"); const tickFormat = metric === "absolute" ? d3.formatPrefix("+.1", 1e6) : d3.format("+.0%"); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Add a rect for each state. svg.append("g") .selectAll() .data(data) .join("rect") .attr("fill", (d) => d3.schemeRdBu[3][d.value > 0 ? 2 : 0]) .attr("x", (d) => x(Math.min(d.value, 0))) .attr("y", (d) => y(d.State)) .attr("width", d => Math.abs(x(d.value) - x(0))) .attr("height", y.bandwidth()); // Add a text label for each state. svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll() .data(data) .join("text") .attr("text-anchor", d => d.value < 0 ? "end" : "start") .attr("x", (d) => x(d.value) + Math.sign(d.value - 0) * 4) .attr("y", (d) => y(d.State) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => format(d.value)); // Add the axes and grid lines. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 80).tickFormat(tickFormat)) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - marginTop - marginBottom) .attr("stroke-opacity", 0.1)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${x(0)},0)`) .call(d3.axisLeft(y).tickSize(0).tickPadding(6)) .call(g => g.selectAll(".tick text").filter((d, i) => data[i].value < 0) .attr("text-anchor", "start") .attr("x", 6)); return svg.node(); }32:[{"id":"553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","href":"https://static.observableusercontent.com/files/553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","name":"state-population-2010-2019.tsv","type":"text/tab-separated-values","lastModified":1709606443488.838,"size":1354}] 2f:{"id":"e1fe4a52616a5ed5","slug":null,"title":"Diverging bar chart","thumbnail":"6700b1439397e5bf084c79eff4237750a9ca3fe3f595aa27f92e1672458b0f37","access_level":"public","create_time":"$D2024-03-05T02:40:43.488Z","update_time":"$D2024-03-05T02:40:43.488Z","view_time":null,"first_public_time":"$D2024-03-05T02:40:43.488Z","has_unpublished_edits":null,"fork":{"id":"f30a4ace7c101067","slug":"diverging-bar-chart/2","title":"Diverging bar chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"869d44a18dfb7a96","login":"chad-sang-ws","name":"Chad Sang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dd564d53f32bbe7a8ff58c15cc705a062a1ae481bbcdf56b34c503b295a75212","tier":"starter_2024"},"version":534,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a3eeb34f8a76549","login":"chad-sang","name":"Chad Sang","avatar_url":"https://avatars-next.observableusercontent.com/ad7148023da5d366ca3d25668f4b4ddd3328a78fc57fc2e24dff209735bedebe","tier":null}],"members":[{"type":"individual","id":"8a3eeb34f8a76549","login":"chad-sang","name":"Chad Sang","avatar_url":"https://avatars-next.observableusercontent.com/ad7148023da5d366ca3d25668f4b4ddd3328a78fc57fc2e24dff209735bedebe","tier":null,"role":"editor"},{"type":"team","id":"869d44a18dfb7a96","login":"chad-sang-ws","name":"Chad Sang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dd564d53f32bbe7a8ff58c15cc705a062a1ae481bbcdf56b34c503b295a75212","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Diverging bar chart","cells":[{"id":1,"value":"

Diverging bar chart

D3 › Gallery

\n\n# Diverging bar chart\n\nA diverging bar chart can show negative values as well as positive ones. Bars are positioned by their top-left corner and cannot have a negative width; thus if the value is positive, it determines the right edge, while if it’s negative, it determines the left. This chart shows estimated change in population from 2010 to 2019.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"viewof metric = Inputs.radio(new Map([[\"Absolute\", \"absolute\"], [\"Relative\", \"relative\"]]), {value: \"absolute\", label: \"Change\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"states = FileAttachment(\"state-population-2010-2019.tsv\").tsv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"Using [Observable Plot](/plot/)’s concise API, a [bar mark](/plot/marks/bar) and the [sort mark option](/plot/features/scales#sort-mark-option) create a similar chart; see the [complete example](/@observablehq/plot-state-population-change?intent=fork) for more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"Plot.plot({\n height: 800,\n x: {axis: \"top\"},\n y: {axis: null},\n marginLeft: 40,\n color: {scheme: \"PiYG\"},\n marks: [\n Plot.barX(states, {\n y: \"State\",\n x: (d) => d[2019] - d[2010],\n fill: (d) => d[2019] > d[2010],\n sort: { y: \"x\" }\n }),\n d3\n .groups(states, (d) => d[2019] > d[2010])\n .map(([growth, states]) =>\n Plot.text(states, {\n x: 0,\n text: \"State\",\n y: \"State\",\n textAnchor: growth ? \"end\" : \"start\",\n dx: growth ? -4 : 4\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"