Pieチャートを書いてnoteに投稿する方法(非エンジニア向け・Copilot対応)
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チャートでは扱えないため、人口構成などのデータを利用します。
区,世 帯 数,男,女,合 計,
1区,93 ,111 ,105 ,216 ,
2区,48 ,53 ,54 ,107 ,
3区,150 ,183 ,184 ,367 ,
4区,171 ,187 ,205 ,392 ,
5区,390 ,447 ,474 ,921 ,
6区,271 ,322 ,319 ,641 ,
7区,81 ,97 ,96 ,193 ,
8区,83 ,116 ,114 ,230 ,
9区,80 ,104 ,111 ,215 ,
10区,150 ,166 ,197 ,363 ,
11区,358 ,417 ,424 ,841 ,
12区,292 ,393 ,390 ,783 ,
13区,175 ,247 ,230 ,477 ,
14区,255 ,189 ,229 ,418 ,
15区,46 ,58 ,49 ,107 ,
16区,287 ,343 ,357 ,700 ,
17区,136 ,198 ,207 ,405 ,
23区,95 ,110 ,58 ,168 ,
18区,59 ,68 ,78 ,146 ,
19区,32 ,42 ,44 ,86 ,
20区,31 ,35 ,39 ,74 ,
21区,25 ,33 ,32 ,65 ,
22区,35 ,37 ,24 ,61 ,
,,,,,
はい、〇ソです。
エクセル管理→csv出力しているのでしょうか、shift-jisになってたり、全角半角の揺らいでたり、算出可能な値が入っていたり、いっぱい気になります。
気にしてると時間の無駄なのでそのままCoplitに投げて大丈夫です。
Copilotへの送信
下記2点に注意して、プロンプトを送信します。
入力(データと形式)と出力(形式)を明確に指定する
マニュアルの場所を明確に指定する
下記のcsvを入力として、merimaidのpieチャート記述形式を出力してください
```
区,世 帯 数,男,女,合計,
1区,93 ,111 ,105 ,216 ,
2区,48 ,53 ,54 ,107 ,
3区,150 ,183 ,184 ,367 ,
4区,171 ,187 ,205 ,392 ,
5区,390 ,447 ,474 ,921 ,
6区,271 ,322 ,319 ,641 ,
7区,81 ,97 ,96 ,193 ,
8区,83 ,116 ,114 ,230 ,
9区,80 ,104 ,111 ,215 ,
10区,150 ,166 ,197 ,363 ,
11区,358 ,417 ,424 ,841 ,
12区,292 ,393 ,390 ,783 ,
13区,175 ,247 ,230 ,477 ,
14区,255 ,189 ,229 ,418 ,
15区,46 ,58 ,49 ,107 ,
16区,287 ,343 ,357 ,700 ,
17区,136 ,198 ,207 ,405 ,
23区,95 ,110 ,58 ,168 ,
18区,59 ,68 ,78 ,146 ,
19区,32 ,42 ,44 ,86 ,
20区,31 ,35 ,39 ,74 ,
21区,25 ,33 ,32 ,65 ,
22区,35 ,37 ,24 ,61 ,
```
* mermaidのpieチャート記述形式のマニュアルは、https://mermaid.js.org/syntax/pie.html にあります。
* カラム"合計"の値を利用して出力してください。
これに対する回答が以下です。Coplitのコピーボタンでコピーしたため、「```mermaid 」というマークアップが含まれています。
以下は、ご指定のCSVデータを元にしたMermaidのPieチャート記述形式です:
```mermaid
pie
title 各区の人口
"1区" : 216
"2区" : 107
"3区" : 367
"4区" : 392
"5区" : 921
"6区" : 641
"7区" : 193
"8区" : 230
"9区" : 215
"10区" : 363
"11区" : 841
"12区" : 783
"13区" : 477
"14区" : 418
"15区" : 107
"16区" : 700
"17区" : 405
"23区" : 168
"18区" : 146
"19区" : 86
"20区" : 74
"21区" : 65
"22区" : 61
```
この記述形式をMermaidでレンダリングすると、各区の人口を示すPieチャートが生成されます。各区の名前とその人口("合計"カラムの値)がチャートの各セクションに対応します。。
今回はpieチャートの記法が平易であることもあり、サンプルを提示せずに正しく出力させることができました。
では、これを表示します。コード入力の先頭に ```mermaid から ``` までをコピペしてプレビューしてください。
```mermaid
pie
title 各区の人口
"1区" : 216
"2区" : 107
"3区" : 367
"4区" : 392
"5区" : 921
"6区" : 641
"7区" : 193
"8区" : 230
"9区" : 215
"10区" : 363
"11区" : 841
"12区" : 783
"13区" : 477
"14区" : 418
"15区" : 107
"16区" : 700
"17区" : 405
"23区" : 168
"18区" : 146
"19区" : 86
"20区" : 74
"21区" : 65
"22区" : 61
```
パイがとても小さいです。今回入手したデータは、行政区という謎の単位で行出力されていました。政令指定都市ではありません。
データ単位の調整
字単位で集計して出力するように変更します。
字と行政区の対応はWikiにも記述がなく、Copilotも回答できなかったため、自治体ホームページの統計pdfを見てまとめました。
下記のcsvを入力として、merimaidのpieチャート記述形式を出力してください
```
区,世 帯 数,男,女,合計,
1区,93 ,111 ,105 ,216 ,
2区,48 ,53 ,54 ,107 ,
3区,150 ,183 ,184 ,367 ,
4区,171 ,187 ,205 ,392 ,
5区,390 ,447 ,474 ,921 ,
6区,271 ,322 ,319 ,641 ,
7区,81 ,97 ,96 ,193 ,
8区,83 ,116 ,114 ,230 ,
9区,80 ,104 ,111 ,215 ,
10区,150 ,166 ,197 ,363 ,
11区,358 ,417 ,424 ,841 ,
12区,292 ,393 ,390 ,783 ,
13区,175 ,247 ,230 ,477 ,
14区,255 ,189 ,229 ,418 ,
15区,46 ,58 ,49 ,107 ,
16区,287 ,343 ,357 ,700 ,
17区,136 ,198 ,207 ,405 ,
23区,95 ,110 ,58 ,168 ,
18区,59 ,68 ,78 ,146 ,
19区,32 ,42 ,44 ,86 ,
20区,31 ,35 ,39 ,74 ,
21区,25 ,33 ,32 ,65 ,
22区,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チャートをキメちゃいましょう。
この記事が気に入ったらサポートをしてみませんか?