タグ「開発 - グラフ」の記事一覧
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
2012/05/25
業務で使えるオープンソース(25)「グラフ」
今回のテーマはグラフです。仕事やレポートでグラフを使ってデータを表現する機会は多いと思いますが、安直に予め用意されているものをそのまま使っていたりするとげんなりしてしまいます。そこで効果的なグラフを作成するポイント、Webサービス、オープンソース・ソフトウェアをまとめて紹介します。
2012/05/19
iOSアプリでツリーマップを表示「TreemapKit」
データをビジュアル化する手法は幾つかありますが、その一つにツリーマップがあります。HDD内容を表示するといった際にも良く使われています。そんなツリーマップ表示をiOS上で実現するのがTreemapKitです。 デモアプリです。色分けされたツリーマップが表示されます。 タップするとその場所のサ...
2012/05/06
CSVやJSONデータを管理、ビジュアル化「Miso Dataset」
データのビジュアル化(グラフ化)をする際に書かせないのが元データです。DBに入っていたり、XMLだったりと形式は色々考えられますが敢えてCSVを使ってグラフを描くのがMiso Datasetです。 デモです。CSVデータをグラフにプロットしています。 データはこのようなCSVです。 コード部...
2012/04/22
スパークラインに対応したJavaScript製のグラフライブラリ「Grafico」
Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。 サンプルです。まず棒グラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 こんな複雑な感じにも。 棒グラフ。 積...
2012/04/16
IE6から使えるHTML5/JavaScriptによるグラフライブラリ「envision」
HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウス...
2012/04/06
Silverlight、.NETアプリケーションで使えるグラフライブラリ「Dynamic Data Display」
.NETアプリケーションなどでグラフやデータのビジュアル化に使えるライブラリがDynamic Data Displayです。多彩な表現が可能です。 デモです。これは世界地図です。マウスで移動したり拡大もできます。 等高線のような表示です。マウスがある場所と同じ高さが線で描かれます。 線が移動...
2012/03/29
む、無茶を…。CUIながらグラフを表示するネットワークモニタ「Speedometer」
サーバのネットワーク速度は適切な運用に際して必要な情報です。GUIであればグラフィカルな、CUIであれば数値を出力するものはありますがSpeedometerはCUIでありながらグラフィカルな表示を行うモニタソフトウェアです。 インストールします。Ubuntuならapt-getで一発インストー...
2012/02/14
表現力の高さに驚き。HTML5/Canvasグラフライブラリ「Flotr2」
これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラ...
2012/02/09
Gitリポジトリに蓄積された歴史を可視化、グラフ化する「GitStats」
Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化して...
2012/01/05
Closure Toolsを使った折れ線グラフライブラリ「Closure Charts」
GoogleがリリースしているJavaScriptツール群がClosure Toolsです。そんなツールを使って作られたチャートライブラリがClosure Chartsになります。 主に折れ線グラフ用です。 色を変えたり、多数の要素をグラフに配置できます。 マウスを当てるとその部分にポインタ...
2011/12/22
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ「JavaScript InfoVis Toolkit(JIT)」
JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit(JIT)です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフで...
2011/12/21
折れ線、エリアグラフに対応したJavaScriptグラフライブラリ「Rickshaw」
RickshawはJavaScriptのグラフライブラリです。 棒の積み上げグラフです。 カラーも色々用意されています。 表示はダイナミックに変更できます。 グラフの種類変更のダイナミックです。 スムーズさを変更できます。 曲線のグラフです。 ウェーブのようなグラフも描けます。 最もシンプル...
2011/12/13
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ「Highcharts」
Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。...
2011/11/30
試そう!ターミナル上でカラーのグラフを描く「term-canvas」
コンソールで表現できるのは白と黒、できてもANSIカラーレベルのテキスト描画と思われてきました。しかしそんな現状を一気に打ち破ってしまうのがterm-canvasです。なんとターミナル上でCanvasを使った図形描画を行います。 サンプルを実行しました。ターミナル上にグラフが描かれます。なん...
2011/11/29
世界各国の移住状況を知ろう。HTML5製の移住者マップ「Migrations Map」
大抵の人は産まれた国で一生を過ごします。しかし中には移住する人もいます。ある国を中心にして、国民がどこへ移動しているのか、逆にどこから移住者がやってくるのか、それをビジュアル化したのがMigrations Mapです。 格好いい地図が表示されます。最初にダウンロードが行われて、コンテンツがオ...
2011/11/26
インパクト大!コンソールの中に棒グラフを表示する「spark」
文章の中に埋め込める、高さ1行程度のグラフがスパークラインです。使いどころによってはユーザビリティが高まります。そんなスパークラインをコンソールの中に出現させてしまうのがsparkです。 ヘルプです。sparkの後に値をカンマつなぎで入力します。このヘルプだけでかなりわくわくしますね。 見頃...
2011/11/18
すごい!単なるテーブルを検索、ソート、グラフ化に対応するFirefoxアドオン「TableTools2」
配布はAdd-ons for Firefoxにて行っています。 インストールします。インストール後、一度再起動が必要です。 任意のテーブルでコンテクストメニューが表示されます。 テーブルのデータを使ってグラフを描くことができます。 棒グラフなど、複数のグラフに対応しています。 検索フィルタを...
2011/11/17
スマートフォンにも使える。SVGでグラフを描画するPythonライブラリ「svgplotlib」
Webシステムを作っていて悩みどころになりやすいのがグラフ表示です。もし利用言語がPythonで、スマートフォンへの対応も考えないといけない時にはSVGでグラフを描画するsvgplotlibが良い選択肢になるかも知れません。 グラフの例です。上にコードが書いてある通り、30度ごとに中心から7...
2011/09/29
多彩なグラフ表示に対応したAndroid用グラフライブラリ「AChartEngine」
AChartEngineはAndroid用のオープンソース・ソフトウェア。グラフというのは数値の一覧以上にインパクトある結果につながることがある。特にスマートフォンのように表示領域が限られる場合、グラフを使った方がデータの遷移が分かりやすくなる。 折れ線 グラフを必要とするアプリも多い。体重...












アンケート