2c:null 2d:["$","title",null,{"children":"2020-10-30 Seminar in Data Visualization | Network Design Studio, TMU | すぎもと組 | Observable"}] 32:Ta85,md`### データと結びつける（データバインディング）データの可視化は、データをビジュアルにマッピングする（対応づける）プロセスです。データが入力で、ビジュアルの属性が出力です。たとえば、数字が大きいほど棒の高さを高くしたり、あるカテゴリのデータなら色を明るくしたりします。マッピングのルールは、開発者自身が決めます。データとDOM要素を結合（バインド）するのにD3を使います。バインドすることで、データと特定の要素を結びつけ、マッピングルール適用時に元の値を参照できるようになります。データのバインドには、\`selection.data()\`メソッドを使います。バインドするまえに、入力と出力にあたる、データとDOM要素のセレクションを準備する必要があります。 #### データ D3では様々な種類のデータを扱うことができます。数値の配列、文字の配列、オブジェクトの配列など、どんな種類の配列も扱えます。 JSONやGeoJSON、CSVなどのフォーマットも読み込むことができます。最初のサンプルとして、ここではシンプルな数値の配列をデータとして使います。 \`\`\`js const dataset = [5, 25, 45, 65, 85]; \`\`\` #### セレクションつぎに、データを結びつける対象となるDOM要素をきめます。ここでは、データの各値ごとに新しいパラグラフを生成します。つぎのように書きます。 \`\`\`js d3.select("body").selectAll("p") \`\`\` このコードをすんなり理解できますか。ここは、はじめてD3を使うときにつまづきやすいポイントなのでくわしく説明します。 \`selection.selectAll()\`メソッドは、引数に指定したCSSセレクタの要素を検索しすべての要素を返します。ここではまず、\`select("body")\`で\`body\`要素への参照を次のステップに渡しています。つぎに、\`selectAll("p")\`で、\`body\`要素内のすべての\`p\`要素を選択します。ところが、まだ\`body\`要素の内部には\`p\`要素はひとつもありません。まだ存在していない要素をセレクトするなんて不可能そうですが、できてしまいます。このメソッドでは空（から）のセレクションを返します。このセレクションは空（から）ですが、\`body\`要素の子にあたる\`p\`要素群を表していて、これから作成される場所を指し示しているのです。 `33:T7fd,md` #### 確認ブラウザでページを開いて、インスペクタで次のようになっていればOKです。 \`\`\`html

新しいパラグラフ！

\`\`\` ところがデータは消えてしまいました。コンソールをクリックして次のコードをタイプしてリターンキーを押します。 \`\`\`js d3.selectAll("p") \`\`\` オブジェクトが表示されます。 \`\`\`js Object { _groups: (1) […], _parents: (1) […] } \`\`\` \`_groups\`を開いていくと、\`0\`から\`4\`までの5つの\`

\`が表示されます。 \`\`\`js {…} _groups: (1) […] 0: NodeList(5) 0:

length: 5 : NodeListPrototype { item: item(), keys: keys(), values: values(), … } length: 1 : Array [] _parents: Array [ html ] : Object { constructor: xn(t, n), select: select(t), selectAll: selectAll(t), … } \`\`\` 最初の\`

\`を開いてください。たくさんの属性が表示されます。 \`__data__\`属性をさがしてください。（Firefoxなら冒頭に、Chromeなら最後の方を再度クリックすると表示されます） \`\`\`js __data__: 5 \`\`\` \`p\`要素の\`__data__\`属性に、結合したデータの最初の値5が格納されています。ほかの\`p\`要素も開いて確認してください。それぞれ結合したデータの値が\`__data__\`属性に保存されているはずです。これでデータ結合がうまくいっていることが確認できました。要素に結合されたデータは、\`__data__\`属性に記録されています。データが結合されているかどうか確認したい場合は、このようにコンソールで確かめることができます。 `34:[] 30:{"id":"f910a16446b8e1c1","slug":"2020-10-29-seminar-in-data-visualization","title":"2020-10-30 Seminar in Data Visualization","thumbnail":"1b57530aaf71f84030ed8158d6a1485ed9867dba2d3650def58f8f2603be2e9d","access_level":"public","create_time":"$D2020-10-23T08:44:17.267Z","update_time":"$D2020-10-30T12:52:19.120Z","view_time":null,"first_public_time":"$D2020-10-30T06:49:36.029Z","has_unpublished_edits":null,"fork":{"id":"5ecfb71cc430d0d8","slug":"2020-10-22-seminar-in-data-visualization","title":"2020-10-22 Seminar in Data Visualization","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"stars":0,"starred":false,"owner":{"type":"team","id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組","avatar_url":"https://avatars-next.observableusercontent.com/c7504ede11e556181b55f0b28f2ee9005e02b9eac2471f6480e562a0ff3d8dfc","tier":"education_2026"},"version":588,"publish_version":588,"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":1,"collection":{"id":"914505911afcd4e0","slug":"2020-ii","title":"2020ネットワーク演習II","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"type":"notebook","body":{"titling":"auto","title":"2020-10-30 Seminar in Data Visualization","cells":[{"id":0,"value":"md`# 2020-10-30 Seminar in Data Visualization\nSUGIMOTO Tatsuo, Tokyo Metropolitan University\n\n**ネットワーク演習II** \n東京都立大学システムデザイン学部インダストリアルアート学科 \n杉本達應\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`#### from reaction papers\n\nno question.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`### Today's agenda\n\n1. Data drawing presentation\n2. D3.js introduction\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`### D3.js Hands on`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`\nひきつづきローカルで開発します。\n\n#### 前回のスクリプト\n\n\\`\\`\\`js\nd3.select(\"body\")\n .append(\"p\")\n .text(\"新しいパラグラフ！\");\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`\n#### 結合（join）\n\nデータとセレクションが準備できました。\nいよいよ結合します。\n\nセレクションの\\`data()\\`メソッドでデータを渡し、\\`join()\\`メソッドで新しいDOM要素を生成します。\n\n\\`\\`\\`js\nconst dataset = [5, 25, 45, 65, 85];\n\nd3.select(\"body\").selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text(\"新しいパラグラフ！\");\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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`#### 補足\n\n**D3でデータをもとに反復をするときには、forループは使いません。**\n\nJavaScriptに慣れている人は次のように書くほうが分かりやすいでしょう。\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: 以前のバージョンでの書き方（わたしたちはjoin()をつかいます）\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\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`### 練習\n\n**第1問**　これまでのサンプルでは5つの段落をつくりました。データセットを修正して、7つに増やしてください。\n\n\\`\\`\\`html\n \n

新しいパラグラフ！

\n \n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`### 本日の課題\n\n- [リアクションペーパー](https://docs.google.com/forms/d/e/1FAIpQLSenD096ludFkIN6HHHFgSpEwAYo3bgAzTQaS69aS06QfomQzQ/viewform)（本日中）\n- ポストカード完成　画像データを提出（次回授業開始時に）\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"