d3.interpolateとattrTweenでパイチャートのアニメション効果の実現

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

パイチャートのアニメーション効果描画には、selection.attrTweenより各パイのアニメーション効果データを再計算するコールバック関数作成が必要となります

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

特定データ（例：都市名など）と不特定データ（例：数字範囲 -1～1）を分類します

色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります
特定データ：数え切れる、数が多くないなどの特徴
- 例：都市名：東京、大阪など）
- 特定の色で表現できます（赤➡東京、青➡大阪、など）
不特定データ：数えるのは難しい、数が多い、数値の範囲がある
- 例：数値：‐1～1 の間、少数点の一桁（-1, -0.9, -0.8 ．．．）で表現すると21個、少数点2桁(-1, -0.99, -09.8 ．．．)では201個となります
- 予め特定の色を用意することが難しいです

d3.scaleOrdinalで特定データの色表現

d3.scaleOrdinalは特定なデータを特定な色セットにマッピングすることに使用されます
バーチャート、凡例などはよく見られた例となります

データのセット、色のセットの数が同じの場合、1対1の関係になります

// 色セット、データセットの数：3個
var city = ["New York", "San Francisco", "Los Angeles"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

// データと色をマッピング
var color_scale = d3.scaleOrdinal()
	.domain( city )    // 入力
	.range(colors) ;  // 出力

データセットの数＞色セットの数：　最初の色から再度循環使用されます

// データセット（city）の数が色セットより多い
var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];

d3.scaleLinearで不特定データの色表現

データ範囲内の数字に応じて、自動的に色を取得する関数: d3.scaleLinearを使用します
d3.scaleLinearが連続な数字に応じて、出力範囲を比例して結果を算出します

今回のデータ入力範囲、出力の色範囲が決まった場合の例では

// 入力データ、出力の色範囲を決める
var color_scale = d3.scaleLinear()
	.domain([-1,0,1])    //　入力データ範囲：-1～1
	.range(['red','yellow','green']) //　出力色範囲： 赤―黄色―緑
    ;
var data_set =  d3.range(-1, 1, 0.2) ;// データを10個生成

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie

前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成のポイントは二つあります
d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します
d3.arcはパイの開始角度と終了角度（d3.pieの計算結果）を用いて、設定された円弧の半径でSVGの円弧の描画できるデータに変換します

d3.jsでパイチャートのアニメーション効果描画： transition、atrrTween、d3.interpolate

transitionはd3.jsのアニメーション効果描画に使用されています（cssのtransitionと同じです）

duration, ease, delayなども一緒に使用します

pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()          // アニメーション開始
	.ease(d3.easeBounce)   // アニメーション効果
	.duration(2000)        // アニメーション持続時間
	.attrTween("d", tweenPie)
    ;

function tweenPie(b) {
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);  // 角度ゼロから所定値までの変換
  return function(t) {
  		console.log( arc(i(t)) );   // コンソールにてパイの描画計算結果の確認
  		return arc(i(t)); 
    };
}

ここで、パイの開始角度がゼロから、360度に回転するアニメーション効果をします

d3.interpolate関数で各パイの開始/終了角度から所定角度までの値の換算を行います

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var forground_arc = d3.arc()
    .startAngle(0)
    .endAngle(Math.PI*2*0.75)
    .outerRadius(200)
    .innerRadius(0)
    ;
var forground_tween = d3.arc()
    .startAngle(Math.PI*2)
    .endAngle(0)
    .outerRadius(200)
    .innerRadius(0)
    ;
var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory20 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.style("fill", function(d,i){	return color_scale( d.data.val ) ; })
	.transition()
	.ease(d3.easeBounce)
	.duration(2000)
	.attrTween("d", tweenPie)
    ;
pie_chart.append("text")
	.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
	.text(function(d){return d.data.name }) 
    ;

function tweenPie(b) {
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) {	return arc(i(t)) ;    };
}

d3.interpolate関数が二つの値変換機能の理解

特に理解すべき関数：d3.interpolateがあります
これは、二つの値（input、outputの範囲）の間ある任意の値に換算します
- d3.scaleと似ています
- 範囲だけの設定（d3.scaleがdomainとrange二つあります）

変換範囲は数字、時間、配列、色などできます

// 色の範囲を設定
var i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]});

// 値を渡して、色の換算
i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]}
i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}
i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]}

シリーズ記事一覧

記事カテゴリ

html

タグ

d3.js

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要

svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点（start angle）、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
d3.jsで円弧の始点/終点計算はd3.pieで解決できます
円弧の描画にはd3.arcを使用します
各パイの色使いは：d3.jsの関数（scale）よりデータを色で表現する方法をご参考

パイチャート作成１：d3.pieで描画データをパイチャートデータへの変換

簡単な描画データ配列

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;

d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます

var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})  // 描画データのval要素をパイチャートの始点/終点に
    (data_set) ;                                      // 描画データを渡す

変換されたパイチャートデータ（pie_data）をコンソールに出力（console.log(pie_data)）して確認すると、startAngle、endAngleが作成されました

パイチャート作成２：d3.arcを利用してパイチャートを描画

d3.arcでパイチャートの外側の半径、内側の半径（>0の場合、ドーナツのように）を指定します

svgのpathエレメントを作成して、パイチャートの各円弧を描画します

var arc = d3.arc()
	.outerRadius( 200)   // パイチャートの外側の半径
	.innerRadius( 0 )      // パイチャートの内側の半径
    ;
var pie_chart = d3.select("#content")  // 描画領域の取得
	.selectAll(".arc")
	.data(pie_data)        // パイチャートデータ配列をセット
	.enter()                     // 配列分のデータを新規作成したエレメントにバインドする
	.append("g")             // 新規エレメント作成
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
    ;
pie_chart.append("path")  // pathエレメントの作成
	.attr("d", arc)              // 円弧の描画
	.style("fill", function(d,i){	return color_scale( d.data.val ) ;  })

パイチャート作成３：d3.arcで各パイに表示するテキストの描画場所を指定

各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
```
var label_arc = d3.arc()
	.outerRadius( 150 )  // 外側の半径
	.innerRadius( 150 )  // 内側の半径
    ;
```
- 外側の半径と内側の半径は同じように指定します（円の線の上に表示するようなもの）

各パイにテキストエレメントを追加して表示します

pie_chart.append("text")    //　各パイにテキストエレメントを追加
	.attr("transform", function(d) {  // テキストを指定した場所に移動させ 
    	            return "translate("+label_arc.centroid(d)+ ")" 
		})
	.text(function(d){return d.data.name })  // テキストの表示
    ;

簡単のパイチャートが完成しました。ソースは以下

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
	.sort(null)
	.value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
	.domain( d3.min(data_set, function(d){ return d.val; }), 
      			d3.max(data_set, function(d){ return d.val; }))
	.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
	.outerRadius( 200 )
	.innerRadius( 0 )
    ;
var label_arc = d3.arc()
	.outerRadius( 150 )
	.innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
	.selectAll(".arc")
	.data(pie_data)
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
	.attr("d", arc)
	.style("fill", function(d,i){
    		    return color_scale( d.data.val ) ;
		 })
pie_chart.append("text")
	.attr("transform", function(d) { 	return "translate("+label_arc.centroid(d)+ ")" })
	.text(function(d){return d.data.name }) 
    ;