用 Claude 生成交互式数据可视化

使用 Claude 的功能结合交互式可视化的高级用法

一个复杂的 Next.js 应用程序，结合 Claude 的功能与交互式数据可视化来通过聊天分析财务数据。

智能数据分析：由 Claude 驱动（使用 Claude 3 Haiku & Claude 3.5 Sonnet）

多格式文件上传支持

• 文本/代码文件（.txt、.md、.html、.py、.csv 等）
• PDF 文档（支持包含文本的常规 PDF，不支持扫描文档）
• 图片

交互式数据可视化

基于上下文和分析的数据，Claude 可以生成以下图表：

• 折线图（时间序列数据和趋势）
• 柱状图（单一指标对比）
• 多系列柱状图（多个指标对比）
• 面积图（随时间变化的数量/体积）
• 堆积面积图（组件分解）
• 饼图（分布分析）

前置要求

• Node.js 18+ 已安装
• Claude API 密钥（用于 Claude 集成）

安装

克隆仓库：

git clone https://github.com/anthropics/anthropic-quickstarts.git
cd anthropic-quickstarts/financial-data-analyst

安装依赖：

npm install

在根目录创建 .env.local 文件：

ANTHROPIC_API_KEY=your_api_key_here

运行开发服务器：

npm run dev

使用浏览器打开 http://localhost:3000 查看结果。

技术栈

前端：

• Next.js 14
• React
• TailwindCSS
• Shadcn/ui 组件
• Recharts（用于数据可视化）
• PDF.js（用于 PDF 处理）

后端：

• Next.js API 路由
• Edge Runtime
• Anthropic SDK

助手可以帮助的各种财务分析任务

数据提取和分析

• 上传财务文档
• 提取关键指标
• 分析趋势和模式

可视化创建

• 基于数据生成图表
• 自定义可视化
• 对比多个指标

交互式分析

• 提出关于数据的问题
• 请求特定的可视化
• 获得详细的解释

有趣的用例

虽然主要设计用于财务分析，但该 AI 助手可以适配到各种引人入胜的应用场景：

环境数据分析

• 分析气候变化趋势
• 可视化一段时间内的污染水平
• 对比各地区的可再生能源采用率

运动员表现追踪

• 上传运动员表现数据
• 生成关键指标的可视化
• 分析团队统计数据中的趋势和模式

社交媒体分析

• 处理来自各种平台的参与度数据
• 创建显示粉丝增长和互动率的图表
• 分析用户评论中的情感趋势

教育进度追踪

• 上传学生表现数据
• 可视化学习进度
• 对比不同的教学方法或课程

健康和健身监测

• 处理来自穿戴设备的个人健康数据
• 为步数、心率、睡眠模式等指标创建图表
• 分析长期健康趋势并提供见解

你甚至可以使用图表和图像来创建有趣的效果，比如使用饼图来查看图片中最常见的内容。