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

開発 - グラフの記事一覧

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

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

もっと見る

None

  • 2018/01/26

git-heatmap - Gitリポジトリを解析して頻繁に更新されているファイルをリストアップ

リファクタリングの際に一つ基準にできるのが更新頻度です。あまり頻繁に更新されているものはファイルや処理を分割できる可能性があります。そうすることで標準化していくことでバグが入り込むのを防げるようになります。今回紹介するgit-heatmapはGitリポジトリを解析して、ファイルごとの更新回数を可視化します。## git...

List

  • 2017/12/08

blocks.js - 複雑なデータフローの可視化

システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。## blocks.jsの使い方メイン画面です。各ノードが線でつながっ...

List

  • 2017/11/28

js2flowchart.js - JavaScriptのコードをフローチャート化

複雑なコードはバグを含みやすくなります。インデントは浅い方が良いですし、関数は短く機能は単機能になっている方が良いでしょう。そうした複雑性の基準はどうやって設けたら良いでしょうか。一つのアイディアとして使えそうなのがjs2flowchart.jsです。JavaScriptのコードをビジュアル化し、フローチャート化してく...

List

  • 2017/11/27

billboard.js - インタラクティブ、プログラマブルなグラフライブラリ

HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフ...

List

  • 2017/11/18

Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。## Frappe Chartsの使い方棒グラフ。マウス...

List

  • 2017/09/02

Chartkick.js - 多数のグラフに対応したラッパーライブラリ

Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。## Chart...

List

  • 2017/08/11

ChartEx - Excelのグラフを画像/PDFで出力

Excelで作成したグラフをHTML上に組み込んだり、別なドキュメントに使いたいと思ったことはないでしょうか。同じOffice系であれば連絡が簡単ですが、もっと広く使いたいはずです。そんな時にいちいち画面をキャプチャするのは面倒です。そこで使ってみたいのがChartExです。Excelのグラフを画像やPDFとしてエクス...

List

  • 2017/05/26

GanttPad - テキストからガントチャート生成

プロジェクト管理と言えばガントチャートと言うくらい必要としている方は多いです。少なくとも一覧では分からなかったタスクの関連であったり、今後のタスクの予定が可視化されるようになります。それによって無理が来るポイントなども掴めるようになるでしょう。今回紹介するGanttPadはテキストで書いたタスクをガントチャートに展開し...

List

  • 2017/04/05

Contour - 多彩な種類に対応したWeb用グラフライブラリ

Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあっ...

List

  • 2017/02/05

Frappe Gantt - マウス操作が便利なガントチャート

個人的にはあまり好きではないのですが、プロジェクト管理において重宝されるのがガントチャートです。各タスクが時系列上に並ぶことで、タスクが重なる期間が分かりやすくなったり、タスクの関連度を可視化することでボトルネックを発見できます。そんなガントチャートを作成できるライブラリがFrappe Ganttです。## Frapp...

List

  • 2017/01/31

Visdown - Markdownにグラフ機能を追加

Markdownは誰でもすぐに覚えられて便利な記法ですが、ちょっとこだわったことをしようと思うだけでMarkdownだけでは物足りなくなってしまいます。その結果、HTMLタグが氾濫することになってしまったりもします。今回紹介するVisdownはMarkdownに足りないデータのビジュアル化機能を追加するソフトウェアです...

List

  • 2017/01/26

Treeverse - ツイートの広がりを可視化

Twitterでは日々盛んにコミュニケーションが行われています。ツイートをクリックするとWebサイト上で会話履歴が確認できます。しかし、それはすべて同じ時系列上に乗っており、複数人での会話が続くと分かりづらくなってします。そこで使ってみたいのがTreeverseです。ツイートの広がりをツリーに展開してくれるソフトウェア...

List

  • 2017/01/13

slack-inviteviz - Slackの招待状況を可視化

Slackを使って会社はもちろんコミュニティなどのコミュニケーションで使っている人たちは多いです。その中では多くの会話が日々交わされています。基本的にフローなので、メッセージがどんどん交わされているとお互いの関係性も分からなくなるかも知れません。そこで使ってみたいのがslack-invitevizです。Slackへの招...

List

  • 2016/12/10

Koto - D3.jsを使ったグラフライブラリ

D3.jsと言えばデータのビジュアライズを行うJavaScriptライブラリです。多彩なグラフィックスを描けますが、高度な機能だけに使いこなすのも難しいという印象があります。そこで今回はKotoを紹介します。D3.jsをベースに、グラフを描くライブラリです。## Kotoの使い方Kotoのデモグラフです。!

List

  • 2016/11/12

Gitgraph.js - Web上でGitリポジトリのグラフを描く

Gitはフォークしたりブランチを作って開発するのが常なので、枝分かれしたり合流したりしながら開発が進んでいきます。長い履歴の中で描かれるグラフに美しさを感じる人も多いのではないでしょうか。今回はそうしたGitグラフを描くJavaScriptライブラリ、Gitgraph.jsを紹介します。## Gitgraph.jsの使...

List

  • 2016/07/27

electron-viz - GUIのGraphvizチャートエディタ&ビューワー

Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUI...

List

  • 2016/07/05

Sankey - マウスオーバーでハイライトするチャートライブラリ

HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう...

List

  • 2016/03/11

GraphvizAnim - Graphvizのチャートをアニメーション

Graphvizを使うと高度なチャートが手軽に描けます。時に、あまりにも複雑すぎて全体像がわからなくなったりすることもあります。特にフローチャート系で起こりがちです。そこで使ってみたいのがGraphvizAnimです。Graphvizを使ってアニメーションGIFを作れるソフトウェアです。## GraphvizAnimの...

List

  • 2016/01/29

re:dash - オープンソースのデータプラットフォーム

世の中ではオープンデータの流れが進んでいます。企業はもちろんのこと、政府や自治体においてもデータを再利用しやすい形でオープンにしています。そんなデータをみんなにとって使いやすい形で公開、シェアできるのがre:dashです。## re:dashの使い方ダッシュボードです。すでに公開されているデータがたくさんあります。!

List

  • 2016/01/27

plotly.js - 3Dまでこなす高度なグラフライブラリ

Webに足りないのは高度な表現力と言われていますが、HTML5のSVGやCanvasによって大幅に向上しています。しかし、それらを使いこなしたり、プログラミングと組み合わせるのは大変です。そこでライブラリを使って手軽に表現力を増してみましょう。今回はグラフライブラリのplotly.jsを紹介します。## plotly....