${formatDate(d.date)}\n${formatClose(d.close)}

44:["$","title",null,{"children":"D3 を学ぶ: インタラクション | Takuo Suzuki | Observable"}] 4c:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1623516967999.17,"size":48822}] 48:{"id":"ffa72ecfbe000656","slug":"learn-d3-interaction-ja","title":"D3 を学ぶ: インタラクション","thumbnail":"125f5fb17ffc2e3a819dce8a9318eeaa1dcede7a6923c8a33a6b784c57aee7eb","access_level":"public","create_time":"$D2021-06-12T16:56:07.999Z","update_time":"$D2021-08-20T17:25:15.301Z","view_time":null,"first_public_time":"$D2021-06-12T16:56:31.469Z","has_unpublished_edits":null,"fork":{"id":"78807d1c5e2d1bcd","slug":"learn-d3-interaction","title":"Learn D3: Interaction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024","bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false},"version":1263,"publish_version":1263,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5baa9b3ce38aa33a","slug":"d3","title":"D3 を学ぶ","owner":{"id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki"}},"type":"notebook","body":{"titling":"auto","title":"D3 を学ぶ: インタラクション","cells":[{"id":34,"value":"md`# D3 を学ぶ: インタラクション\n\nデザインに必要な情報は、殆どの場合、静的なイメージで表現するには多すぎます。なので、デザインは、どのように情報を表現するかではなく、膨大な量の情報の「何」を表現し、「何」を表現しないかの取捨選択が重要です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`コンピュータのおかげで、デザインを見ているユーザーが各自の興味に合わせてグラフィクを操作したり調整することができるようになりました。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`一方、ユーザーがインタラクションを通じてデザインを操作や調整できることは諸刃の剣でもあります。なぜならば、インタラクションは、ユーザーにより多くの情報を与えることが可能ですが、ユーザーに能動的に操作してもらうことを強いる必要があります。ですので、気をつけないと、重要なインサイトをユーザーがクリックやコントロールしない所に隠してしまい、発見してもらえない可能性があります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`伝えたいものが明確ならば、インタラクションを考慮するよりも、効果的に伝える静的なグラフィックデザインを優先すべきです。一方で、ユーザーに未知のものを探求させたいのであれば、誰も見たこと無く理解されづらいグラフィックデザインよりも、インタラクションを有効に活用した方が良いです。（ただし、[Vega-Lite](https://vega.github.io/vega-lite/)のような、探求のためのビジュアライゼーション手法も検討してみてください）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`インタラクションを学ぶうえでは、Ben Shneidermanの[information-seeking mantra](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf) が優れたガイドラインです。そこには、\n\n> まずは「全体の概要」を把握させる、 \n> 「ズームとフィルタ」を用いて、 \n> ユーザーのニーズに合わせて詳細を見せること。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`全体の概要とは、グラフィックの初期段階の状態で、その目的は、すべてを表示することではなく（それは不可能です）、すべてのデータを「マクロ」で見せることです。全体の概要は、ユーザーの探求心を刺激するための地図として機能します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`ズームとフィルタは、ユーザーが興味を持ったトピックを深掘りするために表示内容を抜粋する手法です。以前、チャートを個別の年にフィルタするコントロールを見ましたが、[自由形式のズーム](/@d3/zoomable-area-chart)、[パン](/@d3/pannable-chart)、[フォーカスとコンテキスト](/@d3/focus-context)もあります。複数の時系列を比較する場合には、[複数行のチャートの例](/@d3/multi-line-chart)のようにフィルタリングが必要かもしれません。[ブラシで描ける散布図のマトリックス](/@d3/brushable-scatterplot-matrix)もご覧ください。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md`詳細を表示することで、ユーザーは視覚的な情報に頼ってざっくりした数字では無く、チャートから正確な値を得ることができます。これはツールチップなどを利用することもできます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`ツールチップの1つのアプローチは、SVGにタイトル要素を配置することです。下記の例では、グラフにマウスオーバーすると、その日のAppleの株価が下に表示されます`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`上の図では，${(data.length - 1).toLocaleString(\"en\")}個の透明なrect要素が，チャートの横方向と縦方向に，隣接するデータポイントに沿って配置されています（これは[d3.pairs](https://github.com/d3/d3-array/blob/master/README.md#pairs)を利用して計算しています)。マウスがrectにホバーすると、title要素のテキストが表示されます。ツールチップは時系列のチャートにおいては、マウスのx位置を関数として、xの値に対応するyの値を表示する際に適しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`さらに一般的なアプローチとしては[ボロノイ図のオーバーレイ](https://github.com/d3/d3-delaunay)があります、これはマウスに最も近いデータポイントがツールチップを決定します。(ボロノイ図は、わかりやすくするために下に描かれています...そして、普通は見せないでしょうが、ちょっとかっこよく見えるから敢えて表示しています。)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"voronoi = d3.Delaunay\n .from(data, d => x(d.date), d => y(d.close))\n .voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`ネイティブのツールチップにもいくつかの欠点があります。例えば表示に時間がかかることや、モバイルブラウザがサポートしていないこと、特にボロノイ図を使用している場合、どのデータポイントがツールチップに関連付けられているかが必ずしも明確ではないことです。\n\nですので、少し工夫するだけでカスタムツールチップを作成できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"{\n const tooltip = new Tooltip();\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`ここでは要素の順序は重要になります。なぜなら、SVGはz-orderをサポートしていないので、ツールチップを線と軸の上に描画するには、最後に記述する必要があります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`ネイティブのツールチップは自動的に表示されますが、カスタムツールチップには通常、イベントリスナーが必要です。これらの関数は、ユーザーが要素の上にマウスを移動するなどのアクションを実行したときに、ブラウザによって呼び出されます。上のリスナーは、イベントがトリガーされたときに何を表示するかを知るために、データ（*aと*b）をクロージャに取り込みます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`(ObservableのHTMLテンプレートリテラルは、現在イベントリスナーを属性としてサポートしていないため、Object.assignを使用しています。私たちの新しい[ハイパースクリプトリテラル](/@observablehq/htl)はイベントリスナーをサポートしていますので、代わりにそれを使用することを検討してください。近い将来、標準ライブラリのアップグレードを予定しています)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"md`カスタムツールチップは以下のクラスで実装されています。埋め込み用の *tooltip*.node プロパティ（SVG g 要素）と、必要に応じてツールチップを更新する *tooltip*.show および *tooltip*.hide メソッドを公開しています。これにより、ツールチップの起動方法を柔軟に変更することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"class Tooltip {\n constructor() {\n this._date = svg``;\n this._close = svg``;\n this.node = svg`\n \n ${this._date}\n ${this._close}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.date)},${y(d.close)})`);\n this._date.textContent = formatDate(d.date);\n this._close.textContent = formatClose(d.close);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md`上のチャートはObservableのHTMLテンプレートリテラルを使用していますが、D3スタイルで同じチャートを実装することも可能なので、用途に合わせて使ってください。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"{\n const tooltip = new Tooltip();\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(data));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(d3.pairs(data))\n .join(\"rect\")\n .attr(\"x\", ([a, b]) => x(a.date))\n .attr(\"height\", height)\n .attr(\"width\", ([a, b]) => x(b.date) - x(a.date))\n .on(\"mouseover\", (event, [a]) => tooltip.show(a))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`マウスオーバーイベントをトリガーとするツールチップは、チャートのホバー可能な領域ごとに個別の要素を必要とするため、計算コストがかかります。ですので複雑なチャートでは、必要に応じてホバーされる部分を計算することで、パフォーマンスを向上させることができます。\n\nここで紹介する時系列データのように、1次元でソートされたデータの場合、特に効率的なアプローチは[bisection](https://observablehq.com/@d3/d3-bisect) on *mousemove*です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"{\n const tooltip = new Tooltip();\n return Object.assign(html``, {\n onmousemove: event => tooltip.show(bisect(data, x.invert(event.offsetX))), \n onmouseleave: () => tooltip.hide()\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`Bisection(二等分)は、マウスのすぐ左にあるデータポイントを返しますが、インタラクションの目的では、マウスに最も近い（*x*に沿った）データポイントを見つける方が良いでしょう。そこで、以下の関数では、まず指定された日付のBisection(二等分)を行い、その後、次のデータポイントがより近いかどうかをチェックします。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).left;\n return (data, date) => {\n const i = bisectDate(data, date, 1);\n const a = data[i - 1], b = data[i];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`上のすべての例は、ローカルなインタラクションを示しています。つまり、チャートとの相互作用は、チャート自体にのみ影響を与えます。Observableの最もエキサイティングな点の一つは、言語レベルのリアクティビティにより、あるセルでのインタラクションがノートブック内の他のセルに波及し、グローバルなインタラクションを簡単に実現できることです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"md`Observableのほとんどのインタラクティブコントロールは、[ビュー](/@observablehq/introduction-to-views)として実装されています。ビューを作るには、HTMLのinput要素を返すviewofセルを定義します。これにより、入力要素の現在の値がノートブックの他の部分に表示されます。\n\n例えば、スライダーで数値を制御する例を見てみましょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"viewof number = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`また入力すると値が表示されるテキストフィールドや、いくつかの選択肢から1つを選択するドロップダウンメニューがあります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"viewof name = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"viewof fruit = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"fruit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`(以前、[アニメーション](/@d3/learn-d3-animation?collection=@d3/learn-d3)用のジェネレータを利用したのを覚えていますでしょうか？viewof演算子を使うと、Observableは暗黙のうちに[非同期の入力ジェネレータ](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input)を作成し、ビューを操作するたびに新しい値を生成します)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`ビューはHTMLの入力に限る必要はありません。唯一の条件は、ビューが値のプロパティを公開し、その値が変化するたびに入力イベントを発することです。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`チャートもビューになります。下のチャートは、マウスが移動すると[合成入力イベントをディスパッチ](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)します。\n\n${hover ? `Apple stock closed at ${formatClose(hover.close)} on ${formatDate(hover.date)}.` : `チャートの上にマウスをホバーしてみてください`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"viewof hover = {\n return Object.assign(html``, {\n value: null,\n onmousemove: event => {\n event.currentTarget.value = bisect(data, x.invert(event.offsetX));\n event.currentTarget.dispatchEvent(new CustomEvent(\"input\"));\n }, \n onmouseleave: event => {\n event.currentTarget.value = null;\n event.currentTarget.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"hover","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`Observableコミュニティのおかげで、多くのカスタム入力が再利用できるようになりました。Jeremyの [inputs bazaar](/@jashkenas/inputs)には様々な便利なオプションがあります。また、アニメーションのために、[スクラバー]/@mbostock/scrubber)を検討してみてください。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"viewof i = Scrubber(d3.range(100), {\n autoplay: false,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"md`このチュートリアルでは、ツールチップ、イベントリスナー、ボロノイオーバーレイ、ビューなど、さまざまなインタラクションテクニックを紹介しましたが、まだまだ紹介しきれていないことがたくさんあります。まず、D3の再利用可能なビヘイビアである[ブラッシング](https://github.com/d3/d3-brush)、[ズーム](https://github.com/d3/d3-zoom)、[ドラッグ](https://github.com/d3/d3-drag)については触れていません。自習用には、[D3ギャラリー](/@d3/gallery)や[コレクション](/@d3?tab=collections)に例があります）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`むしろ、基本を押さえた今だからこそ、一歩下がって今後の方向性を考える良い機会だと思います。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`---\n\n## Appendix\n\nFor more on interaction, read Gregor Aisch’s [defense of interactive graphics](https://www.vis4.net/blog/2017/03/in-defense-of-interactive-graphics/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"line = d3.line().x(d => x(d.date)).y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .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":53,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .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":51,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"formatClose = d3.format(\"$.2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null