31:Tb13,### データ・バインディング（データと結びつける）データの可視化は、データをビジュアルにマッピングする（対応づける）プロセスです。データが入力で、ビジュアルの属性が出力です。たとえば、数字が大きいほど棒の高さを高くしたり、データのカテゴリによって色を変えたりしたりします。マッピングのルールは、開発者自身が決めます。データとDOM要素を結合（バインド）するのにD3を使います。バインドすることで、データと特定の要素を結びつけ、マッピングルール適用時に元の値を参照できるようになります。データのバインドには、`selection.data()`メソッドを使います。バインドするまえに、入力と出力にあたる、データとDOM要素のセレクションを準備する必要があります。 #### データ D3では様々な種類のデータを扱うことができます。数値の配列、文字の配列、オブジェクトの配列など、いろいろな種類の配列やMapオブジェクトを扱えます。 D3が読み込むことができるフォーマットには以下があります。 - JSON - CSV - TSV - GeoJSON 最初のサンプルとして、ここではシンプルな数値の配列をデータとして使います。 ```js { const dataset = [5, 25, 45, 65, 85]; return dataset; } ``` #### セレクションつぎに、データを結びつける対象となるDOM要素をきめます。ここでは、データの各値ごとに新しいパラグラフを生成します。つぎのように書きます。 ```js { const dataset = [5, 25, 45, 65, 85]; const div = d3.create('div'); return div.selectAll("p"); } ``` このコードをすんなり理解できますか。ここは、はじめてD3を使うときにつまづきやすいポイントなのでくわしく説明します。 `selection.selectAll()`メソッドは、引数に指定したCSSセレクタの要素を検索しすべての要素を返します。ここではまず、`div`要素を参照するセレクションオブジェクト`div`を次のステップに渡しています。つぎに、`selectAll("p")`で、`div`要素内のすべての`p`要素を選択します。ところが、まだ`div`要素の内部には`p`要素はひとつもありません。まだ存在していない要素をセレクトするのは不可能そうなのに、できてしまいます。このメソッドでは空（から）のセレクションを返します。このセレクションは空（から）ですが、`div`要素の子にあたる`p`要素群を表していて、これから作成される場所を指し示しているのです。32:T723,#### データ結合の確認ただし、データの数値は消えてしまっています。データが本当に結合されているのかを確認するために、次のセルを追加してください。 ``` d3.select(div).selectAll("p") ``` `div`セルを選択し、`selectAll()`メソッドで、`div`要素の子孫要素の`p`要素をすべて選択します。すると、オブジェクトが表示されます。 ```js Gn {_groups: Array(1), _parents: Array(1)} ``` `_groups`を開いていくと、`0`から`4`までの5つの`HTMLParagraphElement`（`

`）が表示されます。 ```js Gn { _groups: Array(1) [ 0: NodeList { 0: HTMLParagraphElement {__data__: 5} 1: HTMLParagraphElement {__data__: 25} 2: HTMLParagraphElement {__data__: 45} 3: HTMLParagraphElement {__data__: 65} 4: HTMLParagraphElement {__data__: 85} : NodeList {…} } ] _parents: Array(1) [HTMLDivElement] : Gn {…} } ``` それぞれの`HTMLParagraphElement`の`__data__`属性に、結合したデータの最初の値（5〜85）が格納されています。これでデータ結合がうまくいっていることが確認できました。要素に結合されたデータは、`__data__`属性に記録されています。 `__data__`属性は、d3の`data()`や`datum()`メソッドで確認できるので、次のように書くと、元のデータセットを復元できます。 ```js d3.select(div).selectAll("p").data() ``` 最初の`

`に結合されたデータを確認するには、次のように書きます。 ```js d3.select(div).select("p").datum() ``` データが結合されているかどうか確認したい場合は、このようにd3で要素を選択することで確かめることができます。33:[] 2f:{"title":"D3.js Introdunction / D3.js 入門","cells":[{"id":0,"value":"# D3.js Introdunction / D3.js 入門","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"banner(\"D3.js 入門\", {\n subtitle: \"その1\",\n backgroundColor: \"hsl(220, 40%, 50%)\",\n textColor: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"### D3.jsについて\n\nD3.jsは、データ可視化に特化したJavaScriptライブラリです。\n多くのサイトで利用されています。\n\nhttps://d3js.org/\n\nD3は、ほかの可視化ライブラリと比較すると、簡単なコードで手早くチャートを作ることはできません。\nObservableで簡単にチャートを作りたい場合は、ChartセルやPlotを使いましょう。\n\nD3.jsが提供するのは、データ可視化を実装するための、データと要素の結合や、データから座標や色に変換するための便利なユーティリティ集です。\n\n細かい部分までコントロールできるため、さまざまなものが作れます。\nただ、最初にD3.js特有の考え方・書き方になれる必要があります。\n\n最近では、React, Vue, Svelteのようなフレームワークと連携して利用されることも増えています。","pinned":false,"hidden":false,"mode":"md"},{"id":913,"value":"### D3でHTMLを書く\n\nObservableのノートブックに静的コンテンツを挿入したい場合は、「Markdownセル」または「HTMLセル」にHTMLを書きます。\n\n動的コンテンツを生成するには、DOM要素を返すJavaScriptを書きます。\n\n**素のJavaScript**の場合、ページの最後に新しいパラグラフを追加するには次のように書きます。\n\n```js\nconst p = document.createElement(\"p\");\np.textContent = \"新しいパラグラフ\";\ndocument.body.appendChild(p);\n```\n\n**ObservableのJavaScriptセル**の場合は、次のように書きます。\n\n```js\n{\n const p = document.createElement(\"p\");\n p.textContent = \"あたらしいパラグラフ\";\n return p;\n}\n```\nセルのソース全体を波括弧で囲んでブロックにし、`createElement()`で作成した`p`要素を返しています。\n\nこのJavaScriptを**D3を使って書く場合**、次のようになります。\n\n```js\np = d3.create(\"p\").text(\"あたらしいパラグラフ\").node()\n```\n\n`d3`ドットの後は、すべてD3のメソッドです。\n\n- `create()`で要素の作成\n - D3セレクションオブジェクトと呼ぶオブジェクトが返ります\n- `text()`でテキスト（コンテンツ）の指定\n- `node()`でDOM要素に変換\n - セルの出力でHTMLを表示するために、D3セレクションオブジェクトをDOM要素に変換しています。\n \n（Observableで1行だけのセルは、行末のセミコロンを書く必要がありません。）","pinned":false,"hidden":false,"mode":"md"},{"id":934,"value":"### メソッドチェーン\n\nこのサンプルのように前のメソッドの返り値を引き継いで、次のメソッドを呼ぶ場合、`.`（ドット）で連結することで、連続的に実行することができます。\n\nこのサンプルのチェーンをほどいて、次のように書くこともできます。\nこの場合、複数行になるので、全体を囲む波括弧を書く必要があります。\n\n```js\n{\n const p = d3.create(\"p\");\n p.text(\"あたらしいパラグラフ\");\n const element = p.node();\n return element;\n}\n```\n\n同じオブジェクトに複数のメソッドを実行したいときなど、チェーンにしないほうが都合がよい場合もあります。","pinned":false,"hidden":false,"mode":"md"},{"id":941,"value":"### 親子要素の作成\n\nつぎに親子要素を作成します。\n`div`要素の子に1つの`p`要素を追加します。\n\n```html\n

あたらしいパラグラフ

\n```\n\n```js\n{\n const div = d3.create(\"div\");\n div.append(\"p\").text(\"あたらしいパラグラフ\");\n return div.node();\n}\n```\n\n複数の子要素を追加するには、`append()`で複数の要素を追加します。\n\n```js\n{\n const div = d3.create(\"div\");\n div.append(\"p\").text(\"ひとつめ\");\n div.append(\"p\").text(\"ふたつめ\");\n return div.node();\n}\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":957,"value":"dot`digraph g {\n\trankdir = LR;\n\tdiv -> p（ひとつめ）;\n\tdiv -> p（ふたつめ）;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"次のようにメソッドチェーンでつないで書くと、`p`要素が入れ子になってしまうので注意してください。\n\n```js\n{\n const div = d3.create(\"div\")\n div.append(\"p\").text(\"ひとつめ\").append(\"p\").text(\"ふたつめ\");\n return div.node()\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"dot`digraph g {\n\trankdir = LR;\n\tdiv -> p（ひとつめ） -> p（ふたつめ）;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"### スタイルの指定\n\n#### インラインスタイル\n\n要素のスタイルを指定するには`style()`メソッドを使います。\n第1引数にプロパティ、第2引数にはプロパティ値を指定します。\n \n```js\n{\n const div = d3.create(\"div\")\n div.append(\"p\")\n .text(\"あたらしいパラグラフ\")\n .style('background-color', 'yellow');\n return div.node()\n}\n```\n\n上で作っていたセルには`p`と名前をつけていたので、別のセルから`p`を参照してスタイルを変更することもできます。\nただし、見通しがわるくなるのでおすすめしません。\n\n```js\nd3.select(p).style(\"background-color\", \"pink\")\n```\n\n`select()`メソッドでDOM要素を選択し、D3セレクションオブジェクトを返します。\n\n#### CSS\n\nCSSで指定するには、「Markdownセル」または「HTMLセル」に`style`要素を書きます。\n外部のCSSをインポートすることもできます。\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1025,"value":"#### ビデオ\n","pinned":false,"hidden":false,"mode":"md"},{"id":977,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1106,"value":"dot`\ndigraph G {\n\trankdir = LR;\n subgraph cluster_selection {\n p_0;\n p_1;\n p_0, p_1, p_x [style=dashed];\n p_0, p_1, p_x [color=gray];\n label = \"empty selection\";\n color=gray;\n }\n\tdiv -> p_0;\n\tdiv -> p_1;\n\tdiv -> p_x;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"#### 結合（join）\n\nデータとセレクションが準備できました。\nいよいよ結合します。\n\nセレクションの`data()`メソッドでデータを渡し、`join()`メソッドで新しいDOM要素を生成します。\n\n```js\ndiv = {\n const dataset = [5, 25, 45, 65, 85];\n const div = d3.create(\"div\");\n \n div.selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text(\"新しいパラグラフ！\");\n return div.node();\n}\n```\n\n`data()`メソッドの引数には、結合するデータ（配列）を指定します。\nこのメソッドはデータの数をしらべます。\nここでは5つの値がありますので、この`data()`メソッドを通過した後のメソッドを、**各値ごとに5回くり返します**。\n\n`join()`メソッドの引数には挿入したい要素名を指定します。\nここで、DOMに`p`要素を挿入します。\n生成した要素への参照を次のステップに渡します。\n\n`join()`メソッドは、データと要素が一致するように、必要に応じて要素の追加、削除、並び替えを行います。\nここでは、空（から）の要素群にデータを結合したので、追加のみしています。\n\nさいごに`text()`メソッドで、新しく生成された`p`要素のテキストをセットしています。\n\nセルの出力部分をインスペクタで開いて、次のようになっていればOKです。\n```html\n

新しいパラグラフ！

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":985,"value":"div = {\n const dataset = [5, 25, 45, 65, 85];\n const div = d3.create(\"div\");\n\n div.selectAll(\"p\").data(dataset).join(\"p\").text(\"新しいパラグラフ！\");\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1157,"value":"dot`\ndigraph G {\n rankdir=LR;\n subgraph cluster_selection {\n // node [style=filled];\n // node [style=dashed];\n // node [color=gray];\n p_0, p_1, p_2, p_3, p_4;\n label = \"bound selection\";\n }\n subgraph cluster_data {\n 5, 25, 45, 65, 85;\n label = \"bound data\";\n color=gray;\n }\n 5 -> p_0;\n 25 -> p_1;\n 45 -> p_2;\n 65 -> p_3;\n 85 -> p_4;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":991,"value":"#### 補足\n\n**D3でデータをもとに反復をするときには、forループは使いません。**\n\nJavaScriptをよく知っているとは、for()、forEach()を使って書くほうが分かりやすいでしょう。\n以下の書き方でも、見た目は同じですが、この書き方では**データが結合されていません**。\nこれからD3の機能を追加していきますので、D3風の書き方に慣れてください。\n\n##### NG: D3っぽくない書き方（このような書き方はさける）\n```js\nconst dataset = [5, 25, 45, 65, 85];\n\nfor (let i = 0; i < data.length; i++) {\n d3.select(\"body\")\n .append(\"p\")\n .text(\"新しいパラグラフ！\");\n}\n```\n\nFor detail: [selection.join](https://observablehq.com/@d3/selection-join)\n\n> `join()`は比較的さいきん登場したメソッドです。\n以前は`enter().append()`メソッドを組み合わせて使っていました（Web検索すると、いまも古いサンプルコードが見つかることがあります）。\nこれまでの解説では、両者が行っていることは同じです。\n\n##### REF: 以前のバージョンでの書き方\n```js\nconst dataset = [5, 25, 45, 65, 85];\n\nd3.select(\"body\").selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text(\"新しいパラグラフ！\");\n```","pinned":false,"hidden":false,"mode":"md"},{"id":994,"value":"### データを使う\n\n前回まででデータと要素を結合できました。\nただし、結合したデータをまだ使っていません。\nここからデータを使っていきます。\n\n`text()`メソッドを次のように書き換えます。\n\n```js\n.text(function(d) { return d; });\n```\n\n各段落のテキストがデータの値になりましたね。\n\n`text()` メソッドの引数に無名関数を指定しました。\nこの無名関数の引数の `d` とは何者でしょうか？　\nこの `d` は、 `data()` メソッドが後続するメソッドに渡しているデータの値です。\n\n`data()`メソッドは、各要素をループするときに、対応するデータの値を渡します。\nたとえば、3回目のループのとき、3つ目の `p` 要素を生成し、対応する3番目の値（`dataset[2] : 45`）が `d` に渡されます。\n\n> **どうして引数名は「`d`」なの？** \nここでは引数名を `d` としていますが、任意の名前をつけることができます。\nつまり、 `a` でも `b` でも `data` でも、JavaScriptで使える変数名ならどんな名前にしてもかまいません。\nただし慣例として、`d` を使います。\n`data`の頭文字の`d`だと覚えておきましょう。\nほぼすべてのサンプルコードが `d` を使っているはずです。","pinned":false,"hidden":false,"mode":"md"},{"id":1004,"value":"### 表示をカスタムする\n\nいまのサンプルは、引数で受け取った値をそのまま返すシンプルな関数でした。\n\n関数の中身は好きに書き換えられます。\nすこしテキストを追加してみましょう。\n\n```js\n.text(function(d) {\n return d + \"点！\";\n});\n```\n\n無味乾燥な数字の羅列ではなく、なにかの評価リストのようになりました。\n\n#### 関数表記をシンプルに\n\n無名関数を書くとインデントが深くなり、プログラムの見通しがわるくなります。\n見通しをよくするには、ふたつの解決方法があります。\n\n##### 1. 関数を定義する\n\nひとつの方法は、無名関数ではなく、外側に関数を定義する方法です。\n\n```js\nfunction getScoreText(d) {\n return d + \"点！\";\n}\n\n…\n\n.text(getScoreText);\n```\n\n##### 2. アロー関数の記法を使う\n\nもうひとつの方法は、アロー関数を使う方法です。\n\n```js\n.text((d) => { return d + \"点！\"; });\n```\n\nアロー関数を使うと、`function`の表記を省略できます。\n関数の内容を変えることなく、タイプ数が大幅に減り、プログラムの見通しがよくなります。\n\n上の例では、引数が1つしかないので引数を囲む丸括弧も省略できます（ただしObservableのコード自動整形機能では引数の丸括弧は省略されません）。\nまた、関数の中身が`return`文だけの場合は、関数の中身を囲む波括弧と`return`も省略できます。\n\n```js\n.text((d) => d + \"点！\");\n```\n\nずいぶん短くできました。\n\nこの授業では、今後アロー関数が使えるところでは、積極的にアロー関数を使います。","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"#### 関数じゃなきゃいけないの？\n\nいちいち無名関数を書くのは面倒なので、たんに `d` と書くだけではだめなのでしょうか。\nつぎのように書けたら簡単ですよね。\n\n```js\n.text(d + \"点！\")\n```\n\n残念ながら、このコードは動作しません。\nなぜなら突然登場した変数`d`がどこにも定義されていないからです。\n\nだからといって、前の行で`const d = 0;`と定義すると、全部0点になってしまいます。\n\n`d` が使えるのは、メソッドの引数が関数であるときに限られます。\n`text(), attr()` など多くのメソッドは、さまざまな引数をとることができます。\n\n```js\n// 文字列\n.text(\"新しいパラグラフ！\")\n\n// 関数の戻り値\n.text(otherFunction())\n\n// 無名関数\n.text((d) => d)\n```\n\nD3は、これらのメソッドの引数に関数をみつけると、現在のデータの値を関数の引数(`d`)に渡し、その関数を実行します。\n関数がなければ、値を渡すことができません。\n\nややこしいですが、関数で`d`を受け取れる仕組みがあるから、要素とデータの結合がうまくいくのです。","pinned":false,"hidden":false,"mode":"md"},{"id":1008,"value":"#### スタイルをカスタムする\n\n要素の属性を指定するには、`text()`メソッドのほかに、`attr()`メソッドや`style()`メソッドも使えます。\n\n`attr()`メソッドは要素の属性を指定し、`style()`メソッドは要素のスタイルを指定します。\n\nつぎの1行を追加してみましょう。\n\n```js\n.style(\"color\", \"red\");\n```\n\nテキストが赤色になりました。\nここでは、`style()`で`color`属性値に文字列`\"red\"`を指定しましたが、関数を指定することもできます。\nデータの値が一定の数値以下のときだけ赤色になるような関数に書き換えます。\n\n```js\n.style(\"color\", (d) => {\n if (d <= 30) { // 30点以下は赤色にする\n return \"red\";\n } else {\n return \"black\";\n }\n});\n```\n\n30点以下の文字だけが赤色に変わりました。\n\nここまでのコード\n\n```js\ndiv.selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text((d) => d + '点！')\n .style(\"color\", (d) => {\n if (d <= 30) { // 30点以下は赤色にする\n return \"red\";\n } else {\n return \"black\";\n }\n });\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"#### データ、インデックス\n\n関数の引数としてデータの値を受け取れました。\nここでは、もうひとつ引数を追加してみましょう。\n\n`text()`メソッドを書き換えます。\n\n```js\n.text((d, i) => (i + 1) + \"人目は、\" + d + \"点！\")\n```\n\n二つ目の引数`i`を使います。\n`i`の名前も何でもかまいませんが、慣例として`i`を使います。\nデータ(**d**ata)のディー、インデックス(**i**ndex)のアイと覚えておきましょう。\n\n##### テンプレートリテラル\n\n上の例では、`+` と__ダブルクォート__`\"\"`で文字列を連結しています。\n連結部分が増えると、読み取りにくく、タイプ量も増えてしまいます。\n\nかわりに__テンプレートリテラル__という記法を使って、次のように書くこともできます。\nまず文字列全体を__バッククォート__ \\`\\`で囲みます。\n変数や式の結果を挿入したい部分を`\\${ }`で囲みます。\n\n```js\n.text((d, i) => `\\${i + 1}人目は、\\${d}点！`)\n```\n\n> バッククォート${buttons(\"`\")}の入力方法\n> - 日本語キーボード： ${buttons(\"shift-@\")}\n> - 英語キーボード：　${buttons(\"1\")}の左","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"### 横向き棒グラフをつくる\n\n棒となる`div`要素のスタイル`width`の値をデータと連動させることで、横向き棒グラフをつくることができます。\n\n```js\n{\n const dataset = [5, 25, 45, 65, 85];\n const div = d3.create('div')\n .style('background-color', '#eef')\n .style('padding', '1em')\n\n div.selectAll(\"div\")\n .data(dataset)\n .join(\"div\")\n .text(d => d)\n // .style(\"background-color\", (d) => d <= 30 ? 'red' : 'blue')\n .style(\"background-color\", (d, i) => i % 2 ? 'blue' : 'orange')\n .style('margin-bottom', '1px')\n .style('width', d => `\\${d * 5}px`)\n .style('color', 'white')\n .style('font-family', 'sans-serif')\n .style('text-align', 'right')\n .style('padding-right', '0.5em')\n return div.node();\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1321,"value":"{\n const dataset = [5, 25, 45, 65, 85];\n const div = d3\n .create(\"div\")\n .style(\"background-color\", \"#eef\")\n .style(\"padding\", \"1em\");\n\n div\n .selectAll(\"div\")\n .data(dataset)\n .join(\"div\")\n .text((d) => d)\n // .style(\"background-color\", (d) => (d <= 30 ? \"red\" : \"blue\"))\n .style(\"background-color\", (d, i) => (i % 2 ? \"blue\" : \"orange\"))\n .style(\"margin-bottom\", \"1px\")\n .style(\"width\", (d) => `${d * 5}px`)\n .style(\"color\", \"white\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"text-align\", \"right\")\n .style(\"padding-right\", \"0.5em\");\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1022,"value":"#### ビデオ\n","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"makeLinksTargetBlank = {\n // set all links target blank\n return d3.selectAll(\".observablehq-root a\").each(function () {\n const link = d3.select(this);\n if (link.attr(\"href\") !== \"\") {\n link.attr(\"target\", \"_blank\");\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"import { linkButton } from \"@sugi2000/link-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"import { toc } from \"@sugi2000/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"import { banner } from \"@sugi2000/banner\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"import { buttons } from \"@observablehq/keys\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}