44:["$","title",null,{"children":"Diverging Bar Chart | zhengbaofeng | Observable"}] 4c:[{"id":"553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","href":"https://static.observableusercontent.com/files/553ece9b37cf5bc5cd7da5709585f70ecddac30e8df28cf16a0689d4e2ace1c35f6d18033cc2e4920ac7920b2549211e3b9f4b73460bf5c19e01a64051403866","name":"state-population-2010-2019.tsv","type":"text/tab-separated-values","lastModified":1616130860001.72,"size":1354}] 48:{"id":"f2f520f7bacb5d8d","slug":"diverging-bar-chart","title":"Diverging Bar Chart","thumbnail":"f616df998464bc9f96f27fac1a46845871da043dc95b8b11b6c616f5734f45f9","access_level":"public","create_time":"$D2021-03-19T05:14:20.001Z","update_time":"$D2021-03-19T05:17:12.527Z","view_time":null,"first_public_time":"$D2021-03-19T05:14:29.740Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ea88aff206f6acde","login":"zhengbaofeng","name":"zhengbaofeng","avatar_url":"https://avatars-next.observableusercontent.com/5a128aad4d8c6ab4e8d8e2c831eae719adc1871be9c8064ea76d1e9535b52158","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":393,"publish_version":393,"role":null,"authored":false,"authors":[{"type":"individual","id":"103e999f6f818d1c","login":"zhengbaofeng","name":"zhengbaofeng","avatar_url":"https://avatars-next.observableusercontent.com/5a128aad4d8c6ab4e8d8e2c831eae719adc1871be9c8064ea76d1e9535b52158","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"103e999f6f818d1c","login":"zhengbaofeng","name":"zhengbaofeng","avatar_url":"https://avatars-next.observableusercontent.com/5a128aad4d8c6ab4e8d8e2c831eae719adc1871be9c8064ea76d1e9535b52158","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Diverging Bar Chart","cells":[{"id":1,"value":"md`# 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":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof metric = {\n const form = html``;\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = () => form.value = form.radio.value;\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"g\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"fill\", d => d3.schemeSet1[d.value > 0 ? 1 : 0])\n .attr(\"x\", d => x(Math.min(d.value, 0)))\n .attr(\"y\", (d, i) => y(i))\n .attr(\"width\", d => Math.abs(x(d.value) - x(0)))\n .attr(\"height\", y.bandwidth());\n\n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .attr(\"text-anchor\", d => d.value < 0 ? \"end\" : \"start\")\n .attr(\"x\", d => x(d.value) + Math.sign(d.value - 0) * 4)\n .attr(\"y\", (d, i) => y(i) + y.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => format(d.value));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.tsvParse(await FileAttachment(\"state-population-2010-2019.tsv\").text(), ({State: name, \"2010\": value0, \"2019\": value1}) => ({name, value: metric === \"absolute\" ? value1 - value0 : (value1 - value0) / value0})).sort((a, b) => d3.ascending(a.value, b.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value))\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80).tickFormat(tickFormat))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${x(0)},0)`)\n .call(d3.axisLeft(y).tickFormat(i => data[i].name).tickSize(0).tickPadding(6))\n .call(g => g.selectAll(\".tick text\").filter(i => data[i].value < 0)\n .attr(\"text-anchor\", \"start\")\n .attr(\"x\", 6))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"format = d3.format(metric === \"absolute\" ? \"+,d\" : \"+,.0%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"tickFormat = metric === \"absolute\" ? d3.formatPrefix(\"+.1\", 1e6) : format","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"barHeight = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"margin = ({top: 30, right: 60, bottom: 10, left: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null