2c:null 2d:["$","title",null,{"children":"Bar Chart Race, Explained in Japanese | SUGIMOTO Tatsuo | Observable"}] 32:Ta70,レースのデータは、**日付**（[YYYY-MM-DD フォーマット](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-date-time-string-format)）、**名前**、**値**、オプションで**カテゴリ**（カテゴリがあれば色分けに使う）の列をもつCSVです。データを置き換えるには、このページ右側のファイルアイコンをクリックします。 33:T48b,function bars(svg) { let bar = svg.append("g").attr("fill-opacity", 0.6).selectAll("rect"); // fill-opacity属性は全バー共有なので親要素に指定 return ([date, data], transition) => (bar = bar .data(data.slice(0, n), (d) => d.name) .join( (enter) => enter .append("rect") .attr("fill", color) .attr("height", y.bandwidth()) .attr("x", x(0)) .attr("y", (d) => y((prev.get(d) || d).rank)) .attr("width", (d) => x((prev.get(d) || d).value) - x(0)), // enter時に各バーの属性を設定する (update) => update, (exit) => exit .transition(transition) .remove() .attr("y", (d) => y((next.get(d) || d).rank)) .attr("width", (d) => x((next.get(d) || d).value) - x(0)) // exit時にy,width属性をトランジションする ) .call( (bar) => bar .transition(transition) .attr("y", (d) => y(d.rank)) .attr("width", (d) => x(d.value) - x(0)) // y,width属性をトランジションする )); }34:T9c3,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") // 値のラベル用に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").textTween((d) => { const i = d3.interpolateNumber( d.value, (next.get(d) || d).value ); return function (t) { return formatNumber(i(t)); }; }) // .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").textTween((d) => { const i = d3.interpolateNumber( (prev.get(d) || d).value, d.value ); return function (t) { return formatNumber(i(t)); }; }) // .tween("text", (d) => // textTween((prev.get(d) || d).value, d.value) // ) ) )); }35:[{"id":"aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","href":"https://static.observableusercontent.com/files/aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1","name":"category-brands.csv","type":"text/csv","lastModified":1651279539912.974,"size":69821}] 30:{"id":"985405df3b5ab45d","slug":"bar-chart-race-explained-in-japanese","title":"Bar Chart Race, Explained in Japanese","thumbnail":"3c92b316856cf668865700cea17904e9d7e70d8a2539b1eb8f4d801e4446744e","access_level":"public","create_time":"$D2022-04-30T00:45:39.912Z","update_time":"$D2022-05-02T01:16:49.271Z","view_time":null,"first_public_time":"$D2022-04-30T07:09:52.462Z","has_unpublished_edits":null,"fork":{"id":"e9e3929cf7c50b45","slug":"bar-chart-race-explained","title":"Bar Chart Race, Explained","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":"starter_2024"},"version":3485,"publish_version":3485,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"67ae5c5d42ba44ac","slug":"observable","title":"Observableドキュメント","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"type":"notebook","body":{"titling":"auto","title":"Bar Chart Race, Explained in Japanese","cells":[{"id":239,"value":"# Bar Chart Race, Explained in Japanese\n\n### バーチャート・レースの解説［日本語版］\n\nOriginal Text: Mike Bostock \nJapanese Translation: SUGIMOTO Tatsuo\n\n> **訳注**：よくみるバーチャート・レースをD3で実装するための解説記事です。D3/Observableのバージョンアップにともない、一部新しく書き換えています。\n \nこれは、アニメーションの[バーチャート・レース](/@d3/bar-chart-race)を説明しながら実装したものです。\nどのように動作するのかを学んで、このノートブックをフォークして、自分のデータを入れてください！\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"data = (await FileAttachment(\"category-brands.csv\").csv()).map(d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":982,"value":"viewof replay = html`