タグ「開発 - グラフ」の記事一覧
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
2012/02/14
表現力の高さに驚き。HTML5/Canvasグラフライブラリ「Flotr2」
これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラ...
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」
-
admin
- ソフトウェア ,Web ,オープンソース
- JavaScript ,MIT License ,グラフ ,プレミアム ,HTML5
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用のオープンソース・ソフトウェア。グラフというのは数値の一覧以上にインパクトある結果につながることがある。特にスマートフォンのように表示領域が限られる場合、グラフを使った方がデータの遷移が分かりやすくなる。 折れ線 グラフを必要とするアプリも多い。体重...
2011/08/09
ドリルダウンできるWebベースのツリーマップグラフライブラリ「webtreemap」
webtreemapはJavaScript製のフリーウェア（ソースコードは公開されている）。情報のビジュアル化はとても重要だ。特に文字や数字だけの羅列になっている情報は適切に並べたりフィルタリングすることでとても見やすく、内容が把握できるようになる。 Webベースのツリーマップ グラフを使っ...
2011/06/22
Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く「Yokul」
YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。 サンプル Google C...
2011/06/14
Web上でヒートマップを簡単に実現するHTML5/JavaScriptライブラリ「heatmap.js」
heatmap.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。グラフには様々な種類があるが、とりわけ作るのが難しそうなグラフにヒートマップがある。一定の範囲における影響度を表現したり、ユーザの動きを可視化するのに使われたりする。 デモ 動線を可視化することによってサ...
2011/05/26
どんな可能性があるか。バイナリの可視化ソフトウェア「BinVis」
BinVisはWindows用のオープンソース・ソフトウェア。一般的にデータは目に見ることができない。見たとしても0/1の羅列でしかない。だがその組み合わせの結果によって写真ができたり、音楽が流れたりする。インターネットでさえバイナリのやり取りの結果で成り立っている。 バイトクラウド そんな...
2011/05/06
ExcelやCSV、Googleドキュメントで簡単に時系列変化型ヒートマップを実現「OpenHeatMap」
OpenHeatMapはJavaScript/Flash製のオープンソース・ソフトウェア。データをビジュアル化するととても面白い情報が見えてくる。それが現実世界の情報と結びついていると特に面白い。位置情報はその最たるものと言えるだろう。 Twitterのビジュアル化 ただ数値だけを見せられて...
2011/05/06
状況を楽しくビジュアル化する「StatusPanic」
StatusPanicはPHP製のオープンソース・ソフトウェア。情報は見えるようにしてはじめて意味を持つ。ただ流していたり、リストにしていても面白くない。目の前にあるデータをいかにビジュアル化して楽しむか、その観点が必要だ。 棒グラフ プロジェクト管理、バグフィックス、メールサポート…どれも...
2011/04/28
業務に、自作のWebサービスに。Web用グラフライブラリ×36種
システムは最終的に何らかのデータをアウトプットします。例えば請求書などの帳票であったり、レポートとして出力される場合もあります。レポートで出力される場合も、テーブル組の一覧表として出す場合もあれば、データの変動を追うグラフを出力する場合もあります。 一覧表で数字だけを追いかけても見えてこ...
2011/04/14
使い道色々。jQueryを使ってSparklineグラフを描く「Peity」
PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある...
アンケート