note.comではmermaidという特殊な記述文法を利用して、さまざまな図やグラフを出力することができます。今回はなじみも深いPieチャートを扱ってきます。もちろん、Copilotを使うため難しいコードの編集は行いません。

設計

Copilotへの入力はテキストデータである必要があります。非エンジニアでももっともなじみのあるcsvを入力に想定します。

```mermaid
flowchart LR
    A[CSV] -->B[Mermaid.pie]
    B --> C[note.com]
```

入力データの取得

自治体のオープンデータ

入力に利用するデータは、[ここ](https://opendata.pref.saitama.lg.jp/)から入手しました。オープンデータの多くはGISデータ（地理データ）なのですが、Pieチャートでは扱えないため、人口構成などのデータを利用します。

区,世 帯 数,男,女,合　計,
１区,93 ,111 ,105 ,216 ,
２区,48 ,53 ,54 ,107 ,
３区,150 ,183 ,184 ,367 ,
４区,171 ,187 ,205 ,392 ,
５区,390 ,447 ,474 ,921 ,
６区,271 ,322 ,319 ,641 ,
７区,81 ,97 ,96 ,193 ,
８区,83 ,116 ,114 ,230 ,
９区,80 ,104 ,111 ,215 ,
１０区,150 ,166 ,197 ,363 ,
１１区,358 ,417 ,424 ,841 ,
１２区,292 ,393 ,390 ,783 ,
１３区,175 ,247 ,230 ,477 ,
１４区,255 ,189 ,229 ,418 ,
１５区,46 ,58 ,49 ,107 ,
１６区,287 ,343 ,357 ,700 ,
１７区,136 ,198 ,207 ,405 ,
２３区,95 ,110 ,58 ,168 ,
１８区,59 ,68 ,78 ,146 ,
１９区,32 ,42 ,44 ,86 ,
２０区,31 ,35 ,39 ,74 ,
２１区,25 ,33 ,32 ,65 ,
２２区,35 ,37 ,24 ,61 ,
,,,,,

はい、〇ソです。
エクセル管理→csv出力しているのでしょうか、shift-jisになってたり、全角半角の揺らいでたり、算出可能な値が入っていたり、いっぱい気になります。
気にしてると時間の無駄なのでそのままCoplitに投げて大丈夫です。

Copilotへの送信

下記２点に注意して、プロンプトを送信します。

• 入力（データと形式）と出力（形式）を明確に指定する

• マニュアルの場所を明確に指定する

下記のｃｓｖを入力として、merimaidのpieチャート記述形式を出力してください

```
区,世 帯 数,男,女,合計,
１区,93 ,111 ,105 ,216 ,
２区,48 ,53 ,54 ,107 ,
３区,150 ,183 ,184 ,367 ,
４区,171 ,187 ,205 ,392 ,
５区,390 ,447 ,474 ,921 ,
６区,271 ,322 ,319 ,641 ,
７区,81 ,97 ,96 ,193 ,
８区,83 ,116 ,114 ,230 ,
９区,80 ,104 ,111 ,215 ,
１０区,150 ,166 ,197 ,363 ,
１１区,358 ,417 ,424 ,841 ,
１２区,292 ,393 ,390 ,783 ,
１３区,175 ,247 ,230 ,477 ,
１４区,255 ,189 ,229 ,418 ,
１５区,46 ,58 ,49 ,107 ,
１６区,287 ,343 ,357 ,700 ,
１７区,136 ,198 ,207 ,405 ,
２３区,95 ,110 ,58 ,168 ,
１８区,59 ,68 ,78 ,146 ,
１９区,32 ,42 ,44 ,86 ,
２０区,31 ,35 ,39 ,74 ,
２１区,25 ,33 ,32 ,65 ,
２２区,35 ,37 ,24 ,61 ,
```
* mermaidのpieチャート記述形式のマニュアルは、https://mermaid.js.org/syntax/pie.html にあります。
* カラム"合計"の値を利用して出力してください。

これに対する回答が以下です。Coplitのコピーボタンでコピーしたため、「```mermaid 」というマークアップが含まれています。

以下は、ご指定のCSVデータを元にしたMermaidのPieチャート記述形式です：

```mermaid
pie
    title 各区の人口
    "１区" : 216
    "２区" : 107
    "３区" : 367
    "４区" : 392
    "５区" : 921
    "６区" : 641
    "７区" : 193
    "８区" : 230
    "９区" : 215
    "１０区" : 363
    "１１区" : 841
    "１２区" : 783
    "１３区" : 477
    "１４区" : 418
    "１５区" : 107
    "１６区" : 700
    "１７区" : 405
    "２３区" : 168
    "１８区" : 146
    "１９区" : 86
    "２０区" : 74
    "２１区" : 65
    "２２区" : 61
```

この記述形式をMermaidでレンダリングすると、各区の人口を示すPieチャートが生成されます。各区の名前とその人口（"合計"カラムの値）がチャートの各セクションに対応します。。

今回はpieチャートの記法が平易であることもあり、サンプルを提示せずに正しく出力させることができました。
では、これを表示します。コード入力の先頭に ```mermaid から ``` までをコピペしてプレビューしてください。

```mermaid
pie
    title 各区の人口
    "１区" : 216
    "２区" : 107
    "３区" : 367
    "４区" : 392
    "５区" : 921
    "６区" : 641
    "７区" : 193
    "８区" : 230
    "９区" : 215
    "１０区" : 363
    "１１区" : 841
    "１２区" : 783
    "１３区" : 477
    "１４区" : 418
    "１５区" : 107
    "１６区" : 700
    "１７区" : 405
    "２３区" : 168
    "１８区" : 146
    "１９区" : 86
    "２０区" : 74
    "２１区" : 65
    "２２区" : 61
```

パイがとても小さいです。今回入手したデータは、行政区という謎の単位で行出力されていました。政令指定都市ではありません。

データ単位の調整

字単位で集計して出力するように変更します。
字と行政区の対応はWikiにも記述がなく、Copilotも回答できなかったため、自治体ホームページの統計pdfを見てまとめました。

下記のｃｓｖを入力として、merimaidのpieチャート記述形式を出力してください

```
区,世 帯 数,男,女,合計,
１区,93 ,111 ,105 ,216 ,
２区,48 ,53 ,54 ,107 ,
３区,150 ,183 ,184 ,367 ,
４区,171 ,187 ,205 ,392 ,
５区,390 ,447 ,474 ,921 ,
６区,271 ,322 ,319 ,641 ,
７区,81 ,97 ,96 ,193 ,
８区,83 ,116 ,114 ,230 ,
９区,80 ,104 ,111 ,215 ,
１０区,150 ,166 ,197 ,363 ,
１１区,358 ,417 ,424 ,841 ,
１２区,292 ,393 ,390 ,783 ,
１３区,175 ,247 ,230 ,477 ,
１４区,255 ,189 ,229 ,418 ,
１５区,46 ,58 ,49 ,107 ,
１６区,287 ,343 ,357 ,700 ,
１７区,136 ,198 ,207 ,405 ,
２３区,95 ,110 ,58 ,168 ,
１８区,59 ,68 ,78 ,146 ,
１９区,32 ,42 ,44 ,86 ,
２０区,31 ,35 ,39 ,74 ,
２１区,25 ,33 ,32 ,65 ,
２２区,35 ,37 ,24 ,61 ,
```
* mermaidのpieチャート記述形式のマニュアルは、https://mermaid.js.org/syntax/pie.html にあります。
* カラム"合計"の値を利用して出力してください。
* 字ごとに値をサマリしてください。字と各行政区の対応は以下です。
    * 根古屋: 1, 2, 3, 23
    * 苅米: 4, 5
    * 中郷: 6, 11
    * 宇根: 7, 8, 9, 10
    * 川東: 12, 13, 14
    * 川西: 15, 16, 17
    * 芦ヶ久保: 18, 19, 20, 21, 22

下記のように、各字でサマリした結果で出力されます。

以下は、ご指定のCSVデータを元にしたMermaidのPieチャート記述形式です：

```mermaid
pie
    title 各字の人口
    "根古屋" : 858
    "苅米" : 1313
    "中郷" : 1482
    "宇根" : 1001
    "川東" : 1678
    "川西" : 914
    "芦ヶ久保" : 532
```

この記述形式をMermaidでレンダリングすると、各字の人口を示すPieチャートが生成されます。各字の名前とその人口（"合計"カラムの値の合計）がチャートの各セクションに対応します。。

これをプレビューします。

```mermaid
pie title 各地区の人口分布
    "根古屋": 858
    "苅米": 1313
    "中郷": 1482
    "宇根": 1001
    "川東": 1678
    "川西": 912
    "芦ヶ久保": 436
```

pieの順番は右回りに値が大きい方から小さいほうへと、自動で並び替えられています。

これまでとおり、自分でコードを書かずともpieチャートを投稿することができました。
Excel → グラフ出力 → 画像エクスポート → note.comに貼りつけ、は面倒くさいです。Office買いたくない人もこの方法でPieチャートをキメちゃいましょう。