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

開発 - グラフの記事一覧

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

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

もっと見る

List

  • 2013/11/25

Viz.js – Web上でGraphvizをSVGでレンダリング

フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。そこでさらに再利用性を高めてくれるのがViz.jsです。Webベ...

List

  • 2013/11/20

Pizza Pie Charts - レスポンシブで使えるSVGの円グラフ

他のグラフにも対応して欲しい!円グラフは複数の情報がどれくらいのシェアを占めているのかを表すのに向いています。そんな円グラフをWeb上で手軽に扱えるようにしたJavaScriptライブラリがPizza Pie Chartsです。さらに円グラフはSVGで作られており、Retinaなどの高画質ディスプレイやもちろんスマート...

List

  • 2013/10/22

CSVデータをベクターグラフィックスで表現「Raw」

RawはJavaScript製のオープンソース・ソフトウェア(LGPL)です。表計算で作ったデータというとグラフで表すのが普通だと思います。しかしそれをさらに一歩越えてグラフィカルに表現してくれるのがRawです。一例です。上がデータ部、下にあるツリーマップがそれを描画したものです。グラフは色々と用意されています。こちら...

List

  • 2013/09/16

gnuplotをJavaScriptに変換。Web上で高度な3Dグラフを描画「gnuplot-JS」

gnuplot-JSはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。3Dグラフを描く際などによく使われるソフトウェアがgnuplotです。高度なグラフを描けるのがメリットですが、ローカルに落として使うのが面倒に感じている人もいるのではないでしょうか。そこで使...

List

  • 2013/08/21

Web上でインタラクティブな図を描く「JointJS」

JointJSはJavaScript製のオープンソース・ソフトウェア(Mozilla Public License)です。Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいので...

List

  • 2013/07/18

統計データを誰でも使いやすくするR製Webアプリケーションフレームワーク「Shiny」

ShinyはR製、GPL v3のオープンソース・ソフトウェアです。統計情報を誰でも扱いやすくするためにWebブラウザ上で使えるようにしたいが、サーバサイドの言語を覚えるのが面倒なんて場合に使って欲しいWebアプリケーションフレームワークが登場しました。それがShinyです。なんとRだけでWebアプリケーションが作れてし...

List

  • 2013/07/07

Canvasを使って描くグラフライブラリ「Aristochart」

AristochartはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。Webブラウザ上で表示されるグラフというと最近ではJavaScriptを使って描画されるものが多くなっています。多くはSVGなどを使っているようですが今回はCanvasを使って奇麗なグラフを描くAristochar...

List

  • 2013/06/15

多彩なフォーマットに対応したビジュアル化ソフトウェア「Hypercube」

HypercubeはWindows/Mac OSX用のオープンソース・ソフトウェア(GPL)です。テキストで書かれただけでは分かりづらい情報も、ビジュアル化すると分かりやすくなります。そこで今回は多彩なテキストフォーマットに対応したビジュアル化ソフトウェア、Hypercubeを紹介します。メイン画面です。こちらはMac...

List

  • 2013/05/26

工業製品風の出力をWebに「Industrial.js」

Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。メーター表示です。液体や温度計風で面白いです。その他LED、電光掲示板風もあります。In...

List

  • 2013/05/25

一行の記述で使えるJavaScriptグラフライブラリ「Chartkick」

ChartkickはRailsやそれ以外のシステムで手軽に使えるグラフライブラリです。Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。線グラフ。円グラフ。棒グラフ。複数シリーズ(円グラフは対応していませ...

List

  • 2013/05/02

3Dレンダリングなどに使いたい格好いいFPSメーター「FPSMeter」

FPSMeterはテーマに対応したグラフィカルなFPSメーターです。3Dレンダリングやゲームを開発する際に必要になるのがFPSのメーターです。いわゆるフレームレートを表しますが、この値が高ければ高いほどぬるぬると動くようになります。そのメーターとして使ってみたいのがFPSMeterです。中央にあるグラフがFPSグラフで...

List

  • 2013/04/09

GraphvizのDOT言語をJavaScriptで実装「canviz」

canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出し...

List

  • 2013/03/30

円や棒グラフをサポートしたCanvasによるグラフライブラリ「Chart.js」

Chart.jsはHTML5/Canvasを使ったグラフライブラリです。Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。折れ線(曲線)グラフです。棒グラフ。レーダーチャ...

List

  • 2013/02/23

膨大なデータを瞬時に描画。WebGLをつかったヒートマップ「WebGL Heatmap」

WebGL HeatmapはWebGLを使って高速に動作するヒートマップライブラリです。ヒートマップを描こうと思うとまず必要なのがポイントの膨大なデータで、それらを集計してサマライズして中央を濃く、周辺にいくに従って薄くなるように計算して…と結構複雑な感じがします。しかしWebGL Heatmapを使うと高速に、かつ滑...

List

  • 2012/12/31

システムの状況を可視化するGraphiteとともに使いたい「Giraffe」

GiraffeはGraphiteのグラフをより見やすくフレキシブルにしてくれるソフトウェアです。システムのステータスなどをグラフ化してリアルタイムモニタリングできるツールは多数ありますが、その一つであるGraphiteのUIを見栄えよくしてくれるのがGiraffeです。ダッシュボードです。データをシリーズごとにフィルタ...

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タグを使って簡単にグラフを描き出します。かなり密集したデモ。ズームイン/アウトもできます。こちらはアニメーション。動き続...