D3.js

データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方

データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方

付録 サーバのログを読み出しOSのシェアを円グラフで表示する まで。 読了。

サーバのログをどうすればよいかわからなかったので、適当にRubyで。 JavaScriptのmatch、改行文字がひっかからない?とりあえず本題以外、ということで別文字で引っかけた。

require "log4r"
include Log4r

os = [:Android] * 10 + [:Windows] * 30 + [:Mac] * 3 + [:iOS] * 5
log = Logger.new "log"
log.outputters = FileOutputter.new(
  "log",
  filename: "sample.log",
  formatter: PatternFormatter.new(
    pattern: "%d [%l] %m", date_format: "%Y/%m/%d %H:%M:%S"
  )
)

loop do
  log.info os.sample
  sleep 1
end
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>
    <style media="screen">
      svg { width: 320px; height: 240px; border: 1px solid black; }
    </style>
  </head>
  <body>
    <h1>OSのシェアを1分ごとに表示</h1>
    <div id="time"></div>
    <svg id="myGraph"></svg>
    <script src="./sample_ex7.js" charset="utf-8"></script>
  </body>
</html>
var svgEle = document.getElementById("myGraph");
var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));
var colors = d3.scale.category10();
var dataset = [20, 20, 20, 20, 20];

setInterval("drawPie()", 1000 * 10);
drawPie();

var pie = d3.layout.pie();
var arc = d3.svg.arc().outerRadius(100);
var groupEle = d3.select("#myGraph")
  .selectAll("g")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");

var pieEle = groupEle.append("path")
  .attr("class", "pie")
  .attr("d", arc)
  .style("fill", function(d, i) {
    return colors(i);
  });

function drawPie() {
  d3.text("./sampleex/sample.log", function(error, data) {
    var win = (data.match(/Windows/g) || "").length;
    var mac = (data.match(/Mac/g) || "").length;
    var ios = (data.match(/iOS/g) || "").length;
    var android = (data.match(/Android/g) || "").length;
    var all = data.match(/INFO/g).length;
    var etc = all - win - mac - ios - android;
    dataset = [win, mac, ios, android, etc];
    d3.select("#time").text(new Date());
    pieEle.data(pie(dataset)).attr("d", arc);
  });
}

f:id:yossk:20150627222115j:plain

感想

やっと読み書き完了した。 とてもわかりやすくてよかった。 実際思い通りに図を描くには苦労すると思うが、とっかかりとしてよいと思ってる。