25:["$","title",null,{"children":"Bar Chart Race | Angela Pham's Workspace | Observable"}] 49:T4fa,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }4a:[{"id":"aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","href":"https://static.observableusercontent.com/files/aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","name":"category-brands.csv","type":"text/csv","lastModified":1701732881790.383,"size":69821},{"id":"24d00b921fc476c4fdd7ad64bbe36375ada0d05d8baf9c5cad82ece543ee86f93bcb525cad75a6901d697cc4a1344192740502f91731916f1e4806671f7038aa","href":"https://static.observableusercontent.com/files/24d00b921fc476c4fdd7ad64bbe36375ada0d05d8baf9c5cad82ece543ee86f93bcb525cad75a6901d697cc4a1344192740502f91731916f1e4806671f7038aa","name":"order of merlin 2.csv","type":"text/csv","lastModified":1701732917469.868,"size":2143},{"id":"8e3e3caac246a46a80434ca9b521787addac5c41b42f1c457b13171015d442c812c79f0b01d23efe8a318c8ad6ac7562d17c9da68c7e1fbd6d12adb87f2b19e1","href":"https://static.observableusercontent.com/files/8e3e3caac246a46a80434ca9b521787addac5c41b42f1c457b13171015d442c812c79f0b01d23efe8a318c8ad6ac7562d17c9da68c7e1fbd6d12adb87f2b19e1","name":"category-brands (1).csv","type":"text/csv","lastModified":1701733037269.803,"size":11643},{"id":"4ee88e05a8a10fb26142e7e09eea1ac99a0844d23c66ba44f2df54895e1ea4e163c97608791a6f39c2b699f119bf0a0040a5ad20abf68cc8ee2b7cd7db99a2ab","href":"https://static.observableusercontent.com/files/4ee88e05a8a10fb26142e7e09eea1ac99a0844d23c66ba44f2df54895e1ea4e163c97608791a6f39c2b699f119bf0a0040a5ad20abf68cc8ee2b7cd7db99a2ab","name":"category-brands (1)@1.csv","type":"text/csv","lastModified":1701733247651.571,"size":11643}] 29:{"id":"731d1a4387658d0d","slug":null,"title":"Bar Chart Race","thumbnail":"829cff0238c26c6e7f1861b74c8574b86b401250c3ecc65881caa478844192dc","access_level":"public","create_time":"$D2023-12-04T23:34:41.790Z","update_time":"$D2023-12-04T23:40:45.803Z","view_time":null,"first_public_time":"$D2023-12-04T23:34:41.790Z","has_unpublished_edits":null,"fork":{"id":"3ff9fa2c6593d814","slug":"bar-chart-race","title":"Bar Chart Race","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3090,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"bio":"for the DH 150 class","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"role":"editor"},{"type":"team","id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bar Chart Race","cells":[{"id":239,"value":"

Bar Chart Race

D3 › Gallery

\n\n# Bar Chart Race\n\nThis chart animates the value (in $M) of the top global brands from 2000 to 2019. Color indicates sector. See [the explainer](/d/e9e3929cf7c50b45) for more. Data: [Interbrand](https://www.interbrand.com/best-brands/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"data = FileAttachment(\"category-brands (1)@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"viewof replay = html`