D3 テスト

31:T74f,md`### 練習 **第1問**　これまで解説した、select, append, textメソッドを使って、次のようなHTMLを生成してください。 \`\`\`html

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\`\`\` **第2問**　できたら、次のようなHTMLを生成してください。 \`\`\`html

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\`\`\` **第3問** attrメソッドを使って、次のようなHTMLを生成してください。 attrメソッドはセレクションの属性を設定します。第1引数に属性名、第2引数には属性の値を指定します。 attrメソッドの例 \`\`\`js p.attr("class", "className") // p要素のclass属性の値をclassNameに設定します \`\`\` HTML \`\`\`html

新しいパラグラフ！　その1

新しいパラグラフ！　その2

新しいパラグラフ！　その3

新しいパラグラフ！　その4

新しいパラグラフ！　その5

\`\`\` `32:[] 2f:{"title":"2020-10-22 Seminar in Data Visualization","cells":[{"id":0,"value":"md`# 2020-10-22 Seminar in Data Visualization\nSUGIMOTO Tatsuo, Tokyo Metropolitan University\n\n**ネットワーク演習II** \n東京都立大学システムデザイン学部インダストリアルアート学科 \n杉本達應\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`#### from reaction papers\n\nno question.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`### Today's agenda\n\n1. D3.js introduction\n2. Data drawing\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`#### D3.js入門\n\n公式サイト: [D3.js - Data-Driven Documents](https://d3js.org/) \n最新バージョン：6.2\n\n[D3チュートリアル / SUGIMOTO Tatsuo / Observable](https://observablehq.com/collection/@sugi2000/d3)を大幅に加筆修正しています。\n\nD3.jsは、データをもとにドキュメントを操作できるJavaScriptライブラリ。\nD3を使うと、データを動的なHTML, SVG, CSSに変換できる。\nデータ可視化のためのコンポーネント、データ駆動型のDOM操作が充実している。\n\n#### ローカルで制作する方法\n\nHTMLのscript要素でライブラリを読み込んで使用する。\n\\`\\`\\`html\n \n\\`\\`\\`\nオフライン時でも開発できるように、D3ライブラリ一式をダウンロードしておくことを推奨する。\n\n#### オンライン（Observable）で制作する方法\n\n次回以降解説します。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`### 作業環境\n- Web browser: [Mozilla Firefox](https://www.mozilla.org/), [Google Chrome](https://www.google.com/chrome/)\n- Editor: [Microsoft Visual Studio Code](https://code.visualstudio.com/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`### Hands on\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`\nローカルで動作するページを作成します。\n\n#### 公式サイトからライブラリ本体「d3.zip」をダウンロード\n\n\\`\\`\\`\nd3/\n d3.min.js\n d3.js\n API.md\n LICENSE\n CHANGES.md\n README.md\n\\`\\`\\`\n\n#### d3フォルダとおなじ階層にHTMLファイルを作成\n\n\\`index.html\\`\n\n\\`\\`\\`html\n\n\n \n \n D3 テスト\n \n \n \n \n \n\n\\`\\`\\`\n\nWebブラウザで開いてみましょう。この時点でページは空っぽですね。\n\n#### JavaScriptの追加\n\n\\`script\\`要素に次の1行を追加します。\n\n\\`\\`\\`js\n d3.select(\"body\").append(\"p\").text(\"新しいパラグラフ！\");\n\\`\\`\\`\n\nWebブラウザで開いて確認します。空っぽだったページにテキストが追加されています。\n\nWebインスペクタでDOMを確認します。\n\n\\`body\\`要素内の最後に\\`p\\`要素が追加され、\\`p\\`要素に「新しいパラグラフ！」というテキストがセットされています。\n\n### JavaScriptの整形\n\nJavaScriptでは空白（スペース、タブ、改行）は自由に入れられますので、読みやすいように整形します。\n次のように書くのが読みやすいでしょう。\n\n\\`\\`\\`js\n d3.select(\"body\")\n .append(\"p\")\n .text(\"新しいパラグラフ！\");\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`### スクリプトの解説\n\n\\`\\`\\`js\n d3\n\\`\\`\\`\n\nd3のオブジェクトを参照します。d3のメソッドを呼ぶときはつねにd3から始めます。\n\n\\`\\`\\`js\n .select(\"body\")\n\\`\\`\\`\n\nd3のselect()メソッドで、DOMの要素への参照を取得します。\n引数にはCSSセレクタを指定し、一致する最初の要素を取得できます\n（複数の要素を取得したい場合はselectAll()を使います）。\nここでは、body要素を取得しています。\nこのbody要素を次のメソッドに渡します。\n\n\\`\\`\\`js\n .append(\"p\")\n\\`\\`\\`\n\nd3のappend()メソッドで、新しいDOM要素を作成し、呼びだし元のセレクションの内側最後に追加します。\nここでは、body要素内の最後にp要素を作成しています。\n作成したp要素を次のメソッドに渡します。\n\n\\`\\`\\`js\n .text(\"新しいパラグラフ！\")\n\\`\\`\\`\n\nd3のtext()メソッドで、現在選択している要素の文字列を設定します。\nここでは、p要素の文字列、つまり\\`\\`

\\`\\`と\\`\\`

\\`\\`の間に指定したテキストを挿入します\n（すでに内容が入っている場合、上書きされます）。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`### メソッドチェーン\n\nこのサンプルのように前のメソッドの返り値を引き継いで、次のメソッドを呼ぶ場合、「.」（ドット）で連結することで、連続的に実行することができます。\n\nただし、同じオブジェクトに複数のメソッドを実行したいときなど、チェーンにしないことがよい場合もあります。\nこのサンプルのチェーンをほどいて、次のように書くこともできます。\n\n\\`\\`\\`js\n const body = d3.select(\"body\");\n const p = body.append(\"p\");\n p.text(\"新しいパラグラフ！\");\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### 本日の課題\n\n- [リアクションペーパー](https://docs.google.com/forms/d/e/1FAIpQLSenD096ludFkIN6HHHFgSpEwAYo3bgAzTQaS69aS06QfomQzQ/viewform)（本日中）\n- ポストカード完成　画像データを提出（次回授業開始時に）\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}