snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

よく使う図のまとめとpython、markdownのコード

markdown Python

イントロダクション

最近、QC7つ道具なるものを初めて見ました。 単にグラフと言っても、用途や見せ方によって多くの種類があり、世の中には自分の知らないものがあるものだと感動しました。 そこで、今回はよく使われる図やグラフ、ダイアグラムについて調べてみました。 ついでに、議事録やプログラムでも使えるように、pythonやmarkdownのコードも作ってまとめました。

そもそも図、ダイアグラムとは

wikipediaでは、

図（ず）とは、図面。図表。統計図表。地図。図画。絵画。図形。四角形、多角形など。絵図。間取図。構図。画面。

図面は平面図、配置図、電気回路図等、地図は記号や文字で表した地理情報、図形は三角形、四角形等を指します。 統計図表は統計データを視覚化するために用いられるグラフのことを示しています。 このとき、グラフは数量の関係を示しものを指します。

また、ダイアグラムは、

ダイアグラム（diagram）とは、情報を整理し象徴的に線描など幾何学的に図示したものを指す。3次元の2次元への投影による視覚化も含む。関数などのそれはグラフと呼ぶ。

※ダイアグラムは量的な情報を含まないという定義もあります。

一覧

サンプル : pはpython(主にmatplotlibで作成した図), mはmarkdown(主にmermaidで作成した図)で作ったサンプルを載せています。

名前 用途 サンプル 備考
折れ線グラフ 時系列データ p QC7つ道具(グラフ)
棒グラフ 量の比較 p QC7つ道具(グラフ)
円グラフ 割合 p QC7つ道具(グラフ)
ヒストグラム データの分布 p QC7つ道具(グラフ)
レーダーチャート 項目の評価 p QC7つ道具(グラフ)
散布図 離散データ p QC7つ道具(グラフ)
パレート図 重要な項目抽出 p QC7つ道具
クラス図 モデルを表す m UML
シーケンス図 オブジェクト間のやり取り m UML
地図 地図 - 地図
フローチャート 流れ m
ガントチャート 進捗確認 m
Gitブランチのグラフ Gitブランチ m
樹形図 枝分かれ m
箱ひげ図 誤差 p
等値線図 天気図 p
アローダイアグラム 矢印で工期 m
サイクル図 ループ m
流線図 矢印でベクトルを示す p
テーブル 表 -

ライブラリ

pythonコードを使うなら以下のライブラリをあらかじめ読み込んでください。

import numpy as np
import matplotlib.pyplot as plt

mermaidはデスクトップエディタならTypora、vscodeで書くならMarkdown Preview Mermaid Support、ブラウザならmermaid live editorで読み込むことができます。

以前の記事も参考にしてください。

snova301.hatenablog.com

QC7つ道具

折れ線グラフ

  • 時系列データ、スペクトル、運行ダイヤグラムを示す
  • 必ずしも軸は線形でなくてもよい(片対数、両対数グラフ等)
x = np.arange(5)
y = x**2

plt.plot(x, y)
plt.show()

棒グラフ

  • 他者と量を比較
x = np.arange(3)
y = np.array([100, 30, 70])
plt.bar(x, y)

円グラフ

  • 割合を示す
x = np.array([12, 23, 100])
str_label = ['a', 'b', 'c']
plt.pie(x, labels=str_label, counterclock=False, startangle=90)

ヒストグラム

  • データの分布を示す
x = np.random.normal(50, 10, 100)
plt.hist(x)

レーダーチャート

  • 項目を数値で評価するときに使用
labels = ['a', 'b', 'c', 'd']
values = [10, 20, 30, 40]
angles = np.linspace(0, 2*np.pi, len(labels) + 1, endpoint=True)
values = np.concatenate((values, [values[0]]))

fig = plt.figure()
ax = fig.add_subplot(111, polar=True)
ax.plot(angles, values, 'o-')
ax.fill(angles, values, alpha=0.25)
ax.set_thetagrids(angles[:-1] * 180 / np.pi, labels)

散布図

  • 離散データを示す
x = np.random.rand(10)
y = np.random.rand(10)
plt.scatter(x, y)

パレート図

  • 重要な項目を抽出
x = np.arange(4)
y1 = np.array([10, 5, 3, 2])
sum_y1 = np.sum(y1)
y2 = np.cumsum(y1) / sum_y1

fig = plt.figure()
ax1 = fig.add_subplot(111)
ax2 = ax1.twinx()

ax1.bar(x, y1)
ax2.plot(x, y2, c='r')

UML

クラス図

  • システムの構造を表す
  • 状態遷移図、オブジェクト図、パッケージ図へ応用可
  • mermaid使用(classDiagramは実験的機能)
classDiagram

Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

シーケンス図

  • オブジェクト間のやり取りを時系列に沿って表現
  • mermaid使用
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

地図

  • 一般図 : 国土地理院が発行している地図
  • 路線図 : 鉄道等で使われている地図
  • 統計地図 : 統計データをもとに加工された地図。ドットマップ、円形表現図、等値線図、流線図、階級区分図、カルトグラムなど。統計GISで作成可。

※インフォグラフィック使う方法もあります。

その他ダイアグラム

フローチャート

  • 流れを示す
  • アクティビティ図へ応用可
  • mermaid使用
graph TD

A-->B
A-->C
B-->D
C-->D

ガントチャート

  • 時系列でタスクの進捗を示す
  • mermaid使用
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

Gitブランチのグラフ

  • Gitブランチを示す
  • mermaid使用(gitGraphは実験的機能)
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

樹形図

  • 事象の場合分け、家系図で使用
  • マインドマップ(思考を整理するための図)や特性要因図(問題を洗い出すための図)
  • mermaidを応用
graph LR

A---B
A---C
B---D
B---E
C---F

箱ひげ図

  • データのばらつきを示す
spread = np.random.rand(50) * 100
center = np.ones(25) * 50
flier_high = np.random.rand(10) * 100 + 100
flier_low = np.random.rand(10) * -100
data = np.concatenate((spread, center, flier_high, flier_low))

plt.boxplot(data)(self, parameter_list):

等値線図

delta = 0.025
x = np.arange(-3.0, 3.0, delta)
y = np.arange(-2.0, 2.0, delta)
X, Y = np.meshgrid(x, y)
Z1 = np.exp(-X**2 - Y**2)
Z2 = np.exp(-(X - 1)**2 - (Y - 1)**2)
Z = (Z1 - Z2) * 2

CS = plt.contour(X, Y, Z)

アローダイアグラム

  • 日程計画を決定するための図
  • mermaid使用
graph TD

1 -->|1 day| 2
2 -->|2 days| 3
2 -->|4 days| 4
3 -->|3 days| 5
4 -->|3 hours| 5

サイクル図

  • PDCAやリサイクルを示す
  • 要は無限ループ
graph LR

P-->D
D-->C
C-->A
A-->P

流線図

  • ものや人の流れを矢印で示した図
  • 統計地図、流体解析、電磁界解析へ応用
X = [1, 3]
Y = [2, 4]
U = [5, 60]
V = [70, 8]
plt.quiver(X, Y, U, V)

テーブル

a n
b 1
c 2

今後取り組む

  • ユースケース図(システムの使用機能を示す)
  • 回路図(電気回路や電子回路、pythonならSchemDrawというライブラリがあるらしい)
  • ベン図(集合を示す)
  • 三角グラフ(3つの要素の比率を表す)
  • 展開図、平面図(建物や機械図面)
  • バイオリンチャート
  • バブルチャート
  • 帯グラフ

終わりに

コードや説明にミスがあればご連絡ください。 また、追加すべき図があればできる範囲で対応します。

参考文献

Google Play and the Google Play logo are trademarks of Google LLC.