25:["$","title",null,{"children":"Introduction to D3, Part 1 | Yuichi Yazaki | Observable"}] 49:T8ca,md`この時点で、D3 と HTML DOM で実行できる機能の限界に近づいています。特に、HTML は主に長方形に制限されており、[複雑なレイアウトモデル](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) によって制御されているため、視覚化のためにマークを配置したりサイズを設定したりする方法を妨げることがよくあります。前のグラフでは、データ駆動型のアプローチを使用する代わりに、基礎となるレイアウトモデルに完全に依存してバーを配置しました。この方法は、データ値を視覚プロパティにマッピングする _視覚エンコーディング_ 抽象化を破壊します。この場合、各要素はデータ値ではなく、作成された順序に基づいて配置されるため、より困難で脆弱な設計プロセスになります。ここで、棒グラフを縦棒グラフ (つまり、長い棒ではなく縦棒) に回転するとします。この場合、[インライン](https://www.w3schools.com/css/css_inline-block.asp) [レイアウト](https://www.w3schools.com/css/css_float.asp) [メカニズム](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) を使用して、積み重ねられた要素としてではなく、横に並べて棒を配置する必要があります。上記の例と同様に、このアプローチには関連するデータプロパティへの接続が同様に欠けています。そのため、HTML に固執するのではなく、[SVG (Scalable Vector Graphics)](https://developer.mozilla.org/en-US/docs/Web/SVG) に切り替えましょう。 SVG は、曲線、直線、任意の形状など、より豊富な [グラフィカルプリミティブ](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) を提供します。HTML と同様に、SVG 要素は CSS を使用してスタイル設定でき、DOM を介してプログラムで操作できます。したがって、このノートブックでこれまでに学習した内容はすべて適用されます。今度は SVG \`\` 要素を使用して、棒グラフを再作成してみましょう。`4a:T51a,{ const width = 400; const height = 200; const container = d3.create('svg') .attr('width', width) .attr('height', height); // Update the x scale here. const xscale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value)]) .range([0, width]); // Update the y scale here. const yscale = d3.scaleBand() .domain(barData.map(d => d.key)) .range([0, height]); container.selectAll('rect') .data(barData) .join('rect') .attr('x', 0) // Update the x position .attr('y', d => yscale(d.key)) // Update the y position .attr('width', d => xscale(d.value)) // Update the width .attr('height', yscale.bandwidth()) // Update the height .style('fill', d => color(d.key)) .style('stroke', 'white'); container.selectAll('text') .data(barData) .join('text') .attr('x', d => xscale(d.value)) // Update the x position .attr('y', d => yscale(d.key)) // Update the y position .attr('dx', -20) // Update the x offset .attr('dy', '1.5em') // Update the y offset .attr('fill', 'white') .style('font-size', 'small') .style('text-anchor', 'middle') .text(d => d.value); return container.node(); }4b:[{"id":"68f89ebe654f81a62174c4cf1446d2beff0b96ee642277cc4e5c81dbc57368c037d4adcd7ae174604a7b7c3be073b0dc106baee5e6004ae2ce333be09a26eeda","href":"https://static.observableusercontent.com/files/68f89ebe654f81a62174c4cf1446d2beff0b96ee642277cc4e5c81dbc57368c037d4adcd7ae174604a7b7c3be073b0dc106baee5e6004ae2ce333be09a26eeda","name":"Screen Shot 2020-03-02 at 7.13.09 AM.png","type":"image/png","lastModified":1724717325467.421,"size":20018},{"id":"f439de574431e955df9589f743d0e5d37373c2ed87ad38204dea1a5ef8474fc88879e6c50c3ba8ec82cc1f62261970a87a5c7fd1c0321cd2993270a1f3be05f1","href":"https://static.observableusercontent.com/files/f439de574431e955df9589f743d0e5d37373c2ed87ad38204dea1a5ef8474fc88879e6c50c3ba8ec82cc1f62261970a87a5c7fd1c0321cd2993270a1f3be05f1","name":"Screen Shot 2020-03-02 at 9.11.37 AM.png","type":"image/png","lastModified":1724717325467.421,"size":25363},{"id":"d6d9378d3a831b7abbd577d36861aae886588e8cb9277caa50c790dcb2ca54f1f35158297e477e03f2aa0d0804add25c1ba2784fffc3a9fba922036c46b1f1fa","href":"https://static.observableusercontent.com/files/d6d9378d3a831b7abbd577d36861aae886588e8cb9277caa50c790dcb2ca54f1f35158297e477e03f2aa0d0804add25c1ba2784fffc3a9fba922036c46b1f1fa","name":"barchart-upsidedown.png","type":"image/png","lastModified":1724717325467.421,"size":8484}] 29:{"id":"3f5cd47d4931c6e2","slug":null,"title":"Introduction to D3, Part 1","thumbnail":"0926fbb62ece356812603b866e2da7d419e0aa8b35ae71d5fa5061b5fecafe19","access_level":"public","create_time":"$D2024-08-27T00:08:45.467Z","update_time":"$D2024-08-27T00:45:37.578Z","view_time":null,"first_public_time":"$D2024-08-27T00:08:45.467Z","has_unpublished_edits":null,"fork":{"id":"97bdde7903d7036d","slug":"introduction-to-d3-part-1","title":"Introduction to D3, Part 1","owner":{"id":"33e135341fd39b6b","login":"uwdata","name":"UW Interactive Data Lab"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":1384,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3, Part 1","cells":[{"id":0,"value":"md`# Introduction to D3, Part 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"md`_(Note: this is a revised version of an [original notebook by Arvind Satyanarayan](https://observablehq.com/@mitvis/introduction-to-d3). The current notebook includes modified text and code updated for D3 v6 and higher.)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`視覚化を設計する方法は数多くあり、[Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite) のような _視覚分析文法_ や [D3.js](https://d3js.org/) のような _視覚化文法_ などがあります。\n\n視覚分析文法は、視覚化の設計を、データ・フィールドと _マーク_ と呼ばれるグラフィック・オブジェクトのプロパティ間の _マッピング_ (または _視覚エンコーディング_) を指定するプロセスに分解します。このような文法は、認識しやすい視覚化を簡潔かつ迅速に作成するのに役立ち、スプレッドシート・ツールでよく見られるチャートの類型よりも高い設計の柔軟性 (または _表現力_) を提供します。\n\nただし、視覚化の設計をこのような高レベルの用語で説明すると、作成できる視覚化の種類が制限されます。たとえば、使用可能なマークのみを使用でき、サポートされているエンコーディングチャネルにのみデータをバインドできます。\n\n表現力を高めるには、[抽象化のはしご](http://worrydream.com/LadderOfAbstraction/)を一歩下がって、_視覚分析_ 文法からより汎用的な _視覚化_ 文法に移行する必要があります。視覚化文法では、データ値をグラフィカル・マークのプロパティにマップする方法を引き続き指定しますが、このマッピングをよりきめ細かく制御するための演算子のセットが追加されました。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"md`このノートブックでは、最も広く使用されている視覚化文法の 1 つである [D3.js](https://d3js.org/) について学習します。まずは D3 ライブラリをインポートします:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`次に、作業に使用するデータセットを読み込みます。[Gapminder Foundation](https://www.gapminder.org/) によってまとめられ、[Hans Rosling の人気の TED トーク](https://www.youtube.com/watch?v=hVimVzgtD6w) で共有された、1955 年から 2005 年までの世界の健康と人口測定に関するデータセットを使用します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"gapminder = datasets['gapminder.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"aq.from(gapminder).view({ limit: 15, height: 450 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`

\n## Selections and Data Binding`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`D3 は、あらかじめ決められた一連のグラフィカルマークに限定するのではなく、より一般的なアプローチを採用しています。DOM ([ドキュメントオブジェクトモデル](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)、または Web ページのプログラムによる表現) の _任意の要素_ をデータ駆動型マークにすることができます。\n\nたとえば、データセットのサブセットを順序付きリスト (\\`

\\`) はマークです:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"// extract the 10 most populous countries in 2005\nlistData = gapminder\n .filter(d => d.year === 2005)\n .sort((a, b) => b.pop - a.pop)\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"list = {\n const fmt = d3.format(',');\n const ol = d3.create('ol');\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(listData) // provides the backing data\n .join('li') // joins data with the selection, creating 'li' elements as needed\n .text(d => `${d.country}: ${fmt(d.pop)}`) // add formatted text to 'li' elements\n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`この機能を可能にするために、D3の中核的な操作子は[_selection_](https://github.com/d3/d3-selection)（選択）です。選択は、同じタグ名、クラス属性、またはその他のサポートされている[CSSセレクタ](https://www.w3schools.com/cssref/css_selectors.asp)を共有するDOM要素のセットを指定します。\n\n選択は[\\`d3.select\\`](https://github.com/d3/d3-selection#select)および[\\`d3.selectAll\\`](https://github.com/d3/d3-selection#selectAll)関数で指定され、これらは大まかにネイティブDOMの同等物（[\\`document.querySelector\\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)および[\\`document.querySelectorAll\\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)）に対応しています。`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"md`私たちの選択をベースとして、[\\`selection.data()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_data)演算子を使用して、DOM要素をバッキングデータにバインドすることができます。そして、\\`ol.node()\\`を使用して、順序付きリストのDOMノードを表示することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"{\n const ol = d3.create('ol');\n \n ol.selectAll('li') // select all list elements (orange circle below)\n .data(listData) // bind all our data values (blue circle below)\n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"md`ただし、現在の視覚化は空白であることに注意してください。リスト項目の新しい DOM 要素はまだ作成されていません。代わりに、\\`selection.data()\\` の呼び出しは、_enter_、_update_、および _exit_ の 3 つの異なる状態を持つ _新しい_ 選択を返します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"selection = {\n const ol = d3.create('ol');\n return ol.selectAll('li').data(listData);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"datajoin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"md`バッキングデータ内のすべての値について、演算子は対応する DOM 要素が 1 対 1 で存在するかどうかを確認します。\n\n* **enter** 状態は、元の選択に対応する要素がなかったすべてのデータ値の _プレースホルダー_ を含む選択です。\n\n* **update** 状態は、バインドされたデータ値に一致する _existing_ 要素を含む選択です。\n\n* **exit** 状態は、_existing_ 要素も含むが、一致するデータ値が見つからなかった選択です。\n\n3 つの状態を個別に処理することもできますが、[\\`selection.join()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) 演算子を使用すると、より便利なインターフェイスが提供されます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"{\n const ol = d3.create('ol');\n\n ol.selectAll('li') // select all list elements (orange circle above)\n .data(listData) // bind all our data values (blue circle above)\n .join('li') // merge the 'enter' and 'update' sets, create 'li' elements as needed\n\n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"md`デフォルトでは、\\`selection.join()\\` に文字列を渡すと、入力要素は選択に追加され、終了要素は削除され、更新要素はそのまま通過します。ただし、3 つの状態を個別に処理することもできます。たとえば、以下のコードスニペットは、上記のコードの長いバージョンです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"vis = {\n const ol = d3.create('ol');\n \n ol.selectAll('li') // select all list elements (orange circle above)\n .data(listData) // bind all our data values (blue circle above)\n .join(\n enter => enter.append('li'), // <-- append an li element for each entering item\n update => update, // <-- do nothing with items that match an existing element\n exit => exit.remove() // <-- remove li elements whose backing data is now gone\n )\n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"md`データセット内の各要素に新しいリスト項目要素が作成されましたが、要素自体のコンテンツと視覚スタイルはまだ指定していません。D3 の利点は、選択を _宣言的に_ 操作できることです。つまり、セレクタによって返されたすべての項目を反復処理するのではなく (\\`document.querySelectorAll\\` を使用する場合のように)、選択全体を操作できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"{\n const ol = d3.create('ol');\n\n ol.selectAll('li') // select all list elements (orange circle above)\n .data(listData) // bind all our data values (blue circle above)\n .join('li') // merge the 'enter' and 'update' sets, create 'li' elements as needed\n .attr('class', 'country') // <-- set CSS class to 'country'\n .text(d => `${d.country}: ${d.pop}`) // <-- add text to 'li' elements\n\n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"md`Using selections, you can update the style even of elements that have already been created. For example, we can select the new list items with the CSS class \\`'country'\\` to update the style of our previous list:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"// Run this cell to recolor just the first item in the list above\nd3.select('li.country').style('color', randomColor()), null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"// Run this cell to recolor ALL items in the list above\n// Sets all items to the same randomly selected color\nd3.selectAll('li.country').style('color', randomColor()), null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"md`For the enter / update / exit cycle, matches are determined by the second argument to \\`.data()\\`, which specifies a key function. If no key function is specified, D3 conducts a join-by-index: the first data value is joined to the first DOM element, the second value to the second element, and so on. In the code for the exercise below, we instead join the data based on the country attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"md`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`Exercise: Modify the _enter_, _update_, and _exit_ functions in the code below such that entering items are colored green, updating items are colored blue, and exiting items are _not_ removed but rather colored red.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"md`You can use the sliders below to change the elements in the backing \\`listData\\` to test your changes to \\`enter\\`, \\`update\\`, and \\`exit\\`, and reset the visualization with the button.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof year = Scrubber(\n // min to max years in 5 year increments\n d3.range(d3.min(gapminder, d => d.year), d3.max(gapminder, d => d.year) + 1, 5), \n { \n autoplay: false, delay: 500, loop: false, // experiment with these settings!\n format: year => 'year = ' + year + reset, // display the variable name and force cell to rerun on reset\n initial: listData[0].year // initial year of listData elements\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof n = Scrubber(\n d3.range(0, 15, 1),\n { \n autoplay: false, delay: 500, loop: false, // experiment with these settings!\n format: n => 'n = ' + n + reset, // display the variable name and force cell to rerun on reset\n initial: listData.length // initial number of listData elements\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n const ol = d3.select(html`
`);\n \n const update = reset; // Rerun this cell when the reset button is clicked.\n \n ol.selectAll('li') // select all list elements (orange circle above)\n .data(listData) // bind all our data values (blue circle above)\n .join('li') // a selection that merges the \"enter\" and \"update\" states\n .text(d => `${d.country}: ${d.pop}`)\n \n return ol.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"{\n const ol = d3.select('ol#enter-update-exit');\n\n // use a new dataset, manipulable with the variables defined above\n const newData = gapminder\n .filter(d => d.year === year)\n .sort((a, b) => b.pop - a.pop)\n .slice(0, n);\n \n ol.selectAll('li') // select all list elements\n .data(newData, d => d.country) // bind our data values; what happens when we remove the key function?\n .join( \n enter => enter.append('li'),\n update => update,\n exit => exit.remove()\n ) \n .text(d => `${d.country}: ${d.pop}`);\n \n return newData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"md`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`Why all of this complexity? D3's data join operators give us a general way to draw our visualization's marks. As a result, we don't have to worry about any kind of iteration or branching (i.e., no \\`for\\` loops or \\`if\\` statements). We can focus on _what_ we want our visualization to look like, rather than writing out each step for _how_ it should be computed. This property is called _declarative_ (in contrast to _imperative_) specification or programming and helps keep our code more readable and understandable. And, as we'll see in [Part 2](https://observablehq.com/@uwdata/introduction-to-d3-part-2) of this introduction, D3's data join makes it more convenient to specify animated transitions as items are entering, updating, or exiting.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`
\n## A Simple Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`Before we get more complex, let's try our hand at making a simple bar chart showing the average life expectancy (\\`value\\`) for different geographic regions (\\`key\\`), using D3 to create basic HTML \\`
\\` elements.\n\nTry to recreate the bar chart below. You will want to bind the bar data to new \\`div\\` elements, style them appropriately, and add the text. One thing to keep in mind: How might you increase the size of the bars to fill the width of the screen?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"md`The current page \\`width\\` = ${width} px.` // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"FileAttachment(\"Screen Shot 2020-03-02 at 7.13.09 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"// compute average life expectancy per region ('cluster')\n// output values as 'key' (cluster) and 'value' (life_expect)\nbarData = aq.from(gapminder)\n .filter(d => d.year === 2005)\n .groupby('cluster')\n .rollup({ mean: d => op.floor(op.mean(d.life_expect)) })\n .orderby('cluster')\n .select({ cluster: 'key', mean: 'value' })\n .objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"{\n const container = d3.create('div');\n \n const data = barData;\n \n const barChart = container.selectAll('div')\n /* TODO: Add code here to generate the bar chart within the container. */\n \n barChart\n .style('background', 'steelblue') // Set the background color of the div to 'steelblue'\n .style('border', '1px solid white') // Set the border of the div as 'white'\n .style('font-size', 'small') // Set the text font size in the div to 'small'\n .style('color', 'white') // Set the text font color to 'white'\n .style('text-align', 'right') // Set the text alignment in the div to 'right'\n .style('padding', '3px') // HINT: CSS styles require units, not just numbers\n /* TODO: Add code here to finish updating the visual properties of the bars */\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`Did you find yourself \"hard-wiring\" a scale factor for the width of the bars? If so, our simple bar chart exposes one weakness in how we might specify visual encodings: The _width_ of our bars could be dependent on a magic number, which scales the data value to a pixel width. Ideally such scaling should not be brittle, it should adapt to the range of data values as well as the desired total width of the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`
\n## Scale Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`Rather than implicitly dealing with scaling issues, or introducing maintenance and readability costs associated with magic numbers, D3 offers us a variety of [scale functions](https://github.com/d3/d3-scale#d3-scale) to automatically map a _domain_ of data values to a _range_ of pixel values.\n\nFor instance, we can use the following scale to determine the width of our bars:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"xscale = d3.scaleLinear()\n .domain([0, d3.max(barData, d => d.value)])\n .range([0, width]) // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`\\`xscale\\` is a function that linearly maps an input value to the given range:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"xscale(49)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`We can now use it to scale our bar widths like so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"{\n const container = d3.create('div');\n\n container.selectAll('div')\n .data(barData)\n .join('div')\n .style('background', 'steelblue')\n .style('border', '1px solid white')\n .style('font-size', 'small')\n .style('color', 'white')\n .style('text-align', 'right')\n .style('padding', '3px')\n .style('width', d => `${xscale(d.value)}px`) // <-- Use xscale instead of a magic number\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`Scales are a workhorse of visualization design! For example, we might want to assign each bar a different color. One option to do so could involve a large ternary expression or if-else statement. We can instead use a [color scale](https://github.com/d3/d3-scale-chromatic#d3-scale-chromatic) like so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"color = d3.scaleOrdinal(d3.schemeTableau10).domain(barData.map(d => d.key)); \n// Default color schemes are here: https://github.com/d3/d3-scale-chromatic#categorical\n// Try another one! For example: d3.schemePurples[6] or d3.schemePaired","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"{\n const container = d3.create('div');\n\n container.selectAll('div')\n .data(barData)\n .join('div')\n .style('background', d => color(d.key)) // <-- Use color scale to specify the bar color\n .style('border', '1px solid white')\n .style('font-size', 'small')\n .style('color', 'white')\n .style('text-align', 'right')\n .style('padding', '3px')\n .style('width', d => `${xscale(d.value)}px`)\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`
\n## SVG: Scalable Vector Graphics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"{\n const barHeight = 25;\n const height = barData.length * barHeight;\n\n // create svg element, specify total width and height\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n // add SVG 'rect' elements for bars\n container.selectAll('rect')\n .data(barData)\n .join('rect')\n .attr('x', 0)\n .attr('y', (d, i) => i * barHeight)\n .attr('width', d => xscale(d.value))\n .attr('height', barHeight)\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n // add SVG 'text' elements for labels\n container.selectAll('text')\n .data(barData)\n .join('text')\n .attr('x', d => xscale(d.value))\n .attr('y', (d, i) => i * barHeight)\n .attr('dx', -20)\n .attr('dy', '1.25em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n // return SVG DOM element\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`HTML から SVG への移行における最も大きな変化は、バーのレイアウト方法を完全に自分で決められるようになったことです。以前は、\\`
\\` 要素がコンテンツとパディングに基づいて高さを増し、[フローレイアウトモデル](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout) に基づいて要素を次々に配置することができましたが、SVG では、すべての要素の \\`x\\`、\\`y\\` の位置と、\\`\\` 要素の \\`width\\` と \\`height\\` を明示的に設定する必要があります。\n\n仕様に _マジックナンバー_ が再び忍び込んできました。わかりますか?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"md`SVG を使用するからといって、バーの高さを固定する必要はありません。代わりに、[バンドスケール](https://observablehq.com/@d3/d3-scaleband) を使用して、SVG 要素の合計高さ (\\`150px\\`) を均等なサイズのバーに自動的に分割できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"height = 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"yscale = d3.scaleBand()\n .domain(barData.map(d => d.key))\n .range([0, height]) // Try flipping this to [height, 0] and see the effect on the bars below.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`これで、新しい \\`yscale\\` を次のように使用できます:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n container.selectAll('rect')\n .data(barData)\n .join('rect')\n .attr('x', 0)\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning bars\n .attr('width', d => xscale(d.value))\n .attr('height', yscale.bandwidth()) // <-- Band scales split a pixel range into equal-sized bands\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n container.selectAll('text')\n .data(barData)\n .join('text')\n .attr('x', d => xscale(d.value))\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning labels\n .attr('dx', -20)\n .attr('dy', '1.2em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`SVG を使用すると、棒グラフを縦棒グラフに変換することが HTML の場合よりもはるかに簡単になります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"md`以下のコードを編集して、棒グラフを水平方向から垂直方向 (上の画像のように) に変更します。_ヒント: 水平棒グラフのスケールが垂直棒グラフのスケールとどのように異なるかを考えてください。_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"md`As you work through this example, you might find that while updating the orientation is more straightforward with this approach, properly positioning the bars remains challenging. Your first attempt may result in a chart like the following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"md`This outcome is because the origin \\`(0, 0)\\` of the SVG coordinate system is in the top-left hand corner of the SVG element. Because of this idiosyncrasy, our values are mapped such that the top of the chart corresponds to zero and values increase as you move downward. To address this mismatch from our expectations, we can update the definition of our scales:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"yscaleFixed = d3.scaleLinear()\n .domain([0, d3.max(barData, d => d.value)])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"md`With this new definition, the zero point of the SVG coordinate system is mapped to the largest value in our dataset, whereas zero corresponds to our expected baseline: the height of the chart. Using the new scale, try updating your bar chart to match the original image. _Hint: The y position is the position for the top of the bars!_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`As we can see, scales really are at the heart of our visualization design process. As a result, it's often very helpful to visualize the scales themselves as axes and legends. D3 can help with this, but we first have to take a bit of a tangent...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`
\n## \\`\\`: The SVG Group Element`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"md`SVG's \\`\\` element allows us to group a set of elements together, not unlike desktop presentation packages like Keynote or Powerpoint. Once grouped, all children can be transformed together — for example, we can position the overall group rather than the individual children. Each \\`\\` also establishes its own coordinate system, with the origin \\`(0, 0\\`) in the top-left hand corner.\n\nFor example, we can rewrite our bar chart visualization using \\`\\` elements as follows. Notice that the \\`\\` and \\`\\` elements are now children of \\`\\`, inherit its data, and only need minimal positioning due to the group's \\`transform\\`.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() // <-- We use \"enter\" (not \"join\") so we can later append and only for new data.\n .append('g')\n .attr('transform', d => `translate(0, ${yscale(d.key)})`);\n\n g.append('rect')\n // We no longer need to bind data to , or specify y positions.\n .attr('width', d => xscale(d.value))\n .attr('height', yscale.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n // We no longer need to bind data to , or specify y positions.\n .attr('x', d => xscale(d.value))\n .attr('dx', -20)\n .attr('dy', '1.2em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"md`Alright, now that we've met \\`\\`, let's get back to the main event!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"md`
\n## Visualizing Scales: Axes & Legends`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"md`Axes and legends visualize our scale functions using text labels, shapes, and lines. We could construct them manually (as in [this notebook](https://observablehq.com/@d3/color-legend)) but D3 (and its developer community) offers us some helper modules to make our lives easier.\n\nLet's start with axes. With the way we're currently drawing our bar chart, we haven't left any room for axes — the bars are flush with the left and bottom sides of our SVG container. To give us the space we need, we use the [margin convention](https://observablehq.com/@d3/margin-convention):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"graphic","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"md`_Credit: [Mike Bostock](https://observablehq.com/@d3/margin-convention)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"md`Rather than only defining the \\`width\\` and \\`height\\` of our visualization, and using these variables to drive the ranges of our \\`x\\` and \\`y\\` scales, we will define an additional \\`margin\\` object with a property for each of the four sides:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"md`Our scales will then use this margin offset to determine their range:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"// Domain (data values): [0, 78], Range (pixel values): [20, width - 10]\nxMargin = xscale.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"// Remember (0, 0) is the top-left hand corner; try flipping the elements and see what happens!\n// Domain (data values): [0, 1, 2, 3, 4, 5], Range (pixel values): [height - 20, 10]\nyMargin = yscale.copy().range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`Using these scales, our bar chart currently looks like this. We now have some whitespace around the left and bottom of the SVG element, just waiting for our axes! \n\nYou may also notice that the order of our bars has switched from previous examples to account for the SVG coordinate system; the blue bar (where \\`key\\` is 0) is now positioned at the expected zero point of our future axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('border', '1px dotted #999'); // <-- A dotted border helps us see the added margin\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() \n .append('g')\n .attr('transform', d => `translate(${margin.left}, ${yMargin(d.key)})`);\n\n g.append('rect')\n .attr('width', d => xMargin(d.value) - xMargin(0)) // <-- We must subtract our left offset.\n .attr('height', yMargin.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n .attr('x', d => xMargin(d.value) - xMargin(0)) // <-- We must subtract our left offset.\n .attr('dx', -20)\n .attr('dy', '1em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`The [d3-axis](https://github.com/d3/d3-axis) module offers a variety of helper functions to draw our axes, and customize their display (e.g., how many ticks are shown, what are their values, _etc._). An axis helper is meant to be called to populate a \\`\\` element. Also note how we apply a \\`translate\\` transformation to position the axes along the edges of the SVG element, offset by our margin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('border', '1px dotted #999'); \n\n container.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n\n container.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md`Our last step is then to merge all our code together, bars + axes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() \n .append('g')\n .attr('transform', d => `translate(${margin.left}, ${yMargin(d.key)})`);\n\n g.append('rect')\n .attr('width', d => xMargin(d.value) - xMargin(0))\n .attr('height', yMargin.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n .attr('x', d => xMargin(d.value) - xMargin(0))\n .attr('dx', -20)\n .attr('dy', '1em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n container.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n\n container.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"md`残念ながら、D3 には凡例を作成するための組み込みメカニズムが用意されていませんが、[パート 2](https://observablehq.com/@uwdata/introduction-to-d3-part-2) でインタラクティブな凡例を作成するときに、独自の凡例を作成する方法を説明します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`
\n## Summary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"md`\nVega-Liteを使用した後にD3に移行すると、こう思うかもしれません：「こんな単純なチャートのために、なんて低レベルな作業が多いんだ！」*（それは間違いではありません！）* しかし、上記の例は、より複雑な様々な可視化を構築するために必要となるほとんどのコンポーネントを紹介しています。学んだ概念とユーティリティは、より野心的なチャートを作り始めると自然に身につくでしょう！\n\n[Scott Murray](https://alignedleft.com/work/d3-book-2e)から借用すると、D3はチャーティングライブラリ*ではありません*。むしろ、可視化の*カーネル*と呼ぶ方が適切です。D3は、データの[読み込み](https://github.com/d3/d3-fetch)と[解析](https://github.com/d3/d3-dsv)、DOM要素の[バインド](https://github.com/d3/d3-selection)と[エンコード](https://github.com/d3/d3-scale)、[力学モデルによるレイアウト](https://github.com/d3/d3-force)や[地図投影法](https://github.com/d3/d3-geo)のようなより高度なレイアウトの計算など、可視化を構築するための一連のモジュールを提供しています。\n\nこのノートブックは、D3が提供する全機能のほんの一部を紹介したに過ぎません。幸いなことに、D3は最も広く使用されているJavaScriptライブラリの1つであるため、学習に活用できる豊富で多様な例が存在します。[@d3 Observableノートブック](https://observablehq.com/@d3)を熟読するか、[キュレーションされた例のギャラリー](https://observablehq.com/@d3/gallery)を見てみることをお勧めします。\n\nアニメーションやインタラクションを含む、さらに高度な内容の準備ができたら、[パート2に進んでください](https://observablehq.com/@uwdata/introduction-to-d3-part-2)！`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"md`
\n### Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`This notebook is a revised version of Arvind Satyanarayan's [Introduction to D3](https://observablehq.com/@mitvis/introduction-to-d3), which in turn was heavily inspired by Mike Bostock's [Let's Make a Bar Chart](https://bost.ocks.org/mike/bar/) series. Jane Hoffswell made major contributions to this revision.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"md`
\n## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"datasets = require('vega-datasets')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"randomColor = () => `#${Math.floor(Math.random()*16777215).toString(16)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null