ITエンジニア/デザイナ向けにオープンソースを毎日紹介

開発 - グラフの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2012/12/06

表示位置をいい感じに調整してくれるネットワークグラフ「Springy」

Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。デモです。関連性が適切に見えま...

List

  • 2012/11/29

JavaScriptを使ってSVGでグラフを描く「Morris.js」

Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。二つのデータがある折れ線グラフ...

List

  • 2012/11/28

テーブルデータからCSSベースのグラフを生成「Magna Charta」

Magna Chartaはテーブルデータを読み込んでグラフを生成するJavaScriptライブラリです。Web上で奇麗なグラフを見せるためのライブラリは多いですが、そのデータ指定周りは面倒という印象があります。そこで使ってみたいのがテーブルデータをグラフにしてくれるMagna Chartaです。通常の横棒グラフと積み立...

List

  • 2012/11/21

ダッシュボード構築用UIライブラリ「Dashing」

Dashingはダッシュボード用ライブラリで、グラフを表示したり並び替えが自由にできます。システムには必ず管理インタフェースがあります。表向き華やかでも、裏のシステムは中の人用とあって粗雑なUIであるケースが多いようです。そこで使ってみたいのがDashingです。なんと奇麗なダッシュボード。ドラッグアンドドロップによる...

List

  • 2012/10/21

関連づいたオブジェクトを表現する高度なJavaScriptライブラリ「sigma.js」

sigma.jsはネットワーク図をはじめとする多数のノードが絡むグラフを描くライブラリです。有機的な要素やネットワークが重なり合っているグラフを描きたい時に使えるのがsigma.jsです。Canvasタグを使って簡単にグラフを描き出します。かなり密集したデモ。ズームイン/アウトもできます。こちらはアニメーション。動き続...

List

  • 2012/10/14

自分のプロジェクトに世界のどの人たちが注目しているのか可視化「Red Dwarf」

Red DwarfはGitHubリポジトリのスターを付けたユーザデータを取得してGoogleマップ上にヒートマップを形成するWebサービスです。GitHubで自分の(に限りませんが)リポジトリをどんな人たちがスターを付けてくれているか、それをビジュアル化するのがRed Dwarfです。マップ上でヒートマップ表示してくれ...

42850?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2010%2f06%2f2010-06-29-125609

  • Premium_s 2012/09/14

業務で使えるオープンソース(43)「ガントチャート」

プロジェクト管理に限らず、複数の関係者の時系列に沿った動きを可視化するのに便利なガントチャート。今回はガントチャートに関連したサービス、オープンソース・ソフトウェアを紹介します。

42285?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f08%2fscreenshot-2012-08-29-14.36.38_thumb

  • 2012/09/08

その場で編集。Webベースのガントチャートエディター「jQuery Gantt editor」

jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt edit...

List

  • 2012/08/31

Flexで使えるヒートマップコンポーネント「HeatMap」

HeatMapはFlex用のヒートマップ表示コンポーネントです。ユーザが何を考えながらWebサービスを使っているか、それを知るのに使えるのがヒートマップです。JavaScriptを使ってWebサイトのクリックを測定するライブラリは幾つかありますが、もしサイトがFlash/Flex構成になっているならばHeatMapを使...

List

  • 2012/08/08

色々なワードで試そう。ツイートを検索してビジュアル化「revisit」

revisitはツイートをビジュアル化してその関連性をグラフ化するソフトウェアです。Twitterでは毎日たくさんの人たちが様々な話題について話しています。そこから自社の製品やサービス、時事的なキーワードについて検索すると世の中の変化が読み取れてとても面白いです。それをビジュアル化したソフトウェアがrevisitです。...

List

  • 2012/07/25

オブジェクト同士の関連性から価値を見いだそう「VivaGraphJS」

VivaGraphJSはオブジェクト同士の関連性をビジュアル化するJavaScriptライブラリです。最近はソーシャルサービスが流行です。そこで求められるのはユーザまたはオブジェクト間の繋がりになります。それをビジュアル化するのに使えるライブラリがVivaGraphJSです。Amazonの関連書籍をたどっていくグラフで...

List

  • 2012/07/05

HTMLテーブルの内容からグラフを描画「AttC」

AttCはHTMLテーブルのデータをGoogleチャートを使ってグラフ化するソフトウェアです。数値データを表示する際に最も簡単なのは一覧表で表示することです。HTMLで言えばテーブルタグで表示するのが一番簡単でしょう。しかしそれではデータの傾向が分かりづらい…そう思ったならAttCを使ってみましょう。HTMLテーブルの...

List

  • 2012/07/03

何に使えるかな。シンプルなWebベースの年表ライブラリ「Chronoline.js」

Chronoline.jsは左右に展開するシンプルな年表ライブラリです。万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。日ごとの年表。...

List

  • 2012/06/18

クエリの改善に。MySQLのSlow Query Logを可視化する「MySQL slow-query-log Visualizer」

MySQL slow-query-log VisualizerはMySQLの時間のかかるクエリをWeb上で閲覧するソフトウェアです。MySQLには実行時間の遅いクエリをログファイルに書き出す機能があります。単純にテキストに吐かれるだけなので分析に時間がかかってしまうのではないでしょうか。そこで使ってみたいのがWebブラ...

39135?type=list&url=http%3a%2f%2fcapture.heartrails.com%2f300x300%2fborder%2fround%3fhttp%3a%2f%2fwww.jschart

  • Premium_s 2012/05/25

業務で使えるオープンソース(25)「グラフ」

今回のテーマはグラフです。仕事やレポートでグラフを使ってデータを表現する機会は多いと思いますが、安直に予め用意されているものをそのまま使っていたりするとげんなりしてしまいます。そこで効果的なグラフを作成するポイント、Webサービス、オープンソース・ソフトウェアをまとめて紹介します。

38601?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot_2012_05_08_05_11_05_thumb

  • 2012/05/19

iOSアプリでツリーマップを表示「TreemapKit」

TreemapKitはiOSにおいてツリーマップ表示を行うライブラリです。データをビジュアル化する手法は幾つかありますが、その一つにツリーマップがあります。HDD内容を表示するといった際にも良く使われています。そんなツリーマップ表示をiOS上で実現するのがTreemapKitです。デモアプリです。色分けされたツリーマッ...

List

  • 2012/05/06

CSVやJSONデータを管理、ビジュアル化「Miso Dataset」

Miso Datasetはクライアントサイド、node.jsで利用できるデータ変換&管理ライブラリです。データのビジュアル化(グラフ化)をする際に書かせないのが元データです。DBに入っていたり、XMLだったりと形式は色々考えられますが敢えてCSVを使ってグラフを描くのがMiso Datasetです。デモです。CSVデー...

37800?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f04%2fscreenshot-2012-04-10-15.36.22_thumb

  • 2012/04/22

スパークラインに対応したJavaScript製のグラフライブラリ「Grafico」

GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。サンプルです。まず棒グラフ。...

37600?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f04%2fscreenshot-2012-04-05-20.40.05_thumb

  • 2012/04/16

IE6から使えるHTML5/JavaScriptによるグラフライブラリ「envision」

envisionはHTML5/JavaScriptによるグラフライブラリです。ファイナンス系グラフ、フラクタルグラフを描けます。HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。リアルタイムグラフ。刻...

37261?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f03%2f3dsearch16_thumb

  • 2012/04/06

Silverlight、.NETアプリケーションで使えるグラフライブラリ「Dynamic Data Display」

Dynamic Data Displayは.NET向けのデータビジュアル化ライブラリです。地図へのマッピングもできます。.NETアプリケーションなどでグラフやデータのビジュアル化に使えるライブラリがDynamic Data Displayです。多彩な表現が可能です。デモです。これは世界地図です。マウスで移動したり拡大も...