2d:null 2e:["$","title",null,{"children":"D3 を学ぶ: Joins/連結 | Takuo Suzuki | Observable"}] 33:T566,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // For the initial render, reference the current age non-reactively. const agedata = viewof agedata.value; const x = d3.scaleLinear() .domain([0, d3.max(agedata, d => d.value)]) .rangeRound([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(agedata.map(d => d.name)) .rangeRound([margin.top, margin.top + 20 * data.names.length]); let bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(agedata, d => d.name) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth() - 1); const gx = svg.append("g") .call(xAxis, x); const gy = svg.append("g") .call(yAxis, y); return Object.assign(svg.node(), { update(agedata) { const t = svg.transition().duration(750); gx.transition(t) .call(xAxis, x.domain([0, d3.max(agedata, d => d.value)])); gy.transition(t) .call(yAxis, y.domain(agedata.map(d => d.name))); bar = bar .data(agedata, d => d.name) .call(bar => bar.transition(t) .attr("width", d => x(d.value) - x(0)) .attr("y", d => y(d.name))); } }); }34:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1621703355180.184,"size":3516}] 31:{"id":"11bc42b289b8cf7d","slug":"learn-d3-joins-ja","title":"D3 を学ぶ: Joins/連結","thumbnail":"009cbfa1b6a6c9ca6f92dcacd3cc41f6783e35ddbb11225be46540375c7f8d3f","access_level":"public","create_time":"$D2021-05-22T17:09:15.180Z","update_time":"$D2021-08-14T17:42:33.813Z","view_time":null,"first_public_time":"$D2021-06-12T16:56:43.129Z","has_unpublished_edits":null,"fork":{"id":"4fed9b9938ac2369","slug":"learn-d3-joins","title":"Learn D3: Joins","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024"},"version":1118,"publish_version":1118,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null}],"members":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5baa9b3ce38aa33a","slug":"d3","title":"D3 を学ぶ","owner":{"id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki"}},"type":"notebook","body":{"title":"D3 を学ぶ: Joins/連結","cells":[{"id":240,"value":"md`# D3 を学ぶ: Joins/連結\n\nもし、あなたがD3について既に詳しい場合は、本チュートリアルを進めていく上で、D3 セレクションについての言及が殆どされていないことに驚いていると思います。\n\n言及していない理由は、それは必要無いからです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`D3セレクションは、ダイナミックな静止画を高速かつ段階的に更新するという、少し特殊な要件の場合に利用します。静止画や、1フレームごとにゼロからレンダリングしなおすような処理を行う場合は、別の手法を選ぶとよいでしょう。セレクションは、アニメーションのトランジションや、モダンブラウザのパフォーマンスを最大限に引き出したい場合に適しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`D3 selectionsを使用しない場合でも、D3には他にも様々なビジュアライゼーションのツールがあります。スケール、シェイプ、インターポレーター、カラー、マッププロジェクション、その他の多くの機能は、Canvas、WebGL、またはObservableのHTMLタグ付きテンプレートリテラル、React、SvelteなどのDOM抽象化で使用できます。また、D3は、統計、グループ化と集約、時系列と解析のためのメソッドを用いて、データのクリーニングと分析を支援することができます`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`D3 selections は、本質的には「表現」ではなく「変換」を指定するものです。グラフィック（DOM）の望ましい状態を表現するのではなく、現在の状態を望ましい状態に変換するために必要な変更（挿入、更新、削除）を指定します。これは時に面倒ですが、遷移をアニメーション化したり、DOMへの変更を最小限に抑えてパフォーマンスを向上させることができます。\n\nその方法を見てみましょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`例えば、アルファベットの文字を表示したいとします。複雑では無いので、ここではテクニックに重点を置いてシンプルに説明します。実際の例としては、[D3ギャラリー](/@d3/gallery)のアニメーションとインタラクションのセクションをご覧ください）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"chart1 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n svg.selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`このグラフィックは、セルが実行されるたびにゼロから作成されるという意味で静的なものであり、D3コードはHTMLリテラルと同等の精神を持っています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`では、なぜセレクションをするのでしょうか？静的なグラフであれば、セレクションを利用する理由はありません。\n\nしかし、このグラフをデータの変化に合わせて更新したい場合、最初から描き直すのではなく、新しいデータを反映させるための最小限の更新を行う方が効率的です。既存の要素を再利用し、必要なものは追加し、不要なものは削除するのです。上記のコードを、データが変更されたときに呼び出されるメソッドに移すだけで、パフォーマンスの高いインクリメンタル・アップデートが可能になります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"randomLetters = {\n while (true) {\n yield d3.shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"chart2.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`上記のコードを分解して見てみましょう。\n\ntext は、SVG 要素を親要素とする、最初は空のテキスト要素のセレクションです。この親要素は、入力されたテキスト要素が後にどこに追加されるかの場所を決めます。\n\nselection.data を呼び出すことで、text はデータの新しい配列である letters にバインドされます。これにより、テキストセレクションの3つの離接した部分集合が計算されます：まずは既存の要素がない状態で新規データを表す入力(*enter*)セレクション、新規データがある既存要素を表す更新(*update*)セレクション、新規データがない既存要素を表す終了(*exit*)セレクションの三つです。\n\nこれを、ベン図を使うと下記のように表現できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"html`

\n \n

The three selections computed by the selection.data.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`(これらのセレクションは、コード上は非表示になっています。selection.data はまず update セレクションを返し、そこからselection.enterやselection.exitを呼び出して他の選択項目にアクセスできるようになっています）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`これらの3つのケースを手動で処理することもできますが、[selection.join](/@d3/selection-join)には便利な機能が用意されています。入力されたセレクションは自動的に追加され、終了したセレクションは自動的に削除され、最後に更新されたセレクションと入力されたセレクションは結合され、順序付けられて返されます。そして、入力や更新を行う要素に属性やテキストを割り当てることができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`これにより、文字とテキスト要素の関係性が変わらない場合は、要素の更新時に一部の属性やテキストコンテンツを再割り当てする必要なく効率化できます。ただ、この関係性を保持するには、select.dataはキー関数を必要とし、「入力」、「更新」、「終了」の正確な操作のために、select.joinは対応する関数が必要になりますが、「更新」を「入力」や「終了」よりも頻繁に行う場合はパフォーマンスが大幅に向上します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"chart3.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`先ほどと同様に、*selection.join* は統合された入力(*enter*)と更新(*update*)のセレクション結果を返すので、*x*属性の設定など、両方に適用されるコードを共有することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"md`*selection.data*に渡されたキー関数は、各新規datumと各選択要素の旧datumの(文字列)キーを比較し、どのdatumがどの要素に結合されるかを決定します。要素とdatumのキーが同じであれば、そのdatumは要素に結合され、その要素が更新されます。文字は良いキーになるので、ここでは同一性関数(d => d)が適切です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"md`(もし、キー関数が指定されていない場合，データはインデックスで結合され，最初のデータは最初の要素に結合されます。試しに、上記のコードをインデックスで結合するように書き換えてみてください。また、x属性の設定とテキストの内容の設定を入れ替えてみましょう！)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`また、セレクションは、トランジションの際に非常に効果的です。\n\n下の図は、文字が上から入ってきて、更新される際に水平方向にスライドし、下から出ていきます。これは、先ほどの例のように瞬時に文字列が入れ替わるよりも分かりやすく表現できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n const t = svg.transition().duration(750);\n\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", -7)\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", (d, i) => i * 17)\n .text(d => d),\n update => update,\n exit => exit\n .call(text => text.transition(t).remove()\n .attr(\"y\", 41))\n )\n .call(text => text.transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"chart4.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`優れたトランジションは、単にグラフィックを「動き回らせる」ことで目新しさを表現するのではなく、データがどのように変化するかを動きを使うことで理解を深めることに役立ちます。。\n\n良いトランジションでは、[オブジェクトの一貫性](https://bost.ocks.org/mike/constancy/)が保たれています。トランジション前に特定のもの（例えばCの文字）を表すグラフィック要素は、トランジション中もトランジション後も同じものを表し、見ている人が内容を把握しやすいもになっています。もし、ある要素の意味がトランジション中に変わってしまうと、その動きは見ている人に混乱を招き、無意味なものになってしまいます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`具体的な例を見てみましょう。\n\n下の図は、特定の年齢層の人口の割合が高い上位10州（および都市部の外れであるワシントンD.C.）を示しています。ユタ州では、家族を育てることを重視するイエス・キリスト教会の影響で、若年層の人口が圧倒的に多いことがわかります。一方、フロリダ州は、70代以上の高齢者の割合が高いことがわかります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"md`年齢層を変更すると、順位の変更を反映してバーの順序が入れ替わる様子を見ることができます。X軸も同時に新しいデータに合わせてスケール変更されます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof agedata = {\n const form = html`

Age group

`;\n form.i.onchange = () => form.dispatchEvent(new CustomEvent(\"input\"));\n form.oninput = () => {\n form.value = data\n .filter(d => d.age === form.i.value)\n .sort((a, b) => d3.descending(a.value, b.value));\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"chart.update(agedata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"md`残りのバーはチャートの下に隠れているので、上位10本のバーだけが表示されます。そのため、select.joinは必要ありません。バーの出入りはなく、更新されるだけです。これにより、コードが単純化されるだけでなく、画面外の位置を示唆する入退出バーの速度が得られるため、トランジションがより意味のあるものになります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`アニメーションの遷移は、読者がインタラクションを行うことにより発生することがあります。。次の章では、そのようなインタラクションにチャートをどのように反映させるかをみてみましょう。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = {\n const data = d3.csvParse(await FileAttachment(\"us-population-state-age.csv\").text());\n const ages = data.columns.slice(1);\n const totals = new Map(data.map(d => [d.name, d3.sum(ages, age => d[age])]));\n return Object.assign(d3.cross(data, ages).map(([d, age]) => ({name: d.name, age, value: +d[age] / totals.get(d.name)})), {names: data.map(d => d.name), ages});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call(g => (g.selection ? g.selection() : g).select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = margin.top + 20 * 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"margin = ({top: 30, right: 20, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"