D3 テスト

2c:null 2d:["$","title",null,{"children":"2020-10-22 Seminar in Data Visualization | Network Design Studio, TMU | すぎもと組 | Observable"}] 32: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

\`\`\` `33:[] 30:{"id":"5ecfb71cc430d0d8","slug":"2020-10-22-seminar-in-data-visualization","title":"2020-10-22 Seminar in Data Visualization","thumbnail":"cb98669c4045242f8cd211642077afdba6098c7b7482ac085568cfed123b3883","access_level":"public","create_time":"$D2020-10-16T08:22:11.401Z","update_time":"$D2020-11-03T07:44:55.348Z","view_time":null,"first_public_time":"$D2020-10-23T05:58:43.936Z","has_unpublished_edits":null,"fork":{"id":"d8689ef618dfdaf2","slug":"2020-10-15-seminar-in-data-visualization","title":"2020-10-15 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":392,"publish_version":392,"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-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","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. D3.js introduction\n2. Data drawing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`### Hands on\n\n`","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#### 公式サイトからライブラリ本体「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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$32","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"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"