observable frameworkを使ってポケモンネットワーク分析可視化

blue
green
brown
black
purple
pink
yellow
white
red
gray

squiggle
bug-wings
upright
quadruped
wings
arms
legs
heads
tentacles
humanoid
ball
fish
armor
blob

name	height	weight	type_name	generation_name
フシギダネ	0.7	6.9	くさ	カントー
フシギダネ	0.7	6.9	どく	カントー
フシギバナ	2.0	100.0	くさ	カントー
フシギバナ	2.0	100.0	どく	カントー
オニドリル	1.2	38.0	ノーマル	カントー

        ...
        # タイプ別カウントなどの取得
        type_stats_query="""
        ...
        """
        ...
        type_data = {}
        ...
        # 共起リンクの計算
        # t1.type_name < t2.type_nameとすることで逆のリンクを重複して計算しないようにする
        co_occurrence_query = """
            SELECT
                t1.type_name AS source,
                t2.type_name AS target,
                COUNT(*) as value
            FROM
                pokemon.pokemon_height_weight t1
            JOIN
                pokemon.spokemon_height_weight t2
                ON t1.name = t2.name AND t1.type_name < t2.type_name
            GROUP BY 1, 2
        """
        # タイプノード
        G = nx.Graph()
 
        co_links = []
        for row in con.sql(co_occurrence_query).fetchall():
            co_links.append({
                "source": row[0],
                "target": row[1],
                "value": row[2]
            })
            G.add_edge(row[0], row[1], weight=row[2])
 
        # ネットワーク指標の計算 (Centrality)
        degree_cent = nx.degree_centrality(G)
 
        # ノードリストの構築 集計値とマージ
        nodes = []
        for type_name, stats in type_data.items():
            nodes.append({
                **stats,
                "degree_centrality": round(degree_cent.get(type_name, 0), 3),
                "group": 1
            })
 
       ...
       # ポケモン、タイプごとの二部グラフのnode linkの取得
       co_links = ...
       bipartite_links = ...
 
       ...
       output = {
            "type_nodes": nodes,
            "pokemon_nodes": pokemon_nodes,
            "co_links": co_links,
            "bipartite_links": bipartite_links
        }
 
        print(json.dumps(output, ensure_ascii=False))

 
// ノード
const node = svg.append("g")
  .selectAll("g")
  .data(nodes)
  .join("g")
    .attr("transform", d => `translate(${d.x},${d.y})`)
    .attr("cursor", "pointer")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
 
...
// マウスイベント
node
    .on("mouseover", (event, d) => {
      tooltip.style("visibility", "visible");
      const content = `
        <strong>タイプ: ${d.type_name}</strong><br>
        合計: ${d.total_count}<br>
        単タイプ数: ${d.single_type_count}<br>
        単タイプ率: ${(d.single_type_rate * 100).toFixed(1)}%<br>
        次数中心性: ${d.degree_centrality.toFixed(3)}
      `;
      tooltip.html(content);
      d3.select(event.currentTarget).select("circle").attr("stroke", "#ccc");
    })
    .on(
 ...

```js
const bipartite_width = 800;
const bipartite_height = 800;
 
// データを結合 (タイプノード + ポケモンノード)
const bipartite_nodes = [
  ...pokemon_network.type_nodes.map(d => ({...d, group: 1, uid: `type:${d.type_name}`})),
  ...pokemon_network.pokemon_nodes.map(d => ({...d, group: 2, uid: `pokemon:${d.name}`}))
];
const bipartite_links = pokemon_network.bipartite_links.map(d => ({
  source: `pokemon:${d.source}`,
  target: `type:${d.target}`
}));
...
```

```js
 
const generationColors = {
  "カントー": "#ef5350",
  "ジョウト": "#ffa726",
  "ホウエン": "#66bb6a",
  "シンオウ": "#42a5f5",
  "イッシュ": "#78909c",
  "カロス": "#ab47bc",
  "アローラ": "#ffee58",
  "ガラル": "#26a69a",
  "パルデア": "#ec407a"
};
 
// type_name, generation_name, countのデータ
const count_pokemon_type = FileAttachment("../data/pokemon-type.csv").csv({typed: true});
 
```
 
## 世代ごとのポケモンタイプ数
 
```js
const selectedGenerations = view(Inputs.checkbox(Object.keys(generationColors), {
  label: "世代で絞る",
  value: Object.keys(generationColors)
}));
```
 
```js
const filtered_count_pokemon_type = count_pokemon_type.filter((d) =>
  selectedGenerations.includes(d.generation_name)
);
```
 
```js
Plot.waffleY(
    filtered_count_pokemon_type, {
        x: "type_name",
...
})
```