34:["$","title",null,{"children":"Horizontal bar chart with negative values | Robert Pettersson | Observable"}] 3c:T99f,chart = { const svg = d3.select(DOM.svg(width, totalHeight)); var height = totalHeight - margin.top - margin.bottom; var x = d3.scaleLinear() .range([margin.left, totalWidth - margin.right]); var y = d3.scaleBand() .domain(data.map(d => d.quarter)) .rangeRound([height - margin.bottom, margin.top]) .padding(.1); var xAxis = svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${(height - margin.bottom)})`) var yAxis = svg.append("g") .attr("class", "y-axis") .attr("transform", "translate(" + (totalWidth / 2) + ",0)") var shift = []; var ease = d3.easeSin; svg.node().update = (input, speed) => { data.forEach(d => d.abs = +([d["new_" + input] - d["old_" + input]])) x.domain([d3.min(data, d => -Math.abs(d.abs)), d3.max(data, d => Math.abs(d.abs)) ]).nice(); var bar = svg.selectAll(".bar") .data(data, d => d.quarter) .join("rect") .attr("class", d => "bar bar--" + (d.abs < 0 ? "neg" : "pos")) .attr("y", d => y(d.quarter)) .attr("height", y.bandwidth()) .transition().duration(speed / 2) .ease(ease) .attr("width", (d, i) => shift[i] < 0 && d.abs > 0 || shift[i] > 0 && d.abs < 0 ? Math.abs(x(0) - x(0)) : Math.abs(x(d.abs) - x(0))) .attr("x", d => Math.min(0, d.abs) !== 0 ? x(0) : x(Math.min(0, d.abs))) .on("end", function() { d3.select(this).transition().duration(speed / 2) .ease(ease) .attr("x", d => x(Math.min(0, d.abs))) .attr("width", d => Math.abs(x(d.abs) - x(0))); }) svg.selectAll(".x-axis").transition().duration(speed) .ease(ease) .call(d3.axisBottom(x)); var ticks = svg.selectAll(".y-axis") .transition().duration(speed) .ease(ease) .call(d3.axisLeft(y)); var tickText = ticks.selectAll("text") .attr("x", (_, i) => data[i].abs >= 0 ? -10 : 25); var tickLine = ticks.selectAll("line") .attr("x2", (_, i) => data[i].abs >= 0 ? -5 : 5); shift.length = 0; data.forEach(d => shift.push(d.abs)) } return svg.node(); }3d:[] 38:{"id":"3e84cb634e89f517","slug":"horizontal-bar-chart-with-negative-values","title":"Horizontal bar chart with negative values","thumbnail":"c6e7b87c543d70ea274dc8d7460bacab063be228fe8a23fd8f3273e72c47504a","access_level":"public","create_time":"$D2019-02-26T20:46:22.924Z","update_time":"$D2019-02-26T21:19:29.547Z","view_time":null,"first_public_time":"$D2019-02-26T21:03:10.498Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":"starter_2024","bio":"Programmer","followed_by_you":false,"follows_you":false},"version":39,"publish_version":39,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"bio":"Programmer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","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 bar chart with negative values","cells":[{"id":0,"value":"md`# Horizontal bar chart with negative values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`The transitions on observeable are a bit weird for some reason, will fix later`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof options = {\n const selects = html`\n `;\n selects.i.onchange = () => chart.update(selects.i.value, speed);\n selects.i.onchange();\n return selects;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"margin = {\n const m = {top: 15, right: 10, bottom: 15, left: 10};\n return m\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"totalHeight = 340","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"totalWidth = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data = [\n {\n quarter: \"Q1\", \n new_1: 54, new_2: 32, new_3: 44, \n old_1: 34, old_2: 44, old_3: 22\n },\n {\n quarter: \"Q2\", \n new_1: 62, new_2: 62, new_3: 14, \n old_1: 75, old_2: 42, old_3: 52\n },\n {\n quarter: \"Q3\", \n new_1: 32, new_2: 52, new_3: 10, \n old_1: 10, old_2: 22, old_3: 42\n },\n {\n quarter: \"Q4\", \n new_1: 30, new_2: 46, new_3: 9, \n old_1: 9 , old_2: 20, old_3: 36\n }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"speed = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null