33: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(); }34:[{"id":"553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","href":"https://static.observableusercontent.com/files/553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","name":"state-population-2010-2019.tsv","type":"text/tab-separated-values","lastModified":1688049447677.354,"size":1354}] 32:{"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"},{"id":299,"value":"viewof metric = Inputs.radio(new Map([[\"Absolute\", \"absolute\"], [\"Relative\", \"relative\"]]), {value: \"absolute\", label: \"Change\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"states = FileAttachment(\"state-population-2010-2019.tsv\").tsv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"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) for more.","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W34","stdlib":"1","titling":"auto"}