D3.js 3.5.9

今回はスケールです。スケールとは入力ドメインを出力レンジにマップする関数のことでです。 入力ドメインとは入力データの値の取りうる範囲、出力レンジとは出力値の取りうる範囲のことです。
実際には入力ドメインにはデータの範囲、出力レンジには画面上の表示範囲を指定します。

html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。

---javascript11.ts---

function show11()
{
   var width: number = 500;
   var height : number = 100;
   var padding:number = 25;   // オフセット値
   
   var svg = d3.select("body")
               .append("svg")
               .attr("width", width )
               .attr("height", height );
   
   var dataset = [
                  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
                 ];

   // 円の x 成分 の入力ドメインと出力レンジを設定
   // 入力ドメインは入力値の範囲、出力レンジは画面表示上の大きさの範囲を指定
   var xScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, d3.max(dataset, (d) => {                     // 入力ドメイン：0〜データの最大値
                            return d[0];                                         // x成分を出力
                          })])   
                        .range([padding, width - padding * 2]);                  // 出力レンジ：0〜SVGの横幅( 適当に調整している )

   // 円の y 成分 の入力ドメインと出力レンジを設定
   var yScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, d3.max(dataset, (d) => {                     // 入力ドメイン：0〜データの最大値
                            return d[1];                                         // y成分を出力
                          })])   
                        .range([height - padding, padding]);                     // 出力レンジ：0〜SVGの縦幅いっぱいの範囲( 適当に調整している )
                                                                                 // y 方向は原点が左上となるため、右下を原点にするために範囲を逆転して設定する

   // 円の半径の入力ドメインと出力レンジを設定
   var rScale = d3.scale.linear()
                        .domain([0, d3.max(dataset, (d) =>{
                            return d[1];
                          })])
                        .range([2, 5]);
                     
   // 円描画
   var circles = svg.selectAll("circle")
                    .data(dataset)
                    .enter()
                    .append("circle");

   // d: 値
   circles.attr("cx", (d) => {
                         return xScale(d[0]);
                      })
          .attr("cy", (d) => {
                         return yScale(d[1]);
                      })
          .attr("r", (d) => {
                         return rScale(d[1]);
                      })
          .attr("fill", "green");

   // テキスト描画
   var texts = svg.selectAll("text")
                    .data(dataset)
                    .enter()
                    .append("text");

   texts.attr("x", (d) => {
                       return xScale(d[0]);
                    })
        .attr("y", (d) => {
                       return yScale(d[1]);
                    })
        .attr("font-family", "sans-serif")
        .attr("font-size", "15")
        .attr("fill", "black")
        .text((d) => {
                  return d[0] + "," + d[1];
               });
}