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

開発 - グラフの記事一覧

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

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

もっと見る

List

  • 2020/08/28

billboard.js - D3.jsを用いた多彩なグラフライブラリ

Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強...

List

  • 2020/08/21

barchartrace - アニメーションする横棒グラフ

世の中にはたくさんのチャートが存在します。ただ数字を並べるだけでは分かりづらく、可視化することでトレンドが見えたり、全体の雰囲気を学べるようになります。さらに一回表示するだけでなく、変化をアニメーション化することで、よりダイナミックな変化を掴めるチャートになります。今回紹介するbarchartraceは横棒グラフでアニ...

None

  • 2020/08/04

termplotlib - CUIで綺麗なグラフを生成

Pythonは機械学習やデータ分析で使われる機会が増えています。そうした時に必要なのがデータのビジュアル化、可視化ではないでしょうか。グラフィックスを表示したり、グラフでデータを可視化することで、トレンドが理解しやすくなります。PythonをWebやGUIで使っているならmatplotlibが便利ですが、CUIならばt...

List

  • 2020/08/01

Gantt Chart - SVG/Canvas/SSRをサポートしたガントチャート

プロジェクト管理で度々使われるのがガントチャートです。タスク間のつながりが分かり、どのタスクがネックになるかが明確になります。また、スケジュール全体の進行状況であったり、担当者ごとのタスク量も分かります。そんなガントチャートを綺麗に表示してくれるライブラリがGantt Chartです。## Gantt Chartの使い...

List

  • 2020/07/30

OpenAPI Map - OpenAPI Speficaitionをチャート化

情報は一覧で出した方がいいことも、ビジュアル的に出した方がいいこともあります。それによって複雑性や、全体像の把握のしやすさが異なるでしょう。閲覧側が自由に選択できると便利です。今回紹介するOpenAPI MapはOpenAPI Specificationのファイルをビジュアル化してくれるソフトウェアです。## Open...

List

  • 2020/06/18

ChartS.css - Markdownのリストをグラフに変換

グラフを描く際には専用のライブラリを使うことが多いですが、それに不慣れだとうまく表示できずにストレスが溜まります。ちょっとしたグラフであれば、もっとシンプルに描きたいと思うのではないでしょうか。そこで使ってみたいのがChartS.cssです。Markdown形式からグラフに表示になる、シンプルなライブラリです。## C...

List

  • 2020/05/30

japan-map-js - 日本のクリッカブルな地図を表示

集まったデータをただ一覧にしているだけではインパクトは薄くなってしまいます。どう可視化するかが問題です。時系列で比較する場合は棒グラフや折れ線グラフ、グループの場合は円グラフなど、データによって選ばれるグラフは異なります。もしデータが地域に合わせて作られるなら、地図上にマッピングするのがいいでしょう。日本地図にマッピン...

List

  • 2020/05/27

Cloudia - 簡単に日本語に対応したワードクラウドを生成

単語をたくさん並べて作成するワードクラウドという表現があります。頻繁に出てくるワードを大きくすることで、重要なワードとそうでないものとをフィルタリングすることもできます。自分のサービスでもワードクラウドを表示したい、そう思った方はCloudiaを使ってみましょう。## Cloudiaの使い方例です。日本語の場合、形態素...

List

  • 2020/05/03

Nautilus - Docker Composeの設定を可視化

開発時にDockerを利用している開発現場は多いでしょう。そして、複数のコンテナを組み合わせる場合、Docker Composeを使って管理しているのではないでしょうか。Docker Composeの設定を細かくこだわると、徐々に複雑なものになっていきます。そこで使ってみたいのがNautilusです。Docker Co...

List

  • 2020/04/16

Gantt-elastic - Vue製のガントチャート

プロジェクト管理では必ずといってもいいほど使われるのがガントチャートです。プロジェクト管理のシステムには組み込まれているものが多いですし、Excelなどを使って自作のガントチャートを利用するケースもあります。今回紹介するGantt-elasticはVueベース、Webブラウザで使えるガントチャートライブラリです。## ...

List

  • 2020/03/19

Covidify - コロナウイルス関連データの収集と可視化

世界中の人たちが心配しているコロナウイルス。毎日様々なニュース、データが飛び交っており、何をどう判断したらいいのかも分からなくなりそうです。そして各国のデータを分析する、可視化するニーズも強くあります。今回紹介するCovidifyはコロナウイルス関連データを集積、グラフ化するライブラリです。## Covidifyの使い...

List

  • 2020/01/27

G6 - ノードの繋がりを可視化するチャートライブラリ

Webの表現力を補うために多くのデータビジュアル化ライブラリが存在します。グラフのようなものもあれば、さらに複雑なチャートライブラリもあります。アニメーションしたり、高速で表示されたりと様々な特徴があります。G6はノード同士を連携し、それを表現するのを得意とするチャートライブラリになります。## G6の使い方サンプルで...

List

  • 2020/01/13

familytreemaker - 記法に従って家系図を生成

家系図的な表示を使いたい時がたまにあります。組織図であったり、システムのアーキテクチャ、クラス図などでも使えます。そのために専用のソフトウェアを使うのは面倒で、後々のメンテナンスも考えるとプレゼンソフトウェアなどで簡易的に作ってしまったりします。そんなあなたのためのソフトウェアがfamilytreemakerです。記法...

List

  • 2019/12/23

dot-to-ascii - Graphviz記法からアスキーアートでチャート生成

dotファイルはGraphviz用のフォーマットとして有名です。テキストから画像などのグラフが描けるので、仕様書など開発者用ドキュメントの中でもよく使われています。クラス図など自動化もしやすいのがメリットです。そんなdotファイルからアスキーテキストのチャートを描くソフトウェアがdot-to-asciiになります。##...

List

  • 2019/12/21

Flowy - さくさく作れるフローチャートライブラリ

フローチャートを利用する機会は意外と多いです。しかし専用のソフトウェアがないために表計算やプレゼンソフトウェアを使って無理矢理作っているのではないでしょうか。Webブラウザで手軽に作れると便利です。今回紹介するFlowyはシンプルなフローチャートライブラリです。## Flowyの使い方左側にあるノードをドラッグ&ドロッ...

List

  • 2019/11/04

uPlot - 大量のデータを高速に描画するグラフライブラリ

チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。今回紹介するuPlotはとにかく大量のデータを即座に表示したいと...

List

  • 2019/10/30

roughViz - 手書きのようなラフなグラフを描く

正確に書かれた図は見やすいものですが、かしこまった雰囲気が出てしまいます。モックアップのレベルであまり正確なものを作るとデザイン上の些細な部分にこだわりはじめてしまうのでお勧めできません。そこで使ってみたいのがroughVizです。手で書いたような乱雑なグラフが描けるライブラリです。## roughVizの使い方棒グラ...

List

  • 2019/10/11

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

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

List

  • 2019/09/24

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

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

List

  • 2019/07/13

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

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