2b:null 2c:["$","title",null,{"children":"Bar Chart Race | D3 | Observable"}] 31: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)))); }32:[{"id":"aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","href":"https://static.observableusercontent.com/files/aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","name":"category-brands.csv","type":"text/csv","lastModified":1573454474009.592,"size":69821}] 2f:{"id":"3ff9fa2c6593d814","slug":"bar-chart-race","title":"Bar Chart Race","thumbnail":"8c23feac8c2cc478c35bfd75e4b59059507986f0f74042fa6e8a78f95f2117e9","access_level":"public","create_time":"$D2019-11-11T06:41:14.009Z","update_time":"$D2023-08-01T13:46:16.166Z","view_time":null,"first_public_time":"$D2019-11-11T19:48:36.193Z","fork":{"id":"e9e3929cf7c50b45","slug":"bar-chart-race-explained","title":"Bar Chart Race, Explained","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":286,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":3087,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[{"id":"24457ba584537fe1","reply_to_id":null,"content":"I'm seeing \"Uncaught (in promise) undefined\" errors for the transition.end() line in the console.","create_time":"$D2021-04-19T15:37:14.592Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"7f71f55e44776187","reply_to_id":"24457ba584537fe1","content":"That will happen if the transition is interrupted, e.g. by clicking the replay button or running a cell.\n\nhttps://github.com/d3/d3-transition#transition_end\n\nI could squelch that error here, but I don’t see any particular need to given that most readers won’t see the console.","create_time":"$D2021-04-19T16:00:58.081Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2680,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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"},{"id":144,"value":"data = FileAttachment(\"category-brands.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":982,"value":"viewof replay = html`