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

開発 - グラフの記事一覧

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

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

もっと見る

List

  • 2019/10/11

TaskTreemap - プロジェクトのタスク規模と進捗をツリーマップで可視化

プロジェクト管理において可視化は大事な要件です。一覧にすると膨大に見えるタスク群も、規模を比べたり、その進捗を可視化することで全体像が見えてきます。定性的に「たくさん」ではなく、定量的に見なければなりません。そこで使ってみたいのがTaskTreemapです。タスクの規模と進捗をツリーマップを用いて表現します。## Ta...

List

  • 2019/09/24

Recharts - React用のグラフ/チャートコンポーネント

Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。今回はRechartsを紹介します。React用のチャートコンポーネントです。## Rechartsの使い方グラフのサンプルをスクリーン...

List

  • 2019/07/13

statbox2 - 完成度の高い宮崎県向けデータ可視化システムのプロトタイプ

行政で使われるシステムは決して安価ではありません。利用者像が様々であり、ユニバーサルデザインにも気を配らないといけないため、開発工数が増しがちです。しかし、その結果として使い勝手の悪いシステムができるのではな意味がありません。今回紹介するstatbox2は、新みやざき統計BOXで使われる機能のプロトタイプです。このシス...

List

  • 2019/07/04

TradingView - ファイナンス系グラフライブラリ

世の中には様々なグラフ、チャートがあります。その一つとしてファイナンス系があります。FXや株などで表示されるグラフは特殊で、さらにデータをリアルタイムに処理するのが重要です。今回紹介するTradingViewはまさにそういった用途で使われるグラフライブラリになります。## TradingViewの使い方ローソクチャート...

List

  • 2019/07/03

GraphvizOnline - GraphvizをWebブラウザ上で使う

複雑なチャートを描く際に、ExcelやPowerPointを使っていては、後々の更新コストが大きくなります。そこでお勧めなのがGraphvizです。dotファイルを作れば、チャート化する部分は自動で任せられるようになります。今回紹介するGraphvizOnlineはWeb上でGraphvizを試せるツールです。各自のロ...

List

  • 2019/07/01

dockerdot - Dockerfileの依存性を可視化

Dockerはまるで魔法のように環境が整います。開発環境を整えるのに不便な思いをしてきた人からすれば、これほど手軽なものはありません。しかし、その動作がどうなっているのかはきちんと知っておく必要があるでしょう。そんなDockerの設定ファイル(Dockerfile)の依存性などをビジュアル化してくれるのがdockerd...

List

  • 2019/05/06

QuickChart - Google Chart APIの代替

Webでグラフを表示したいというニーズはよくあります。そのためのライブラリやAPIを提供するサービスも多数あります。有名なものに一つにGoogleのグラフAPIがありますが、業務システムの数字を出すのは控えてしまうでしょう。そこで使ってみたいのがオープンソースのグラフAPIサーバ、QuickChartになります。社内で...

List

  • 2019/02/17

Sprite - フローチャートを生成するコード風記法

詳細設計を行うなら実装してしまった方が早いと言った声もありますが、それでも機能単位のフローチャートが用意されている方が間違いはないように思います。共通認識がないと個人の勝手な判断が入り、思わぬバグを生み出したりします。今回紹介するSpriteはコードライクにフローチャートが書けるソフトウェアです。テキストベースなのでメ...

List

  • 2018/12/10

Ervy - CUIで棒/円/折れ線/ゲージグラフを表示

コンソール用のアプリケーションが増えています。UIをあまり作り込まずに済み、さらに結果の出力も簡単にできます。その反面、グラフのような可視化は苦手です。テキストで出力して、別なライブラリで可視化するのではないでしょうか。そこで使ってみたいのがErvyです。ターミナル上で簡易的な可視化を実現できます。## Ervyの使い...

List

  • 2018/11/24

graph-cli - CSVから画像ファイルを生成

資料でグラフを使うことで数値の羅列から視覚に訴えられるようになります。多くの場合、表計算ソフトウェアを使ってグラフを作りますが、アップデートする度に作成し直したり画像化するのが面倒です。そこで使ってみたいのがgraph-cliです。CLIでCSVデータをグラフ化します。## graph-cliの使い方Sinの値をCSV...

List

  • 2018/07/20

AstroChart - SVGによる占星術用チャート生成

チャートは実に多彩に存在します。ガントチャートや組織図のようなビジネス向きのものもあれば、地図や路線図と合わせるものなど様々です。何かの情報を分かりやすく伝えるためにはチャートによる可視化が有効です。今回は特殊なチャートを描くAstroChartを紹介します。なんと占星術用のチャートを描くライブラリです。## Astr...

List

  • 2018/07/10

Sourcerer - GitHubでの活動をビジュアル化

プログラマーとしては、自分がどういったコードを書いてきたかを可視化してみたいと思うものでしょう。GitHubではコミットに応じたグラフを提供してくれますが、まだまだ不十分です。そこで使ってみて欲しいのがSourcererです。よりグラフィカルに自分の活動が可視化されます。## Sourcererの使い方例えばこんな感じ...

List

  • 2018/06/08

GitHub Contribution Chart Generator - GitHubでのこれまでの活動をすべて可視化

GitHubの活動計(Contribution Chart)は開発者としてのやる気を喚起してくれます。すべて埋めてやろうと躍起になる開発者もいるのではないでしょうか。しかし直近の情報しか見えないのが残念です。そこで使ってみたいのがGitHub Contribution Chart Generatorです。これまでのすべ...

List

  • 2018/03/07

just-dashboard - 設定ファイルからダッシュボード用のグラフを生成

管理画面で必要な機能と言えばデータをメンテナンスする機能と、主なKPIやシステムのトラフィックを確認できるグラフ機能です。しかしメンテナンスは簡単に実現できてもグラフは意外と面倒で後回しになったり、CSVでダウンロードしてExcelで作るなんて状態になっているのではないでしょうか。そこで使ってみたいのがjust-das...

List

  • 2018/02/28

Mermaid Live Editor - Mermaid記法をリアルタイムにチャート化

複雑な情報も図式化することによって分かりやすくなりますが、バイナリにしてしまうとメンテナンスコストが大きくなります。最初こそ気合いを入れて作ったチャートもメンテナンスで一気に崩れてしまったらやる気もなくなるでしょう。そこで使ってみたいのがMermaid Live Editorです。テキストからチャートにしてくれるソフト...

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の使い方棒グラフ。マウス...