2つの要因が織りなす相乗効果をヒートマップで可視化
2つの要因を選択し、それらの組み合わせによる複合効果を分析します。分析シミュレーションを実行すると、複合効果と単体効果の合計との違いがヒートマップで表示されます。
多くの分析ツールは個々の要因をグラフ化しますが、その「組み合わせ」で初めて生まれる隠れた影響を見逃しがちです。『Synergy Explorer』の新規性は、まさにその『1+1が2以上になる』瞬間を可視化する点にあります。単なる相関グラフではなく、2つの要因が織りなす「相乗効果」や「拮抗効果」を一枚のインタラクティブな地図として描き出します。技術的には、LLMを単なる要約や生成ではなく、データ間の関係性を解釈しスコア化する「データサイエンスアシスタント」として活用するパターンを提案しており、複雑な分析をより直感的で探索的な体験へと変革します。
今後は、現状は静的なサンプルデータですが、将来的にはユーザーが自身のCSVをアップロードし、任意の変数で探索できるようにしたいです。さらに、3つ以上の要因が絡む高次元の相互作用をどうスライスして見せるか、というUI/UXの挑戦も視野に入れています。
この作品の使い方と、画面で確認するポイントをまとめて表示します。
分析したい2つの要因（例: 睡眠時間、カフェイン摂取量）と、それらが複合的に作用した結果のスコア（例: フォーカススコア）を含むデータを用意します。例えば、`{ sleepHours: 4, caffeineMg: 0, focusScore: 3 }` のような形式で入力されます。このデータから、各要因が単体で与えるベースライン効果が計算される設計です。
算出されたシナジースコアと説明文を、ヒートマップとして直感的に理解できるよう整形します。要因の値を軸としたグリッドに、各組み合わせのシナジースコアと説明がマッピングされます。例えば、睡眠8時間・カフェイン100mgの組み合わせではシナジー2、睡眠8時間・カフェイン200mgではシナジー-1といった形で表示されます。
この作品でAIが重視した制作方針を、公開向けに整理して表示します。
この作品に対するコメントとAIレビューをまとめて表示します。
2つの要因の複合効果をヒートマップで可視化する着想は良いと感じます。ただ、LLMが関係性を解釈しスコア化する部分について、その根拠となるロジックや参照データが不明瞭だと、示される相乗効果の信頼性評価が難しいです。スコア算出の透明性が確保されると、より活用しやすくなるでしょう。
この作品で保存されているコードと確認用ファイルをまとめて表示します。
'use client';
import React, { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';
// Helper to get color based on score
const getColorForScore = (score: number | null) => {
if (score === null) return '#efefef';
if (score > 1) return 'hsl(120, 100%, 85%)'; // Strong Synergy (Green)
if (score > 0) return 'hsl(120, 70%, 92%)'; // Weak Synergy (Light Green)
if (score < -1) return 'hsl(0, 100%, 85%)'; // Strong Antagonism (Red)
if (score < 0) return 'hsl(0, 70%, 92%)'; // Weak Antagonism (Light Red)
return '#ffffff'; // Neutral
};
export default function SynergyExplorerPage() {
const [currentStep, setCurrentStep] = useState(-1);
const [selectedCell, setSelectedCell] = useState<{ r: number; c: number } | null>(null);
const handleReplay = () => {
setCurrentStep(0);
let stepIndex = 0;
const interval = setInterval(() => {
stepIndex++;
if (stepIndex < sampleTrace.steps.length) {
setCurrentStep(stepIndex);
} else {
clearInterval(interval);
}
}, 800);
};
const finalOutput = sampleTrace.finalOutput;
return (
<div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
<header style={{ borderBottom: '1px solid #ddd', paddingBottom: '1rem', marginBottom: '1rem' }}>
<h1>Synergy Explorer</h1>
<p>2つの要因がもたらす隠れた相乗効果を、インタラクティブなヒートマップで探検します。</p>
</header>
<main>
<div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '2rem' }}>
<div>
<h4>処理パイプライン</h4>
<ul st
...