例えば、pythonで機械学習のプログラムを書いて結果を可視化するといった場合、matplotlibを使うことが多いと思いますが、matplotlibで書いた図をインタラクティブに操作出来るようにするmpld3というライブラリがあるので、それを紹介します。 mpld3とは mpld3は、matplotlibで作成された図をベクタ形式の図に変換し、D3.jsによるデータ操作のHTML/Javascriptを合わせて出力するライブラリです。 出力されたHTMLをブラウザで開くと、拡大縮小やマウスオーバーでtooltipを表示したりといったインタラクティブな操作が可能となっています。 使い方 matplotlibが使えれば、とても簡単にインタラクティブな図を作ることが出来ます。まずはインストールをpipで（jinja2が必要なのでそれも一緒に）。 $ pip install jinja2 $ p
「D3.jsで円グラフになるボタン作った。」の記事に「是非ベン図も！」というリクエストをいただいたので調べてみたところ、venn.js というまんまベン図を描くためのプラグインがあったので紹介します。 このプラグインを使うとベン図(ヴェン図とも言うらしい)が非常に簡単に描画できます。 サンプル ぶっちゃけ、プラグインの「example」フォルダの中身をみてもらった方が早いと思うのですが、一応。 example <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>ベン図</title> <style> html, body, svg { width: 100%; height: 100%; } </style>
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。
circles.enter() .attr('cx', function(d, i) { return i * 280 / n + 10; }) のような座標を計算する関数が何箇所かに散らばっていた。 これ、d3.svg.line() を使ったらまとめられるし、便利な interpolate の機能も使えるよ、というのが今回のお話。 d3.svg.line() の使い方 たとえば var line = d3.svg.line() .x(function(d, i) { return i; }) .y(function(d, i) { return d * d; }); としておくことにする。line.x() とすると function(d, i) { return i; } を返してくれるので、関数を再利用してコードが読みやすくなる。line.y() も同様。 さらに、line([5,2,
d3で複数のデータファイル(jsonやcsv)を読み込む場合、以下のようにコールバック地獄に陥りやすいです。 d3.json('test.json', function(json){ d3.csv('test1.csv', function(csv1){ d3.csv('test2.csv', function(csv2){ d3.csv('test3.csv', function(csv3){ d3main(json, csv1, csv2, csv3); }); }); }); }); function d3main(){ var data = Array.prototype.slice.call(arguments); }
上記のような図を「Chord graph(コードグラフ)」というらしいです。日本語に直すと弦グラフですかね？D3.jsにはChordレイアウトが用意されているので作成するのは比較的簡単です。頑張ればNHKの参議院選挙サイトで使われていたカッコイイ！グラフも作れるかもしれません。 サンプルコード var svg = d3.select("svg") //データセットの作成 dataLength = 12; var data = d3.range(dataLength).map(function() { return d3.range(dataLength).map(function(){ return Math.floor(Math.random() *dataLength) }) }); //console.log(data); //カラースケール var color = d3.scale
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
