-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
136 lines (132 loc) · 6.95 KB
/
index.html
File metadata and controls
136 lines (132 loc) · 6.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pythonによるデータビジュアライゼーション</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<p class="hero__eyebrow">Matplotlib Quick Tour</p>
<h1>Pythonによるデータビジュアライゼーション</h1>
<p class="hero__lead">本サイトでは、Python の Matplotlib を中心に、代表的なグラフの種類やサンプルコード、実際の出力例をまとめています。必要な設定から描画パターンまで、学習したい項目にすぐアクセスできます。</p>
<div class="hero__actions">
<a class="button button-primary" href="graph.html">プロット一覧を見る</a>
<a class="button button-ghost" href="learning_guide.pdf">学習ガイドPDF</a>
<a class="button button-ghost" href="#annotated-script">注釈付きサンプル</a>
</div>
<dl class="hero__meta">
<div>
<dt>対象</dt>
<dd>Python 初学者からデータ分析者まで</dd>
</div>
<div>
<dt>内容</dt>
<dd>Matplotlib プロット集 & 実行例</dd>
</div>
<div>
<dt>手順</dt>
<dd>セットアップ > プロット生成 > 可視化</dd>
</div>
<div>
<dt>学習ガイド</dt>
<dd><a href="learning_guide.pdf">PDF で読み進める</a></dd>
</div>
</dl>
</header>
<main>
<section class="feature-grid" aria-labelledby="feature-overview">
<h2 id="feature-overview">まずはここから</h2>
<div class="grid">
<article class="card">
<h3>環境を整える</h3>
<p>仮想環境の作成とライブラリのインストール手順をまとめています。Python のセットアップがまだの方はここから。</p>
<ul>
<li><code>python3 -m venv .venv</code> で仮想環境を準備</li>
<li><code>pip install matplotlib numpy</code> を実行</li>
<li>必要に応じて <code>npm install</code> でフロント資産を更新</li>
</ul>
</article>
<article class="card">
<h3>グラフを生成</h3>
<p><code>generate_graphs.py</code> はすべての PNG を再生成するスクリプトです。差分を確認しながら、望んだ出力になっているかチェックしましょう。</p>
<ul>
<li><code>python generate_graphs.py</code> で一括出力</li>
<li><code>images/</code> 配下のファイル名はそのまま維持</li>
<li>描画後は PNG の差分や見た目を確認</li>
</ul>
</article>
<article class="card">
<h3>ドキュメントを閲覧</h3>
<p><code>graph.md</code> を編集後、HTML を再生成してブラウザで最終確認。各ページはスタイルガイドに沿って構成されています。</p>
<ul>
<li><code>pandoc graph.md -s -c style.css -o graph.html</code></li>
<li><code>index.html</code> / <code>graph.html</code> の見た目をブラウザで検証</li>
<li>公開時は <code>images/</code> と HTML を併せて配布</li>
</ul>
</article>
</div>
</section>
<section class="feature-grid" aria-labelledby="study-guide">
<h2 id="study-guide">学習ガイドと課題</h2>
<div class="grid">
<article class="card">
<h3>Python Graph 学習ガイド</h3>
<p>リポジトリの構成、各種プロット、再生成ワークフローを段階的に整理した学習ガイドです。数式の補足やチェックリスト、練習問題も含めています。</p>
<ul>
<li><a href="learning_guide.pdf">PDF 版を開く</a></li>
<li>学習の進度に合わせて課題に挑戦</li>
</ul>
</article>
<article class="card">
<h3>学びの動線を整える</h3>
<p>まずは一覧を確認し、関心のあるプロットを選んで再生成。差分が出たらガイドと照合しながら調整します。</p>
<ul>
<li><a href="graph.html">プロット一覧へ</a></li>
<li><code>generate_graphs.py</code> で画像を再生成</li>
<li><code>graph.md</code> でサンプルコードを確認</li>
</ul>
</article>
</div>
</section>
<section class="callout" aria-labelledby="callout-tips">
<h2 id="callout-tips">学習のヒント</h2>
<p>コードを一気に実行するよりも、数行ずつ動かしながらグラフの変化を確かめると理解が深まります。ラベルや色、凡例を調整しつつ、自分のデータに合わせてカスタマイズしてみましょう。</p>
</section>
<section class="callout" aria-labelledby="callout-resources">
<h2 id="callout-resources">すぐ参照したいリンク</h2>
<p>手元の作業とあわせて、公式ドキュメントを開いておくと学習効率が上がります。</p>
<ul>
<li><a href="https://matplotlib.org/stable/users/index.html">Matplotlib User Guide</a></li>
<li><a href="https://numpy.org/doc/stable/user/index.html">NumPy User Guide</a></li>
<li><a href="https://pandoc.org/MANUAL.html">Pandoc User Guide</a></li>
</ul>
</section>
<section class="card code-card" aria-labelledby="annotated-script">
<h2 id="annotated-script">注釈付きサンプルスクリプト</h2>
<p>Matplotlib が初めての方でも手順を追いやすいように、折れ線グラフを描く最小構成をステップごとに解説したサンプルを紹介します。</p>
<pre><code class="language-python">import numpy as np # 数値を扱う標準的なライブラリ（配列計算に便利）
import matplotlib.pyplot as plt # グラフ描画のために pyplot モジュールを読み込む
# 1. 描画したい x 座標を 0〜2π の範囲で 100 分割して用意
x = np.linspace(0, 2 * np.pi, 100)
# 2. プロットしたい値（ここではサイン波）を x から計算
y = np.sin(x)
# 3. 折れ線グラフとしてプロットし、軸ラベルとタイトルを整える
plt.plot(x, y, color="steelblue", linewidth=2, label="sin(x)")
plt.xlabel("x") # 横軸ラベルを設定
plt.ylabel("sin(x)") # 縦軸ラベルを設定
plt.title("Basic Sine Wave") # グラフ全体のタイトル
plt.legend() # 凡例を表示
# 4. 最後に画面へ表示（Jupyter では不要な場合もあります）
plt.show()
</code></pre>
<p>順番に上から実行すれば同じグラフが表示されます。数行ずつ動かしながら、どの操作がグラフに反映されるかを確かめてみましょう。</p>
</section>
</main>
<footer>
<hr>
<p>© Python Graphs Documentation</p>
</footer>
</body>
</html>