2015年9月2日水曜日

d3.jsでチャートを作る パイチャート

前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はパイチャートについて。

前々回はこちら
d3.jsでチャートを作る ラインチャートとバーチャートを2つのy軸上に描画する
前回はこちら
d3.jsでチャートを作る ツールチップ



SFiddleはこちら

弧上に描画するためのarc()とパイ上に配置するためのpie()を用意する。それと配色用のcolor。
 var arc = d3.svg.arc()
              .innerRadius(50)
              .outerRadius(radius);
  var pie = d3.layout.pie()
              .value(function (d) { return d.sales; })
              .sort(null) // ソートはしない
              .startAngle(-Math.PI / 3) // -60度から
              .endAngle(Math.PI / 3);   // 60度まで
  var color = d3.scale.category10();

データをpie()にかませて配置用のデータへと変換する。
var container = svg.selectAll('g')
                      .data(pie(data))
                      .enter()
                      .append('g');

弧を描画する。
// 色をつけて弧を描画する
  container.append('path')
              .style("fill", function(d, i) { return color(i); })
              .attr('d', arc);

arc.centroid()を使用すると真ん中の座標が簡単に取得できる。
// 真ん中に文字を描画する
  container.append('text')
              .attr('class', 'label value')
              .attr('transform', function(d, i) {
                  return 'translate(' + arc.centroid(d) + ')';
              })
              .attr('text-anchor', 'middle')
              .text(function (d, i) { return d.value; });

弧の外側に文字を描画するには三角関数を使用して座標を算出する。またtext-anchorを角度によって変更している。
// 外側に文字を描画する
  container.append('text')
              .attr('class', 'label name')
              .attr('transform', function(d, i) {
                  // 弧の外側を取得。パイチャートでは90度(Math.PI/2)の位置が0度計算になっているので注意。それなのでxは-する。yはSVGだと向きが逆になるので+する
                  var labelR = radius + 20
                      , x = labelR * Math.cos((d.endAngle - d.startAngle) / 2  + d.startAngle - Math.PI/2)
                      , y = -labelR * Math.sin((d.endAngle - d.startAngle) / 2 + d.startAngle + Math.PI/2);
                  return 'translate(' + x + ','+ y + ')';
              })
              .attr("text-anchor", function(d) {
                  var angle = (d.endAngle + d.startAngle) / 2;
                  return 0 < angle && angle < Math.PI ? "start" : "end";
              })
              .style("fill", function(d, i) { return color(i); })
              .text(function(d, i) { return data[i].busho; });

d3.jsでチャートを作る ツールチップ

前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はおもにツールチップ的なものについて。ツールチップ的な部分以外は前回のものとあまり大差ないため省略するので詳細は前回を参照してもらいたい。

前回はこちら
d3.jsでチャートを作る ラインチャートとバーチャートを2つのy軸上に描画する
次回はこちら
d3.jsでチャートを作る パイチャート



JSFiddleはこちら

X軸。今回はtimeを使用している。またrange()の指定は少しずらすために30からとなっている。
// x軸は日付。y軸にくっつけたくなかったので30からはじめている
  var x = d3.time.scale().nice()
              .domain(d3.extent(data, function (d) { return d.date; }))
              .range([30, width]);
  var yearMonthFormat = d3.time.format("%Y/%m");
  var xAxis = d3.svg.axis().scale(x)
                  .orient('bottom')
                  .tickFormat(yearMonthFormat);
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + height + ')')
      .call(xAxis);

ツールチップ。
// ツールチップ
  var focus = svg.append('g')
          .attr('class', 'focus');
  focus.append('rect')
           .attr({ x: -10, y: -25, width: 105, height: 50 });
  // circle
  focus.append('circle')
          .attr('class', 'profit')
          .attr({ r: 5, cy: -15 });
  focus.append('circle')
          .attr('class', 'sales')
          .attr({ r: 5 });
  focus.append('circle')
          .attr('class', 'expense')
          .attr({ r: 5, cy: 15 });
  // text
  focus.append('text')
          .attr('class', 'profit')
          .style('text-anchor', 'end')
          .attr({ x: 90, y: -15, dy: '.35em' });
  focus.append('text')
          .attr('class', 'sales')
          .style('text-anchor', 'end')
          .attr({ x: 90, dy: '.35em' });
  focus.append('text')
          .attr('class', 'expense')
          .style('text-anchor', 'end')
          .attr({ x: 90, y: 15, dy: '.35em' });

オーバーレイとツールチップの表示場所の指定。チャート上のどこにマウスがあっても表示したいのでオーバーレイはチャート全体を覆っている。mousemove()の冒頭でマウスの現在座標からその位置よりも左側に位置するデータをbisector()で取得している。それだけだとマウスが二つのデータ間にある場合、必ず左側のものが選ばれてしまうのでマウスとデータ間の距離を比較してツールチップを表示するべきデータを取得している。このx.invert()の使用方法はtime()でしか使用できないので注意。ordinal(), linear()の場合(linear()は違うのかも。調査していないので不明)はデータの幅とrange()、マウスの座標から当該のデータを探し出す必要がある(詳細は下記参考を参照してもらいたい)。
// オーバーレイ
  svg.append('rect')
      .attr('class', 'overlay')
      .attr({ width: width, height: height })
      .on('mouseover', function () { focus.style('display', 'block'); })
      .on('mouseout', function () { focus.style('display', 'none'); })
      .on('mousemove', mousemove);

  var bisectDate = d3.bisector(function (d) { return d.date; }).left
      , formatValue = d3.format(",.2f")
      , formatCurrency = function (d) { return formatValue(d) + '億円'; };
  function mousemove() {
      var x0 = x.invert(d3.mouse(this)[0])
          , i = bisectDate(data, x0, 1);
      if (i < data.length) {
          var d0 = data[i - 1],
              d1 = data[i],
              d = x0 - d0.date > d1.date - x0 ? d1 : d0; // 一番近いデータを取得
          focus.attr('transform', 'translate(' + (x(d.date)) + ',' + y(d.sales) + ')');
          focus.select('text.profit').text(formatCurrency(d.profit));
          focus.select('text.sales').text(formatCurrency(d.sales));
          focus.select('text.expense').text(formatCurrency(d.sales - d.profit));
      }
  }

参考
Inversion with ordinal scale

d3.jsでチャートを作る ラインチャートとバーチャートを2つのy軸上に描画する

d3.js周りを調査して、簡易なチャートをいくつか作ったので後々のためにまとめておく。今回は2つのy軸上にラインチャートとバーチャートをプロットする。

他のチャートはこちら
d3.jsでチャートを作る ツールチップ
d3.jsでチャートを作る パイチャート



JSFiddleに動作するサンプルをあげてあるので詳細はそちらを参考にしてもらいたいが、簡単に解説しておく。なおd3.jsはdata, enterの仕組みが理解できていないと一見しても意味不明なコードになるのでチュートリアル的なものをどこかで一読されることをお勧めする。

JSFiddleはこちら

データを用意する。
var data = [
      { name:'Branch A', sales: 5400, forecast: 7000 },
      { name:'Branch B', sales: 2800, forecast: 4500 },
      { name:'Branch C', sales: 3600, forecast: 3300 },
      { name:'Branch D', sales: 1700, forecast: 4700 },
      { name:'Branch E', sales: 2200, forecast: 5500 }
  ];

svg要素を用意する。
var margin = { top: 50, right: 100, bottom: 40, left: 40 }
      , width = 800 - margin.left - margin.right
      , height = 300 - margin.top - margin.bottom
      , svg = d3.select('#item-container').append('div').append('svg')
                  .attr('width', width + margin.left + margin.right)
                  .attr('height', height + margin.top + margin.bottom)
                  .append('g')
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

X軸。ここでscaleにはordinal()を使用している。他に線形のlinear()と時系列用のtime()が使用できる。
// x軸は文字列なのでordinalにするのとrangeRoundPointsでちょうど良い場所を取得する
  var x = d3.scale.ordinal()
              .domain(data.map(function (d) { return d.name; }))
              .rangeRoundPoints([0, width], 0.5);
  var xAxis = d3.svg.axis().scale(x)
                  .orient('bottom');
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + height + ')')
      .call(xAxis);

   // x軸のTickの文字を斜めにする
   svg.selectAll(".x text")
        .attr("transform", function (d) {
            return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";
        });

一つ目のY軸。domain()に0から売り上げと予想の最大値を指定している。またnice()でよさげにtickを調整してもらう。range()がheightから0になっているのはSVGの(0, 0)は左上をさすため。
// 一つ目のy軸。売り上げと予想から最大値を取得する
  var y = d3.scale.linear().nice()
              .domain([0, d3.max(data, function (d) { return Math.max(d.sales, d.forecast); })])
              .range([height, 0]);
  var yAxis = d3.svg.axis().scale(y)
              .orient('left')
              .ticks(5);
  var gy = svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis);
  // テキストを表示する
  gy.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', 16)
      .style('text-anchor', 'end')
      .text('万円');

二つ目のY軸。右端にtransform.translateで移動する。また横線を引くためにd3が追加してくれたtickのg要素があるのでそこに横線用のline要素を追加して描画している。
// 二つ目のy軸。売り上げと予想の割合を表示する
  var y2 = d3.scale.linear().nice()
              .domain([0, 150])
              .range([height, 0]);
  var yAxis2 = d3.svg.axis().scale(y2)
              .orient('right');
  var gy2 = svg.append('g')
      .attr('transform', 'translate(' + width + ',0)')
      .attr('class', 'y2 axis')
      .call(yAxis2);
  // 横線を描画する
  gy2.selectAll('g').filter(function(d) { return d; })
      .append('line')
      .attr('x1', -width)
      .attr('x2', 0)
      .classed('minor', true);
  // テキストを表示する
  gy2.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', -10)
      .style('text-anchor', 'end')
      .text('%');

ラインチャート。二つ目のY軸で高さを算出している。
// ラインチャート。売り上げと予想の割合を表示する
  var linePlaceHolder = svg.append('g');
  var percentLine = d3.svg.line()
              .x(function (d) { return x(d.name); })
              .y(function (d) { return y2((d.sales / d.forecast) * 100); });
  linePlaceHolder.append("path")
                  .datum(data)
                  .attr("class", "line percent")
                  .attr("d", percentLine);

バーチャート。一つ目のY軸で高さを算出している。またX軸のscaleでrangeRoundPoints()を指定しているおかげでちょうど良い感じの座標が取得できている。ここらへんは色々いじってためしてもらいたい。
// バーチャート。売り上げと予想を表示する
  // bars
  var bar = svg.selectAll('.bar')
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'bar')
      .attr('transform', function(d) { return 'translate(' + (x.rangeBand() / 2 + x(d.name)) + ',0)'; });

  // 売り上げ
  bar.append('rect')
      .attr('class', 'sales')
      .attr('x', -10)
      .attr('y', function (d) { return y(d.sales); })
      .attr('height', function (d) { return height - y(d.sales); })
      .attr('width', 10);

  // 予想
  bar.append('rect')
      .attr('class', 'forecast')
      .attr('y', function (d) { return y(d.forecast); })
      .attr('height', function (d) { return height - y(d.forecast); })
      .attr('width', 10);

2015年3月12日木曜日

libgdxで2つ目のゲームを作ったので宣伝

スマホ用のゲームを作りました。

・作ったゲーム
スーパーホッケー

Get it on Google Play


・感想(ゲーム開発全般)
昨年中にこのゲームはリリースする予定だったのが、やる気の低下やらDragon Age Inquisitionやら、さらに延期したMy締め切りである一月中という目標も低下したやる気ではかなわず、結局Android版ができたのは二月末。毎月簡単なゲームをポンポンリリースしていこうかと思っていたけど、いやー、大変すわ、これは。おもにやる気の部分で。結局このゲーム用に凝ったものを作る気持ちが出てこなかったのでスーパーバレーボールから画像を流用しまくってお茶を濁すことに。なんだろ、多分これ作っても見返りほとんど無いしなぁ、って思いがゲーム作りたいって気持ちより強くなっちゃってやる気がでてこなかったんだろうな。次回はもっと新しいことにチャレンジしよう。じゃないと面白くないね。

・感想(libgdx周り)
libgdxでの開発は大分なれた。次回はfontやらsoundあたりをしっかりと組み込んでみようかな、と思案中。

2015年2月19日木曜日

.NETプログラム実行時にDLLの参照エラーになったときようのツール

実行時にDLLが見つからずにエラーになるのはままあることで原因を特定するのはさほど難しくないけれど面倒な作業である。とくにライブラリで参照しているDLLと呼び出し元のプロジェクトで参照しているDLLに差が出ることは、Nugetでパッケージを取得することが増えた昨今はよく起こる。

ということが今の職場でよく起きてそれを調べる用のツールを作ったので公開する。

Missing Reference Finder
https://github.com/yooontheearth/missing-reference-finder



使い方はいたって簡単。Pathにbin等のフォルダを指定してcheckボタンを押下するだけ。指定のフォルダかGACにないものはMISSING扱いになる。