D3.js
データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方
- 作者: 古籏一浩
- 出版社/メーカー: SBクリエイティブ株式会社
- 発売日: 2014/07/01
- メディア: Kindle版
- この商品を含むブログを見る
付録 サーバのログを読み出し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); }); }
感想
やっと読み書き完了した。 とてもわかりやすくてよかった。 実際思い通りに図を描くには苦労すると思うが、とっかかりとしてよいと思ってる。