【頑固親父が直伝】「antvis/Infographic」で退屈なデータを極上の一皿へ。AI時代のビジュアライゼーション戦略
今日は「antvis/Infographic」の話だな？ 「言葉に命を吹き込む」なんて、まるで俺が麺に魂を込めるのと同じじゃねえか。エンジニアの視点から、この「特製インフォグラフィック・フレームワーク」をガツンと解説してやるよ。
いいか、客は「ただの数字」を見せられても食欲は湧かねえ。 データ（材料）をどう盛り付けるか、それがインフォグラフィックの真髄だ。
antvis/Infographicは、AntVグループが作ってる「言葉やデータを、AIの力で勝手に図解してくれる」フレームワークだ。
エンジニアに嬉しいポイント
盛り付け（レイアウト）の自動化
複雑な配置計算を自分で書かなくていい。
AIとの相性
自然言語から構成を考えてくれるから、LLM（大規模言語モデル）と組み合わせるのに最適だ。
拡張性
SVGやCanvasで描画できるから、Webフロントエンドへの組み込みもスムーズ。
まずは厨房（開発環境）を整えるところからだ。npmという市場から新鮮なパッケージを仕入れてくるぜ。
# パッケージのインストール
npm install @antv/infographic
こいつをプロジェクトの import に追加すりゃ、仕込みは完了だ。
「とりあえず一杯出してみろ」ってか？ よし、一番シンプルなやつを書いてやる。 テキストデータを渡して、それを図解にする流れだ。
import { Infographic } from '@antv/infographic';
// 1. どんぶり（コンテナ）を用意する
const container = document.getElementById('chart-container');
// 2. 秘伝のレシピ（データ）を準備
const data = {
title: "俺のラーメンのこだわり",
items: [
{ label: "麺", value: 40, description: "自家製極太麺" },
{ label: "スープ", value: 50, description: "24時間煮込み" },
{ label: "愛", value: 10, description: "これがないと始まらねえ" }
]
};
// 3. 調理開始！
const info = new Infographic({
container: container,
width: 800,
height: 600,
});
// AI的な推論を挟んで描画するイメージだ
info.render(data);
「ただライブラリを入れるだけじゃ、いい味（プロダクト）は出ねえぞ！」
データの鮮度
LLMで生成した「あやふやな文章」をそのまま食わせると、変な図が出てくる。しっかりバリデーション（検品）しな。
カスタマイズ
デフォルトのままだと、チェーン店の味になっちまう。テーマ設定で自分たちのプロダクトらしい「出汁（ブランドカラー）」を効かせるんだ。
レスポンシブ
スマホで見る客も多い。画面サイズに合わせて図が崩れねえか、デバッグの手を抜くんじゃねえぞ！
どうだ、腹に落ちたか？ これを使えば、今まで「ただのリスト」だった退屈な画面が、一気に「行列のできるインフォグラフィック」に早変わりだ。
「さあ、理屈はいいから、さっさとコード書きに行きな！ 手が止まってるエンジニアに食わせるラーメンはねえぞ！」
