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

開発 - グラフの記事一覧

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

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

もっと見る

List

  • 2015/01/18

ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ

Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパタ...

List

  • 2014/12/14

Charted - 外部のCSV/Googleスプレッドシートをグラフに

Web上に置いたCSVファイルやGoogleスプレッドシートに記録したデータを手軽にグラフ化したいと思ったことはないでしょうか。Googleスプレッドシートでもできますが、設定が多くて面倒に感じてしまいます。そこで使ってみたいのがChartedです。外部サイトにあるCSVファイルやGoogleスプレッドシートのデータを...

List

  • 2014/12/07

Glance Year – GitHub風に年間の活動をグラフ化

一年分の活動を振り返る際にはどういった表示が良いでしょう。各月のカレンダーを表示して、日付ごとに色分けするのも良いでしょう。しかし開発者であればもっと面白い方法があります。それがGitHubのコントリビューショングラフ(正式名称は知りませんが)です。縦軸に曜日、横に52週分並べればそれだけで一年間を意味するグラフになり...

List

  • 2014/11/07

cssplot – CSSだけで作られているシンプルなグラフ

グラフライブラリというと、かつてはFlashを使ったり今はSVG/Canvasを使って描画するものが多いです。格好良いグラフが描けるのは確かですが、利用までの敷居が若干高いのが難点と言えるでしょう。そこで紹介したいのがcssplot、スタイルシートだけで作られたグラフライブラリです。これならば導入が簡単になりそうです。...

List

  • 2014/09/27

Elegans - Webベースの3Dグラフライブラリ

グラフというのは実にたくさんの種類があります。Webにおいてグラフを表示するというのは意外と面倒な問題ではありますが、それでも最近ではライブラリを増えてきて使いやすくなってきているでしょう。しかしそれは2Dに限った話かも知れません。3Dグラフとなるとさらに厄介です。そこで使ってみたいのがElegans、3Dグラフライブ...

List

  • 2014/09/23

npmgraph.an - nodeライブラリの関連性をビジュアル化

最近、node周りが熱くなっています。MOONGIFTで紹介するソフトウェアにおいてもnpmでインストールするというものが増えているように感じます。ライブラリが増えれば開発が楽になり、サービス、ソフトウェアもどんどん増えていくでしょう。開発者にとってみればnode界隈に関わることで知名度をあげることもできるでしょう。そ...

List

  • 2014/09/22

Chartist – レスポンシブ対応のSVGグラフライブラリ

Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフ...

List

  • 2014/09/09

Timesheet.js - ガントチャートにも使えそうなHTML5/CSS3製のタイムシートグラフ

世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあ...

List

  • 2014/07/09

Epoch – リアルタイム描画に対応したCanvas/SVGグラフライブラリ

Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたE...

List

  • 2014/06/04

transitive.js - 路線図を生成するJavaScriptライブラリ

データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょ...

List

  • 2014/05/18

BirdWatch – TwitterストリーミングAPIを使ったキーワード解析ツール

Twitterにはリアルタイムに大量のメッセージが送られています。大多数は取り立てて意味のないデータかも知れませんが、その中から役立つデータをピックアップするのは大変なことです。分析している間に次のデータがきてしまい、すぐにトレンドが変化してしまいます。そんなリアルタイムのTwitterトレンドビジュアル化をしてくれる...

List

  • 2014/04/30

vis.js – 年表やオブジェクト同士のつながりを表現するグラフに

Web上でデータを表示するライブラリは実に多彩に存在します。それだけニーズはありつつもこれで決まり!というものがないのかも知れません。そのため、多様に存在するライブラリをチェックし、比較検討する必要があります。vis.jsもそんなデータビジュアル化ライブラリの一つです。ネットワーク図をはじめ、データ同士のつながりを表現...

List

  • 2014/04/19

GitHub Burndown Chart – GitHubのイシューを使ってバーンダウンチャート生成

プロジェクト管理によく使われるのがバーンダウンチャートです。課題の数が日数とともに減っていくのをグラフ化することで、最終的に全ての課題が終わるのがいつ頃なのか予測できるようになります。そんなバーンダウンチャートをGitHubの課題管理を使って行うのがGitHub Burndown Chartです。## GitHub B...

List

  • 2014/03/27

Scout Realtime – 次世代のtopはWebで見る!

おお、これは格好いいぞ!サーバのステータスを知りたかったら打つコマンドがtopです。リアルタイムに刻々と変わるサーバのステータスを“テキストベース”で確認できます。しかし時代はどんどんグラフィカルになっている中、未だにtopで良いのでしょうか。そんな疑問を解決してくれるソフトウェアがScout Realtimeです。サ...

List

  • 2014/03/20

jOrgChart - 知っておくと便利な組織図を描くjQueryライブラリ

階層的な構造を表すのに便利なのが組織図です。しかし形が独特なものになりがちで、他のグラフに比べると描画ライブラリが少ないように思います。その結果、画像で作られて更新メンテナンスが大変な状態になります。そこで組織図を描くのに便利なライブラリを一つ知っておくと色々な場面で使い回しができるようになるでしょう。今回はjQuer...

List

  • 2014/03/17

NextCharts – グラフの事ならお任せ。HTML5/Canvasのグラフライブラリ/デザイナ/サーバ

かつてWeb上でグラフを描くとなると画像で出力するものが多かったです。しかし時代はHTML5になり、豊かな表現が可能になっています。そんな中にあってレガシーな画像出力など使っている場合ではありません。ということでHTML5の性能を活かしたグラフライブラリを紹介します。グラフのデザイナー、エンジン、そしてサーバの全てがオ...

List

  • 2014/03/16

morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ

管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。## morris.jsの使い方morris.jsはまずJavaScript/スタイルシ...

List

  • 2014/01/22

GraphSketcher - グラフを加工してさらに面白く

ああ、こういう加工は良いかも!Omniと言えばドロー系ソフトウェアを数多く出している有名な企業ですが、そこから新しい面白いソフトウェアがオープンソース化されました。それがGraphSketcherです。その名の通りグラフ+スケッチというソフトウェアなのですが、今ひとつ雰囲気が分かりづらいかと思います。しかしこれが非常に...

List

  • 2013/12/10

lsys – 面白い!自然物を描き出すL-systemをWeb上で体験

これはついついハマってしまいますよ。L-systemというのは生物の成長プロセスをはじめとする自然物の構造を記述、表現できるアルゴリズムのことを言います(via L-system - Wikipedia

List

  • 2013/11/26

hGraph - 健康状態を一つのグラフで表現

こういう表現方法のアイディアって面白いですね。健康というのは上限値と下限値があるものです。数値が低すぎてもダメな一方、高すぎてもダメというのもあります。一定の範囲があって、その中に収まっていれば問題なしというパターンが多いです。そんな健康状態を一つのグラフに表現しているのがhGraphになります。レーダーチャート風です...