29:null 2a:["$","title",null,{"children":"Bar Chart Race | drio | Observable"}] 2f: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)))); }30:[{"id":"3ccca0db06671ebac607c06b92001748a49623ac8bfa4a6e400cd8acc01cc66d5100432aac1a9e01ae1d9994d8da7526df34a19875fb9c46f7e8ce265aa592ff","href":"https://static.observableusercontent.com/files/3ccca0db06671ebac607c06b92001748a49623ac8bfa4a6e400cd8acc01cc66d5100432aac1a9e01ae1d9994d8da7526df34a19875fb9c46f7e8ce265aa592ff","name":"start@2.csv","type":"text/csv","lastModified":1703276746878.402,"size":3483034},{"id":"8cedfb4f9bb52a6e5e47dc8119da64b4ef42b7350d7ca42061ffc9b015d567137a7001f18b978277dd39e06fe07cddb2d0b15daaa21676d16ae4146ba09f961d","href":"https://static.observableusercontent.com/files/8cedfb4f9bb52a6e5e47dc8119da64b4ef42b7350d7ca42061ffc9b015d567137a7001f18b978277dd39e06fe07cddb2d0b15daaa21676d16ae4146ba09f961d","name":"start-purchased.csv","type":"text/csv","lastModified":1703278016907.587,"size":2537168},{"id":"001dbf18fe2ca83292003c2b8852220691fd829512b887ec8057cc5bfc8dad07e26f181d733f096cd1764f010b0c3d5dfe531d6b23c8f003488e468fce03963d","href":"https://static.observableusercontent.com/files/001dbf18fe2ca83292003c2b8852220691fd829512b887ec8057cc5bfc8dad07e26f181d733f096cd1764f010b0c3d5dfe531d6b23c8f003488e468fce03963d","name":"start-final.csv","type":"text/csv","lastModified":1703278080957.267,"size":4106475}] 2d:{"id":"a1f0a1898e3bccf9","slug":null,"title":"Bar Chart Race","thumbnail":"742eeee37982fb6acfdf9c995cea5f57db8abdc5db7fe5c6ab86f35fc7d4ea1f","access_level":"public","create_time":"$D2023-12-22T16:19:51.295Z","update_time":"$D2023-12-22T21:12:38.512Z","view_time":null,"first_public_time":"$D2023-12-22T16:19:51.295Z","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":"3870ffad1196a4b8","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":"starter_2024"},"version":3154,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null}],"members":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"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","output":"","database":"$undefined"},{"id":516,"value":"color = {\n // const scale = d3.scaleOrdinal(d3.schemeTableau10);\n // if (data.some(d => d.category !== undefined)) {\n // const categoryByName = new Map(data.map(d => [d.name, d.category]))\n // scale.domain(categoryByName.values());\n // return d => scale(categoryByName.get(d.name));\n // }\n // return d => scale(d.name);\n // start: lightgreen\n // purchased: steelblue\n // final: tomato\n return \"tomato\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"n = 14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"data = FileAttachment(\"start-final.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"viewof replay = html`