31:[] 2f:{"title":"2020-10-30 Seminar in Data Visualization 2 of 2","cells":[{"id":0,"value":"md`# 2020-10-30 Seminar in Data Visualization 2 of 2\nSUGIMOTO Tatsuo, Tokyo Metropolitan University\n\n**ネットワーク演習II** \n東京都立大学システムデザイン学部インダストリアルアート学科 \n杉本達應\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`### D3.js Hands on`","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`\nひきつづきローカルで開発します。\n\n#### 前回のスクリプト\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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`#### データを使う\n\n前回まででデータと要素を結合できました。\nただし、結合したデータをまだ使っていません。\nここからデータを使っていきます。\n\n前回のコードの最後の行を次のように書き換えます。\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\n> **なぜ「\\`d\\`」なのか？** \nここでは引数名を\\`d\\`としていますが、\nじつは\\`a\\`でも\\`b\\`でも\\`data\\`でも、JavaScriptで使える変数名ならどんな名前にしてもかまいません。\nただし慣例として\\`d\\`を使います（ほぼすべてのサンプルコードが\\`d\\`を使っているでしょう）。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`\n#### 表示をカスタムする\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##### 関数を定義する\n\n一つの方法は、無名関数ではなく、外側に関数を定義する方法です。\n\n\\`\\`\\`js\nfunction getScoreText(d) {\n return d + \"点！\";\n}\n\n…\n\n.text(getScoreText);\n\\`\\`\\`\n\n\n#### アロー関数の記法を使う\n\nもう一つの方法は、アロー関数を使う方法です。\n\n\\`\\`\\`js\n.text((d) => { return d + \"点！\"; });\n\\`\\`\\`\n\nアロー関数を使うと、\\`function\\`の表記を省略できます。\n関数の内容を変えることなく、タイプ数が大幅に減り、プログラムの見通しがよくなります。\n\n上の例では、引数が1つしかないので引数を囲む丸括弧も省略できます。\nまた\\`return\\`文しかないので関数の中身を囲む波括弧と\\`return\\`も省略できます。\n\n\\`\\`\\`js\n.text(d => d + \"点！\");\n\\`\\`\\`\n\nずいぶん短くできました。\n\nこの授業では、今後アロー関数が使えるところでは、積極的にアロー関数を使います。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`#### 関数じゃなきゃいけないの？\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\\`を受け取る仕組みにしているから、要素とデータの結合がうまくいくのです。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"md`#### スタイルをカスタムする\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\\`\\`\\`js\nconst dataset = [5, 25, 45, 65, 85];\n\nd3.select(\"body\").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\\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md`#### データ、インデックス\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\\`\\`\\`js\n.text((d, i) => \\`$\\{i + 1\\}人目は、$\\{d\\}点！\\`)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`### 練習\n\n**第1問**　データを増やす \nこれまでのサンプルでは5つの段落をつくりました。データセットを修正して、7つに増やしてください。\n\n\\`\\`\\`html\n \n

1人目は5点！

2人目は25点！

3人目は45点！

4人目は65点！

5人目は85点！

6人目は100点！

7人目は100点！

\n \n\\`\\`\\`\n\n**第2問**　クラスを設定する \n\nクラスを設定するには、\\`.attr(\"class\", \"className\")\\`です。\n\n\\`\\`\\`html\n \n

1人目は5点！

2人目は25点！

3人目は45点！

4人目は65点！

5人目は85点！

\n \n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### 本日の課題\n\n- [リアクションペーパー](https://docs.google.com/forms/d/e/1FAIpQLSenD096ludFkIN6HHHFgSpEwAYo3bgAzTQaS69aS06QfomQzQ/viewform)（本日中）\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}