2d:null 2e:["$","title",null,{"children":"2020-11-06 Seminar in Data Visualization 1 of 3 | Network Design Studio, TMU | すぎもと組 | Observable"}] 33:T6f5,md`#### 米大統領選を伝えるメディアコロプレス、カルトグラムなど、さまざまな方法で得票状況（予測）を示している。 * FiveThirtyEight: https://projects.fivethirtyeight.com/2020-election-forecast/ * Bloomberg: https://www.bloomberg.com/graphics/2020-us-election-results * CNN: https://edition.cnn.com/election/2020/results/president * POLITICO: https://www.politico.com/2020-election/results/president/ * The New Yorker: https://www.newyorker.com/news/election-2020/live-2020-presidential-election-results * ABC News: https://abcnews.go.com/Elections/2020-us-presidential-election-results-live-map/ * The Wall Street Journal: https://www.wsj.com/election-results-2020/ * The New York Times: https://www.nytimes.com/interactive/2020/11/03/us/elections/results-president.html * Washington Post: https://www.washingtonpost.com/elections/ * Financial Times: https://ig.ft.com/us-election-2020/ * BBC News: https://www.bbc.com/news/election-us-2020-54783016 * Reuters: https://graphics.reuters.com/USA-ELECTION/RESULTS-LIVE-US/jbyprxelqpe/index.html * Vox: https://www.vox.com/21551153/presidential-election-results-trump-biden * Fox News: https://www.foxnews.com/elections/2020/general-results * Al Jazeera: https://interactive.aljazeera.com/aje/live-results-us-election-day-2020/index.html * NHK: https://www3.nhk.or.jp/news/special/presidential-election_2020/ * Nikkei: https://vdata.nikkei.com/newsgraphics/presidential-election2020/kaihyo/ * Asahi Shimbun: https://www.asahi.com/international/us-election/2020/ some links via https://www.facebook.com/groups/231511570736313/permalink/769046680316130 コロプレス・マップとバブル・マップ https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted `34:T805,md`### ObservableでD3を使う HTMLでは、\`script\`タグでd3ライブラリを読み込んでいました。 \`\`\`html \`\`\` Observableの場合は、d3モジュールを読み込みます。次のセルを追加します。 \`\`\`js d3 = require("d3@6") \`\`\` \`@6\`はバージョン番号の指定です。なにも指定しないと最新版になります。将来D3がバージョンアップし、仕様が変わって動作しなくなることを回避するために、ここではバージョン番号を指定しています。もちろんD3以外のJavaScriptライブラリを読み込むこともできます。 \`\`\`js $ = require("jquery") \`\`\` \`\`\`js _ = require("lodash") \`\`\` #### ローカルスクリプトをObservableに移植するローカルで開発していたスクリプトをObservableに移植します。 HTMLのscript要素とは書き方がことなりますので注意してください。スクリプトをそのままセルにペーストしてもうまくいきません。 \`\`\`js const dataset = [5, 25, 45, 65, 85]; d3.select("body").selectAll("p") .data(dataset) .join("p") .text((d, i) => \`\${i}人目は、\${d}点！\`); \`\`\` まず、セル内のテキストをすべて選択して、\`{\`を入力し、セル全体をブロックにします。テキストを選択した状態で括弧類を入力すると選択範囲の最後に閉じ括弧が自動入力されます。 Observableでは、\`d3.select("body")\`は使えません。その代わり、\`d3.create()\`メソッドを使って、データと結合するDOM要素の親要素を作成します。最後に、\`selector.node()\`メソッドを\`return\`して\`div\`要素を表示します。 \`\`\`js { const dataset = [5, 25, 45, 65, 85]; const div = d3.create("div"); div .selectAll("p") .data(dataset) .join("p") .text((d, i) => \`\${i}人目は、\${d}点！\`); return div.node(); } \`\`\` `35:[] 31:{"id":"4fdbc5b7f7d60a12","slug":"2020-11-06-seminar-in-data-visualization-1-of-3","title":"2020-11-06 Seminar in Data Visualization 1 of 3","thumbnail":"1421aa9f74a6e6e30e05e5c165a3db529c95f9bb1eeaff0872acf5067fd476a2","access_level":"public","create_time":"$D2020-10-30T12:23:22.275Z","update_time":"$D2020-11-06T07:14:06.638Z","view_time":null,"first_public_time":"$D2020-11-06T05:52:50.213Z","has_unpublished_edits":null,"fork":{"id":"a005f466c270481e","slug":"2020-10-29-seminar-in-data-visualization-2-of-2","title":"2020-10-30 Seminar in Data Visualization 2 of 2","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"stars":1,"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":1026,"publish_version":1026,"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":[{"id":"1da341bd79dbaaba","reply_to_id":null,"content":"https://observablehq.com/@sugi2000/my-first-d3","create_time":"$D2020-11-06T06:52:00.553Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}},{"id":"681e34d358e5120b","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@kominamiyuto/konisiki","create_time":"$D2020-11-06T06:52:04.043Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null}},{"id":"8fcba8b26a663ae5","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@junna-oikawa/my-first-d3","create_time":"$D2020-11-06T06:52:17.179Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a0602b0b6835e9f4","login":"junna-oikawa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/69ed736302eb9dbf5adaca594e1678591144a2d7157ec577e42e934c9dfc925d","tier":null}},{"id":"f416ac4e0ac996d3","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@hiromi-mitsuoka/my-first-d3","create_time":"$D2020-11-06T06:52:32.684Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"aa99dac913269771","login":"hiromi-mitsuoka","name":"Hiromi Mitsuoka","avatar_url":"https://avatars-next.observableusercontent.com/480468519a37ec7781aad10710e1fd0b148fe33c6c4eda59f99da94851622b6a","tier":null}},{"id":"ceb24f809d8229f3","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@hitomi-neko/my-first-d3-js","create_time":"$D2020-11-06T06:52:43.134Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1cdd06ad943a7d8f","login":"hitomi-neko","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c3e23bd42a87e9909567f5dac050e5821138356cfda23d480056551ad0bc4622","tier":null}},{"id":"2cf8c371a076a762","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@sumikko-mountain/mt-first-d3_201106","create_time":"$D2020-11-06T06:54:49.867Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"751514e4cb4a16bf","login":"sumikko-mountain","name":"YUIKO SUYAMA","avatar_url":"https://avatars-next.observableusercontent.com/9ea4b3ab49d5846d1a11e11b9b0151c58d47a3d8e35454893036c517d781f81a","tier":null}},{"id":"937e1740e375111f","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@taiki4532/my-first-d3","create_time":"$D2020-11-06T06:56:23.118Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4b7dc05076733908","login":"taiki4532","name":"Taiki Sekiguchi","avatar_url":"https://avatars-next.observableusercontent.com/8fd3dcc90fb16d4e4280f19b9b25ec6d72cdb6bab6541a0e992ec8b7f7979312","tier":null}},{"id":"fa498c85ff908fb8","reply_to_id":"1da341bd79dbaaba","content":"https://observablehq.com/@yuukikoyama/My-First-d3","create_time":"$D2020-11-06T06:56:33.505Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"196ad439b8279b00","login":"yuukikoyama","name":"小山佑季","avatar_url":"https://avatars-next.observableusercontent.com/f765b72dbc2a96192c189619aec43a7edcbf2e4ee24be8e44647d32cea021c85","tier":null}}],"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-11-06 Seminar in Data Visualization 1 of 3","cells":[{"id":0,"value":"md`# 2020-11-06 Seminar in Data Visualization 1 of 3\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":908,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`### Observable入門\n\nこれまでローカルで開発してきましたが、ここからはWebサービスObservableに移行します。\n\nObservableは、D3.jsの開発者Mike Bostockらが創業したサービスで、JavaScriptの開発・共有がすばやく行えます。\n\nGitHubアカウントなどを利用して簡単にサインアップできます。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"md`#### 1. はじめてのノートブック\n\nObservableではひとつひとつの開発プロジェクトを**ノートブック**と呼びます。\nページ右上のNewボタンを押して、新しいノートブックを作成します。\n\nグレーの部分に以下の文字列が書いてあります。\n\\`\\`\\`js\nmd\\`# Untitled\\`\n\\`\\`\\`\n\nこの部分を**セル**とよびます。\nセルの右端にある三角形の実行ボタンをクリックすると、セルの中身を実行します。\nセルの上に見出し「Untitled」が表示されるはずです。\n\n# Untitled\n\\`\\`\\`js\nmd\\`# Untitled\\`\n\\`\\`\\`\n\nセル内の「Untitled」の部分を好きな文字列に変え、セル右端の実行ボタンを押して見出しを変えましょう。\n\n# My first D3\n\\`\\`\\`js\nmd\\`# My first D3\\`\n\\`\\`\\`\n\n実行ボタンのショートカットは、 Shift + Return です。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`#### 2. セルに書けるもの\n\nObservableのセルには**JavaScriptの式**が書けます。\n**HTML**と**Markdown**も書けます。\n\n**JavaScript**\n\n最初のセルの左下にある小さな「＋」ボタンを押して、新しいセルを追加します。\n空のセルができるので、JavaScriptの式を書きます。\n\n~~~js\n2 * 3 * 4\n~~~\n\n実行ボタンを押すと計算結果 \\`24\\` がセルの上に表示されます。\n電卓のように使えますね！\n\n単純なJavaScriptのセルは1行だけなので行末のセミコロンを省略しています。\n\n**HTML**\n\n新しいセルを追加してHTMLを書きます。\nHTMLは、キーワード\\`html\\`に続けてバッククォートで囲んで書きます。\n\n\\`\\`\\`js\nhtml\\`

新しい見出し！

新しいパラグラフ！

Link to Google

\n\n

5点！
25点！
45点！

\\`\n\\`\\`\\`\n\n参考：[バッククォート「\\`」の入力方法│G-NOTE](https://316-jp.com/keyboard-backquote)\n \n**Markdown**\n\nHTMLよりも簡単な書式で文書を書けるのが[Markdown](https://ja.wikipedia.org/wiki/Markdown)です。\nMarkdownは、キーワード\\`md\\`に続けてバッククォートで囲んで書きます。\n\n上のHTMLをMarkdownで書き換えます。\n\\`\\`\\`js\nmd\\`## 新しい見出し！\n\n新しいパラグラフ！\n\n[Link to Google](https://google.com/)\n\n* 5点\n* 25点\n* 45点\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"md`#### 3. セルに名前をつける\n\nセルに名前をつけて再利用することができます。\n\n\\`\\`\\`js\nscore = 5 + 30\n\\`\\`\\`\n\n\\`5 + 30\\`のセルに\\`score\\`という名前をつけました。\nJavaScriptの変数の定義とほぼ同じですが、最初に\\`const\\`を書いていはいけません（書くとエラーになります）。\n\n名前を付けたセルの値を変えることできません。\n別のセルで値を再代入しようとして下のセルを書くと、同じ名前のセルがすでにあるためエラーになります。\n~~~js\nscore = 100\n~~~\n\n名前をつけたセルは、別のセルからアクセスできます。\n\n\\`\\`\\`js\ndoubleScore = score * 2\n\\`\\`\\`\n\n\\`score\\`を倍にした値をもつ\\`doubleScore\\`という名前のセルを作成しました。\n\n普通のJavaScriptでは以下のように書くでしょう。\n\n\\`\\`\\`js\nconst score = 5 + 30;\nconst doubleScore = score * 2;\n\\`\\`\\`\n\nJavaScriptでは、この1行目と2行目の順番を入れ替えることはできません。\n通常のプログラムは上から下へ順番に実行されます。\nそのため2行目で参照している変数\\`score\\`が事前に定義されていないとエラーになってしまいます。\n\nところが、Observableのセルは順番が自由です。\nためしにセルの位置をさかさまにしてください。\n問題なく動作するはずです。\n\nObservableでは、どの位置にあるセルからでもほかのセルを参照できます。\n普通のJavaScriptとは大きく異なる部分です。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"mdh`#### 4. セルの詳細\n\n**配列**は角括弧で囲みます\n~~~js\nsomeArray = [0, 4, 8, 12, 16]\n~~~\n\n**ブロック**は波括弧で囲みます。\nブロック内では、式、変数、関数など一般的なJavaScriptを書けます。\n\n~~~js\n{\n const first = 1;\n const second = first + 1;\n}\n~~~\n\n**関数**もつくれます。\n\n~~~js\nsomeFunc = (arg1, arg2) => {\n const result = arg1 * 10 + arg2;\n return result;\n}\n~~~\n\n~~~js\nsimpleFunc = d => d * d\n~~~\n\n**オブジェクト**は波括弧で囲んで作成しますが、Observableでは波括弧から始めるとブロックと認識されてしまうため、オブジェクトであることを明示するために全体をさらに丸括弧で囲みます。\n~~~js\nsampleObj = ___(___{\n key1: 0,\n key2: 10\n}___)___\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"md`#### 5. ノートブックの公開\n\nノートブックはデフォルトでプライベート（非公開）に設定されています。\nつまり作成したユーザーしか見ることができません。\n他人に見てもらうには、ノートブックを公開します。（共有リンクをつくる方法もあります）\n\nページ右上のPublishボタンを押します。\n一番上のセルの見出しをもとにURLが生成されて公開されます。URLは以下のようになります。\n\n\\`https://observablehq.com/@username/title\\`\n\n見出しに日本語を使ってもURLには反映されません。そのため見出しは英数字を使うようにしてください。\n\nページ右上メニューの\\`Set URL\\`でURLをカスタムすることもできます。\n\n**ノートブックをプライベートにもどす**\n\n公開したノートブックをプライベートにもどしたい場合は、ページ右上メニューから、\\`Unpublish\\`を選択してください。\n\n**ノートブックを削除する**\n\nページ右上メニューから、\\`Move to Trash\\`を選択してください。\nノートブックはゴミ箱に移動し、30日後に消去されます。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"md`#### Live Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"{\n const dataset = [5, 25, 45, 65, 85];\n\n const div = d3.create(\"div\");\n\n div\n .selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text((d, i) => `${i}人目は、${d}点！`);\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"md`### 完成報告\n\nこれまで説明したことを自分で書いて、好きなように改変してみてください。\nノートブックを公開できたら、URLをこのセルにコメントしてください。\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`","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":984,"value":"import { mdh } from '@sugi2000/d3-6-0-migration-guide-in-japanese'","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"