グラフと地図を描く

SQL の結果を Plotly のグラフや塗り分け地図にする書き方。ページでも AI チャットでも同じ形で書ける

Queria のグラフは、SQL の結果の列を Plotly のグラフの指定（JSON）に差し込んで描きます。ページの plot ブロックと、AI チャットの show_sql の plot は同じ形です。

ページに書く

名前を付けた SQL（sql id=<名前>）の結果を、plot ブロックから $<名前>.<列名> で指します。名前を付けた SQL は表としては表示されません。

```sql id=pref_pop
SELECT prefecture_name, population FROM ... ORDER BY population DESC LIMIT 10
```

```plot caption="人口の多い都道府県"
{
  "data": [
    { "type": "bar", "orientation": "h", "x": "$pref_pop.population", "y": "$pref_pop.prefecture_name" }
  ],
  "layout": { "height": 400, "yaxis": { "autorange": "reversed" } }
}
```

表も見せたいときは sql id=<名前> display と書きます
caption は任意です
指定は JSON です。キーと文字列は " で囲みます

AI チャットで描く

AI チャットでは、AI が show_sql の plot に同じ指定を渡します。結果は 1 つなので、列は $result.<列名> で指します。グラフの下に表が畳んで付きます。

{ "data": [{ "type": "bar", "x": "$result.name", "y": "$result.value" }] }

よく使う形

見せたいもの	`type`	主な指定
順位・比較	`bar`	横向きは `"orientation": "h"` で、`x` に値、`y` に名前
時系列	`scatter`	`"mode": "lines"`、`x` に日付や年
2 つの値の関係	`scatter`	`"mode": "markers"`
内訳	`pie`	`labels` と `values`
地域ごとの値の塗り分け	`choroplethmap`	`geojson` に境界、`z` に値
地点	`scattermap`	`lat` と `lon` に緯度・経度

bar・scatter・pie だけのグラフは、軽い版の Plotly で描くので速く出ます。

地図を描く

塗り分け地図は、境界の列を ST_AsGeoJSON で GeoJSON の文字列にして geojson に渡します。locations は書かなくてかまいません。

SELECT prefecture_name, ST_AsGeoJSON(geometry) AS geojson, population
FROM ...

{
  "data": [
    { "type": "choroplethmap", "geojson": "$pref_map.geojson", "z": "$pref_map.population", "text": "$pref_map.prefecture_name" }
  ],
  "layout": { "map": { "center": { "lat": 36.5, "lon": 137 }, "zoom": 4 } }
}

ST_ で始まる関数（spatial 拡張）は、使う SQL を流すときに自動で読み込みます
座標は経度・緯度の順です（ST_Point(経度, 緯度)）
境界は細かいほど重くなります。範囲を絞るか、ST_SimplifyPreserveTopology(geometry, 0.001) などで形を粗くしてから渡してください
ページの地図の背景は Queria の地図に差し替えます。AI チャットでは背景の地図は出ず、塗り分けと点だけが描かれます

境界と施設の掛け合わせなど、空間の SQL の書き方はクックブックの地理データのレシピを見てください。地点のまわりの人口や施設をその場で数える地図は、ページの gis ブロックで置けます。

うまく描けないとき

列の名前が結果に無いと描けません。$<名前>.<列名> の列名は SQL の別名と同じにします
数が文字列の列だと、軸が数値になりません。SQL で CAST してください
行が多すぎると重くなります。グラフに渡す前に SQL で集計してください