2d:null 2e:["$","title",null,{"children":"D3を学ぶ: スケール/尺度 | Takuo Suzuki | Observable"}] 33:T8ba,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }34:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1619712263473.29,"size":329437}] 31:{"id":"d2f93fa1406b4533","slug":"learn-d3-scales-ja","title":"D3を学ぶ: スケール/尺度","thumbnail":"2b51d1b3a7aa67580c068c5222bc4e67096c7703b5ee9b1607ca1b24e46a106c","access_level":"public","create_time":"$D2021-04-29T16:04:23.473Z","update_time":"$D2021-08-06T15:33:13.058Z","view_time":null,"first_public_time":"$D2021-05-05T15:06:08.834Z","has_unpublished_edits":null,"fork":{"id":"68c99514280dff28","slug":"learn-d3-scales","title":"Learn D3: Scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024"},"version":4425,"publish_version":4425,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null}],"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":{"title":"D3を学ぶ: スケール/尺度","cells":[{"id":75,"value":"md`# D3を学ぶ: スケール/尺度\n\nD3 にある、グラフィクのツールの中で、もっとも重要なのは、データの分布を決める*スケール/尺度* です。\nスケールを学ぶために、美味しそうなフルーツを使ったデータセットを用いてみましょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3042,"value":"md`私たちは一般的に次元を空間的なものと考えています。例えば、3次元空間における位置などですが、次元は空間的なものである必要はありません。例えば、上の図の各果物の数のように、量を示す場合もありますし、*名前*のような名目的なものもあります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3825,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3828,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"md`Jacques Bertin氏が*Semiology of Graphics*で説明しているように、点や線のようなグラフィカルな記号は、「ノットイコール(≠)、イコール(≡)、数量化された順序（Q）や非数量化された順序（O）を表し、グループやヒエラルキー、垂直方向の動き」を位置、サイズ、色などを使って表現できると述べています。\nグラフィカルな記号の特性は視覚的変数になります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"md`

From *Semiology of Graphics*, colorized by the author.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3394,"value":"md`良くみられるビジュアライゼーションのように、下の図の棒グラフは2つの異なる値を表現に活用しています。*名前*の値は*y軸*にマッピングされ、*個数*の値は*x軸*にマッピングされています。\nこれらのマッピングは、*x*と*y*のスケールにより実装されています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3396,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"y = d3.scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"md`(コードを自由に変更して、どのように変わるか見てください)\n\nD3のスケールには様々な種類があります。どれを使うかは、抽象的な値（定量的か名目的か?）と視覚的な変数（位置か色か?）によって決まります。ここでは、*x*は数が定量的で棒の長さが*数量*の値に比例する必要があるので[リニアスケール](/@d3/d3-scalelinear)、*y*は名前が名目的で幅が太いので[バンドスケール](/@d3/d3-scaleband)としています。.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3474,"value":"md`各スケールは、データ（*domain*）と視覚的変数（*range*）との対の対応によって構成されています。例えば、xドメインの下側の値（0）は*x*-rangeの下側の値（チャートの左端）に、ドメインの上側の値（最大カウント）はレンジの上側の値（右端）に対応しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3539,"value":"md`リニアスケールの場合、domainとrangeは連続した間隔(minからmaxまで)になります。一方バンドスケールの場合、domainは個別の値（🍊, 🍇, 🍏, ...）の配列になり、rangeは連続した値になります。バンドスケールでは、rangeを個別のパディング付きの棒に自動的にスライスします。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"md`上記のスケールは、メソッド連鎖(*method chaining*) を利用しています。*scale*.domainのようにスケールを設定するメソッドはスケールを返すので、このような簡潔なスタイルが可能です。これを通常の書き方にすると以下のようになります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"{\n const x = d3.scaleLinear();\n x.domain([0, d3.max(fruits, d => d.count)]);\n x.range([margin.left, width - margin.right]);\n x.interpolate(d3.interpolateRound);\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"md`スケールメソッドは、引数なしで呼び出すと、関連する値を取得するためにも利用できます。これは、新しいスケールを生成したり、デバッグを行う際に便利です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"md`D3 scale とはなにでしょうか？これは関数になります。この関数を使うと、与えた値（カウントなど）に対応する視覚的な値（*x*ポジションなど）が返されます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"y(\"🍇\") // the y-coordinate for name = grapes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2720,"value":"x(21) // the x-coordinate corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"x(0) // the x-coordinate corresponding to count = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4191,"value":"md`[通常](/@d3/margin-convention)、ほとんどのD3のチャートは、スケール範囲にマージンを適用し、軸を表示するためのスペースを作ります。そのため、*x*(0)はゼロではなく、左マージンのサイズになっています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"md`xyポジションは、[*x* = 640, *y* = 30]のようにポイントを座標で取得します。ただ、棒グラフのバーには幅と高さがあります。そのため、この座標の位置は右上の座標になります。バーの幅は、 *x*(*count*) - *x*(0)となり、バーの高さは、*y*.bandwidth()で定義された高さになります。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3541,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3595,"value":"x(21) - x(0) // the width of the bar corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3620,"value":"md`それでは、さらにスケールがどのように使われているのか詳しくみてみましょう。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"viewof count = {\n const form = html``;\n form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3607,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"md`上記のコードは、HTMLタグを使ったテンプレートになります。[html`…`](https://github.com/observablehq/stdlib/blob/master/README.md#html) はObservable で HTML マークアップを利用する上で非常に便利です。バーの幅など、動的な要素には\\${…}のような記述を行うことができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"md`しかし、HTMLの本当の魅力は、埋め込まれた形式がDOM要素、あるいはDOM要素の配列であることです。このため、データをSVG要素にマッピングすることで、すべてのバーを同時に生成することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"md`(これらのnest形式では[svg`…`](https://github.com/observablehq/stdlib/blob/master/README.md#svg)を利用しています。Observable のテンプレートでは、HTMLのマークアップではなく、SVGマークアップを利用しています。なぜならば、SVGは独自のXML名前空間を持っているからです。SVG要素を囲む要素としては、svg`…` か html`…`を使えますが、SVG要素際は名前空間の関係でSVG形式で記述する必要があります)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"md`スケールを使用するもう一つの利点は、D3は位置スケールのエンコーディングを明示的に示すための軸があり、可読性を高める為の目盛りが付いていることです。このような軸はチャートの読みやすさを向上させ、理解を深めるために役立ちます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4347,"value":"md`これまでHTMLの宣言を行うことで回避していましたが、D3 axes は [selections](https://github.com/d3/d3-selection) を必須にしています。上の記述のようにペアにして利用することも可能です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"md`軸を足すには、まず G 要素を svg`…`を利用して生成する必要があります。そしてこの要素を[d3.select](https://github.com/d3/d3-selection/blob/master/README.md#select)に渡して選択します。次に [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) を実行して軸を G 要素にレンダリングし、ドメインパスを削除するためにもう一度実行します。最後に、[*selection*.node](https://github.com/d3/d3-selection/blob/master/README.md#selection_node)を呼び出してG要素を取得し、それを外側のリテラルに埋め込みます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"md`位置は、視覚的変数の中で一番重要なので、この章では位置について重点的に書いてきました。\nただ、スケールは例えば色のような視覚的変数にも使えます。🌈`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3763,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3940,"value":"md`上のコードはシーケンシャルスケールを定義しています。シーケンシャルスケールはリニアスケールに似ていますが、範囲の代わりにインターポレーターを使用しています。インターポレーターとは、0から1の間の値を受け取り、対応する視覚的な値を返す関数です。多くの場合、このインターポレーターはD3に[組み込まれた配色](/@d3/color-schemes)の一つです。\n\nこのカラースケールをcountに渡すと、対応する色の文字列が返ってきます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3918,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3921,"value":"color(21)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3953,"value":"md`これで棒グラフに冗長なエンコーディングを追加することができ、カウントを色にマッピングするとともに、Xポジションにもマッピングすることができます。色のエンコーディングを記録するために、位置のエンコーディングの軸と同じように、[D3の色の凡例](/@d3/color-legend)をインポートします。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3767,"value":"legend({color, title: \"Number of fruit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"md`ビジュアライゼーションの中には、SVGやCanvasに組み込まれていない特殊なグラフィックマークを必要とするものがあります。次は、基本的な棒グラフを超えて、D3の図形を見てみましょう。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"