2c:null 2d:["$","title",null,{"children":"D3 チュートリアル： 15 スケール | SUGIMOTO Tatsuo | Observable"}] 32:T1178,md`### 散布図をスケールする散布図のデータセットをもう一度見てみましょう。 const dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; この \`dataset\` が配列の配列だったことをおぼえていますか？　各内部配列の最初の値を X 軸に、二番目の値を Y 軸にマップしたのでした。ではまず X 軸から始めましょう。まず X の値を一つ一つチェックします。どうやら 5 から 480 の間に収まっているようですね。もう少し余裕を持たせて、入力ドメインを 0, 500 あたりにするのはどうでしょう。 … え？　何か変ですか？　美しくない？　もっとコードを柔軟に、スケーラブルに書くべきだろう？　そうすれば将来データが変更になってもそのまま使える？　 ……なるほど！実はドメインに固定値を設定しなくても、\`min()\` や \`max()\` のように、その場でデータ解析を行える便利な配列関数が D3 にはあります。たとえば次のコードは、各内部配列の X の値をループし、最も大きな値を返します。 d3.max(dataset, function(d) { // 480 が戻る return d[0]; // 各内部配列の最初の値を参照 }); ここまで説明したことを使って X 軸のスケール関数を作ってみましょう。 const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([0, w]); まず、このスケール関数を \`xScale\` と名付けている点に注意してください。もちろんどんな名前をつけても構わないのですが、\`xScale\` という名前にしておけば、これが何をする関数なのか一目瞭然です。次に注意してほしいの入力ドメインの最小値です。ここではゼロにしていますが、最大値と同様、min()を用いて動的に計算することもできます。ドメインの最大値には dataset の最大値（すなわち 480 )がセットされます。最後の行で、出力レンジを 0 から w の範囲にセットしています。後者は SVG の横幅でした。 Y 軸のスケール関数もほぼ同様に作成できます。 const yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([0, h]); X 軸のコードと異なっている箇所は、まず \`max()\` 関数で参照しているのが d[1]、すなわち各内部配列の 2 番目の値であること。それと \`range()\` の最大値が w ではなく h であることです。以上で二つのスケール関数が完成しました。あとはこれをコードに組み込むだけです。元のコードでデータの値ごとに circle を生成する部分を修正します。 .attr("cx", function(d) { return d[0]; }) 円の X 座標、すなわち \`cx\` 属性に、元の値ではなくスケールした値を設定します。 .attr("cx", function(d) { return xScale(d[0]); }) Y 軸についても同様に修正します。 .attr("cy", function(d) { return d[1]; }) やはり \`cy\` 属性をスケール関数で設定します。 .attr("cy", function(d) { return yScale(d[1]); }) 円の座標にあわせて、テキストラベルの座標も修正しなければなりません。次の行を… .attr("x", function(d) { return d[0]; }) .attr("y", function(d) { return d[1]; }) 同様にスケール関数で書き換えます。 .attr("x", function(d) { return xScale(d[0]); }) .attr("y", function(d) { return yScale(d[1]); }) こうなりました！ ![Scatterplot using x and y scales](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/1.png) [サンプル画面はこちらです。](http://alignedleft.com/tutorials/d3/scales/2.html) [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-1) 前章の散布図に比べて見た目の変化はありませんが、がっかりする必要はありません。中身はうんと進歩しています。`33:T16aa,md`### ブラッシュアップお気づきのとおり、この散布図は Y の値が小さいデータほど上に、大きいデータほど下に表示しています。 SVG の座標系では左上が原点だからです。これを直観に合うよう上下逆転させることも、スケールを使えばごく簡単にできます。単に yScale 関数の出力レンジを変更するだけです。 .range([0, h]); を .range([h, 0]); と書き換えます。 ![Scatterplot with y scale inverted](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/2.png) [サンプル画面です。](http://alignedleft.com/tutorials/d3/scales/3.html) [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-2) これで yScale 関数の入力値が小さいほど大きな値を返すようになりました。つまり入力値が小さいほど circle と label 要素は画像の下の方へ配置されるようになったのです。本当に簡単ですね！しかし図を見ると表示領域からはみ出している要素があります。これを解決するために padding 変数を導入します。パディングとは、表示領域の内側余白のことです。 const padding = 20; 2つのスケール関数のレンジを設定するときにこの padding 分を計算に入れるのです。 xScale 関数の元のレンジは range([0, w])でした。これを .range([padding, w - padding]); と変更します。 yScale 関数のレンジは range([h, 0]) でした。同様に .range([h - padding, padding]); と変更します。この変更によって、SVG 領域の端から上下左右それぞれ 20 ピクセルずつのパディングが確保されました。 ![Scatterplot with padding](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/3.png) しかしこれでもまた一番右のテキストラベルが領域からはみ出しています。パディングのうち、xScale の右側部分だけ倍にしてみましょう。 .range([padding, w - padding * 2]); ![Scatterplot with more padding](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/4.png) OK です！　 [ここまでのサンプル画面はこちら](http://alignedleft.com/tutorials/d3/scales/3.html)。 [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-3) もう一工夫してみましょう。現在は circle の半径には対応する Y の値の平方根をセットしています。ちょっとしたハックですが、どんなときでも便利に使えるとは限りません。半径の計算にもスケール関数を使ってみましょう！ const rScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([2, 5]); このスケール関数を半径 r の属性の設定に使います。 .attr("r", function(d) { return rScale(d[1]); }); これはなかなかちょっとした工夫です。なぜなら、これで円の半径が常に[2, 5]の範囲に収まることが保証されるからです（正確には「常に」ではなく「ほとんどの場合」です-- 章末の clamp() の項参照）。データの値が最小値の 0の場合、得られる半径は 2（つまり直径 4 ピクセル）となり、最大値の場合、得られる半径は 5（つまり半径 10 ピクセル）となるのです。 ![Scatterplot with scaled radius](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/5.png) [サンプル画面です。](http://alignedleft.com/tutorials/d3/scales/4.html) [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-4) この例はスケール関数を、軸の値を求めるためにではなく、視覚的な効果のために使う最初の例でした。最後に、これでもまだスケールの威力が実感できないという人のために、データセットにもう一つ配列 [600, 150]を追加してみましょう。 ![Scatterplot with big numbers added](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/6.png) どうでしょう！　 [サンプル画面をご覧ください。](http://alignedleft.com/tutorials/d3/scales/5.html) [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-5) ここで注目すべき点は、右上に新しい円が追加されたことで、元の円がすべて、互いの相対的位置関係を維持しつつも、距離を詰めながら左下に移動したことです。さて、この章の締めくくりに、スケールが秘めている凄さをもう一つお伝えしたいと思います。実はこの段階で SVG のサイズを変更すると、すべての要素がそれにあわせてスケールするようになっているのです。 SVG の h を 100 から 300 に変更してみます。他は一切変更しません。 ![Large, scaled scatterplot](http://alignedleft.com/content/03-tutorials/01-d3/150-scales/7.png) 再度、どうでしょう！　 [更新したサンプル画面です。](http://alignedleft.com/tutorials/d3/scales/6.html) [Observableのサンプル](https://observablehq.com/@sugi2000/d3-tutorial-15-6) このすごさをうまくお伝えできていれば良いのですが！　例えばクライアントから突然画像サイズを 600 から 800 ピクセルに変更したいと連絡があっても、もはや徹夜で修正作業に追われる必要はないのです。このチュートリアル（と D3 の素晴らしいビルトインメソッド）が、読者の貴重な睡眠時間の確保に役立つことを願ってやみません。 `34:[] 30:{"id":"5cf5c5f55edd94f5","slug":"d3-15","title":"D3 チュートリアル： 15 スケール","thumbnail":"c68eee7f6e7a5a8c03b7ba93c09b9d742bb3748662e6af1955d6c6fa7268a1b2","access_level":"public","create_time":"$D2018-11-21T01:42:19.082Z","update_time":"$D2020-11-12T13:49:58.939Z","view_time":null,"first_public_time":"$D2018-11-21T02:40:08.986Z","has_unpublished_edits":null,"fork":{"id":"919291cbe918d877","slug":"d3-14","title":"D3 チュートリアル： 14 散布図の作成","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":"starter_2024"},"version":129,"publish_version":129,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d18af1c9be52102e","slug":"d3","title":"D3 Tutorial Japanese D3チュートリアル日本語版","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"type":"notebook","body":{"titling":"auto","title":"D3 チュートリアル： 15 スケール","cells":[{"id":0,"value":"md`# D3 チュートリアル： 15 スケール\n\n「スケールとは、入力ドメイン（領域）を出力レンジ（範囲）へとマッピングする（対応づける）関数である」\n\nと D3 の作者、マイク・ボストック氏は [D3 のスケール](https://github.com/d3/d3-scale)を定義しています。\n\nデータを視覚化した場合、必ずしも元の値がうまくデータ表示領域に収まるとは限りません。\nその場合、元の値を適切な値にマップすることでスムーズな視覚化が可能になります。\nそのための簡単な手段を提供するのがスケール関数です。\n\nD3 のスケールは、自分で定義して使う**関数**です。\nスケール関数を生成後、呼び出して値を渡すことにより、適切にスケール（縮尺）された値が戻ります。\nスケール関数は好きな数だけ定義し、使うことができます。　\n\nスケールと聞くと、数値を示す目盛りのように、何か目に見えるものを想像しがちですが**そうではありません！**　\nD3 における目盛りとは、**軸**の構成要素のことです。\nスケールを視覚的に表現したものが軸なのです。\nスケールとは数学的な関係を示すものであって、それ自体は目に見えるものではありません。\nスケールと軸は、互いに関係はしているものの、異なった概念であることを理解しておきましょう。\n\nスケールには指数、対数などいろいろな種類がありますが、この章で扱うのは普通の線形スケールです。\n線形と書くと難しそうですが、要は小学校で習ったグラフの X 軸、Y 軸のような、等間隔の縮尺のことです。\n線形スケールを理解しておけば、他のスケールも簡単に理解できます。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### リンゴとピクセル\n\n次のデータセットを、街道沿いの果物屋さんで売られているリンゴの月ごとの売上げだと思ってください。\n\n const dataset = [ 100, 200, 300, 400, 500 ];\n\nなかなか立派な数字ですね。\n月を追うごとにリンゴの売り上げが100個ずつ伸びています。\n実に景気の良い話です。\nこの繁盛ぶりを示すために、月々の売り上げの急激な伸びを棒グラフにするとします。\nデータの数値を棒の高さで表しましょう。\n\nこれまでのグラフの解説では、元のデータをそのまま表示する値としてきました。\n単位の違いは無視してきたのです。\n同じ方法ですと今回のリンゴの売り上げの 500 個という数字も、そのまま 500 ピクセルの棒の高さになってしまいます。\n\n一見これで問題は無さそうですが、もし来月の売り上げが 600 個になったらどうでしょう？ \nそして一年後、1800 個のリンゴが売れたら？ \n棒グラフを表示するために、ひと回り大きなディスプレイに買い替えるべきでしょうか？\n\nここでスケールの出番です。\nリンゴはピクセルではありません（もちろんオレンジでもありません）。\nリンゴからピクセルに転換するためにスケールが必要となるのです。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### ドメインとレンジ\n\nスケールの**入力ドメイン**とは、入力データの値の取りうる範囲のことです。\n上記リンゴの売り上げデータでは、100 から 500（すなわちデータセットの最小値と最大値）、あるいはもう少し広く取ればゼロから 500 が入力ドメインとなります。\n\n一方、スケールの**出力レンジ**とは、出力値の取りうる範囲のことです。\n通常その値は、画面表示用のピクセル単位となります。\n出力レンジを決めるのはあなたです。\n情報のデザイナーとしてあなたがこれを決めるのです。\nもしリンゴ売上棒グラフの高さを、最小 10 ピクセル、最大 350 ピクセルとしたいのなら、10 から 350 が出力レンジとなります。\n\nたとえば入力ドメインが 100,500、出力レンジが 10,350 のスケールを作ったとしましょう。\nそのスケールに 100 を入れると 10 が戻ります。500 を入れれば 350 が返ります。\n300 を渡せばちゃんと 180 が出てきます（300 はドメインの中央値であり、180はレンジの中央値です）。\n\nこのドメインとレンジの関係を、上下二つの軸に並べて視覚化してみましょう。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`**入力ドメイン**と**出力レンジ**の用語は混同しやすいので、しっかりおぼえておきましょう。\n「入力」ときたら「ドメイン」です。\n「出力」なら「レンジ」。\n繰り返してください。\n\n 「入力！」「ドメイン！」\n 「出力！」「レンジ！」\n 「入力！」「ドメイン！」\n 「出力！」「レンジ！」\n\nおぼえましたね？\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`### 正規化\n\nもしすでに正規化（※）の概念をご存知の方は線形スケールも理解しやすいと思います。\n線形スケールとは、正規化に他ならないからです。\n\n（※ 訳注：ここでいう正規化とは数学の用語で、ベクトルにおける正規化のこと。\n線形空間のベクトルのノルムを 1 にするような演算を施すこと。規格化。）\n\n正規化とは、元の数値を、その取りうる最小値と最大値に基づいて、0 から 1 の間の値に変換する処理のことです。\nたとえば一年 365 日の中の 310 日目は、一年間のうちのおよそ 0.85、あるいは 85% に変換されます。\n\n線形スケールを適用するということは、実は D3 に数学の正規化処理を実行させているだけなのです。\n入力値をドメインに基づいていったん正規化し、次にその正規化した値を出力範囲にスケールしているのです。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### スケールの生成\n\nD3 のスケールは、\\`d3.scale\\` に目的のスケールのメソッド名を指定することで生成されます。\n今回は線形スケールですので \\`scaleLinear()\\` を指定します。\n\n const scale = d3.scaleLinear();\n\nこれだけです！　\nこの時点ですでに変数 \\`scale\\` には関数が代入されており、入力値を受け取ることができます。\nここで \\`const\\` 宣言に惑わされないようにしましょう。\n変数には JavaScript 関数も代入できるのです。\n\n scale(2.5); // 2.5 が戻る\n\nまだドメインもレンジの設定も行っていないので、この関数は入力を出力に 1:1 のスケールで変換します。\nすなわち、入力値をそのまま返すだけです。\n\nスケールに入力ドメインを設定するため、\\`domain()\\` メソッドに 100,500 を配列として渡します。\n\n scale.domain([100, 500]);\n\n出力レンジの設定も、\\`range()\\` で同様に行います。\n\n scale.range([10, 350]);\n\nこのように別々に分けて書いても良いのですが、チェインして1行にまとめることもできます。\n\n const scale = d3.scaleLinear()\n .domain([100, 500])\n .range([10, 350]);\n\nこれで \\`scale\\` の準備は整いました。\n\n scale(100); // 10 が戻る\n scale(300); // 180 が戻る\n scale(500); // 350 が戻る\n\n通常、スケール関数を単独で使うことはなく、\\`attr()\\` 等のメソッド内で呼びます。\nさて、いよいよ前章で作成した散布図による視覚化に、動的スケールを適用していきます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`### 他のメソッド\n\n\\`d3.scaleLinear()\\` のメソッドの中から、特に便利なメソッドを簡単に紹介しておきます。\n\n- [nice()](https://github.com/d3/d3-scale/blob/master/README.md#continuous_nice) : range() で指定した任意の入力ドメインの両端を一番近い区切りの良い数値（丸め値）まで拡張します。\nD3 Wikiでは次のように説明しています。\n「たとえば \\`[0.20147987687960267, 0,996679553296417]\\` というドメインに対して \\`nice\\` ドメインは \\`[0.2, 1]\\`となる。\\`0.20147987687960267\\` のような数字が苦にならないという特殊な人を除けば、このメソッドは役立つでしょう」\n- [rangeRound()](https://github.com/d3/d3-scale/blob/master/README.md#continuous_rangeRound) : range() の代わりに rangeRound() を使うことでスケールの出力値は整数値に四捨五入されます。このメソッドが役に立つのは、シェイプに正確なピクセル値を設定したい場合などで、アンチエイリアスによるぼやけた輪郭が回避できます。\n- [clamp()](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) : デフォルトでは線形スケールは設定した出力レンジ外の数値を返すこともあります。たとえば設定した入力ドメイン外の数値が与えられた時、スケールは出力レンジ外の対応する値を返します。しかし、スケールに .clamp(true) メソッドを適用すると、すべての出力値は設定した出力レンジに収まるようになります。この場合、レンジ外の出力値は、レンジの最小値か最大値のいずれか近い方の値に丸められます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`### 他のスケール\n\nこの章で解説した scaleLinear 以外にも D3 にはスケール用の組込メソッドがいくつかあります。\n\n- [scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#scaleIdentity) : 入力と出力の比が 1:1 のスケール。\nおもにピクセル座標を求めたいときに役立ちます\n- [scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) : 平方根（ SQuare RooT ）スケール\n- [scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) : 累乗（ POWer ）スケール\n- [scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) :対数（ LOGarithmic ）スケール\n- [scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) : 量子スケール。\n線形スケールの一種で出力レンジが離散値となるスケール。ある範囲の出力値を一つの値にまとめたいときに使います\n- [scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) : 分位スケール。\n量子スケールと似ていますが、入力ドメインに任意の離散値をマップできます。\n- [scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) : 序数スケール。出力レンジとして量的でない値を使います。「リンゴ」と「オレンジ」を比較する場合などに最適です。\n\n次章は軸 → \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"