欢迎来到我的作品展示页面
了解更多
```
#### CSS：页面样式
```css
body {
font-family: "Helvetica", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
```
#### JavaScript：页面交互
```javascript
// 点击按钮时显示消息
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了！");
});
```
### 2.4 前端框架简介
对于更复杂的Web应用，可以使用前端框架提升开发效率：
| 框架 | 特点 | 适用场景 |
|------|------|---------|
| Vue.js | 渐进式框架，学习曲线平缓 | 交互式数据展示 |
| React | 组件化开发，生态最丰富 | 复杂单页应用 |
| Streamlit | Python编写Web应用 | AI模型展示、数据分析仪表板 |
**Streamlit 示例**（用Python快速构建AI展示页面）：
```python
import streamlit as st
st.title("图像分类演示")
st.write("上传一张图片，AI将识别其中的内容")
uploaded_file = st.file_uploader("选择图片", type=["jpg", "png"])
if uploaded_file:
st.image(uploaded_file, caption="上传的图片")
st.write("分类结果：建筑（置信度 95%）")
```
```bash
# 安装并运行
pip install streamlit
streamlit run app.py
```
### 2.5 网站部署方式
| 方式 | 特点 | 费用 |
|------|------|------|
| GitHub Pages | 适合静态网站，免费 | 免费 |
| Vercel / Netlify | 支持前端框架自动部署 | 免费额度 |
| 云服务器（阿里云/腾讯云） | 完全控制，适合动态网站 | 按需付费 |
| Hugging Face Spaces | 适合AI模型演示 | 免费额度 |
## 3 在线数据可视化
### 3.1 为什么需要数据可视化
设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。
### 3.2 Python可视化库
#### Matplotlib：基础绑图
```python
import matplotlib.pyplot as plt
# 折线图
epochs = range(1, 11)
train_loss = [0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04, 0.03]
val_loss = [0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23, 0.24]
plt.figure(figsize=(8, 5))
plt.plot(epochs, train_loss, 'b-o', label='Train Loss')
plt.plot(epochs, val_loss, 'r-s', label='Val Loss')
plt.xlabel('Epoch')
plt.ylabel('Loss')
plt.title('Training vs Validation Loss')
plt.legend()
plt.grid(True, alpha=0.3)
plt.savefig('loss_comparison.png', dpi=150, bbox_inches='tight')
plt.show()
```
#### Seaborn：统计可视化
基于Matplotlib，提供更美观的统计图表。
```python
import seaborn as sns
# 热力图：相关性矩阵
import numpy as np
data = np.random.randn(10, 10)
corr = np.corrcoef(data)
sns.heatmap(corr, annot=True, cmap='coolwarm')
plt.title('Feature Correlation Heatmap')
plt.savefig('heatmap.png', dpi=150)
```
#### Plotly：交互式可视化
支持鼠标悬停、缩放、导出等交互操作，适合Web展示。
```python
import plotly.express as px
# 交互式散点图
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
color="species", size="petal_length",
title="Iris Dataset Scatter Plot")
fig.write_html("scatter.html") # 导出为网页
fig.show()
```
### 3.3 在线可视化工具
无需编程，通过网页界面即可创建可视化：
| 工具 | 特点 | 网址 |
|------|------|------|
| Observable | JavaScript驱动的交互式笔记本 | [observablehq.com](https://observablehq.com/) |
| Flourish | 拖拽式数据可视化，模板丰富 | [flourish.studio](https://flourish.studio/) |
| Datawrapper | 适合制作新闻级图表 | [datawrapper.de](https://www.datawrapper.de/) |
| Tableau Public | 强大的商业智能可视化 | [public.tableau.com](https://public.tableau.com/) |
| ECharts | 百度开源的交互式图表库 | [echarts.apache.org](https://echarts.apache.org/) |
### 3.4 地理空间可视化
设计领域经常涉及地理和空间数据的可视化：
| 工具 | 特点 | 适用场景 |
|------|------|---------|
| Folium | Python地图可视化库 | 在地图上标注数据点 |
| Kepler.gl | Uber开源的大规模地理数据可视化 | 城市数据分析 |
| Mapbox | 自定义地图样式 | 设计精美的交互地图 |
| QGIS | 开源GIS桌面软件 | 空间分析与制图 |
**Folium 示例**（在地图上标记位置）：
```python
import folium
# 创建地图（以某坐标为中心）
m = folium.Map(location=[39.9, 116.4], zoom_start=12)
# 添加标记
folium.Marker(
[39.9, 116.4],
popup="设计学院",
icon=folium.Icon(color="blue", icon="info-sign")
).add_to(m)
# 保存为网页
m.save("map.html")
```
### 3.5 可视化设计原则
| 原则 | 说明 |
|------|------|
| 选择合适的图表类型 | 比较→柱状图，趋势→折线图，占比→饼图，关系→散点图 |
| 保持简洁 | 每张图只传达一个核心信息，避免过度装饰 |
| 使用合理的色彩 | 同类数据用同色系，对比数据用对比色，注意色盲友好 |
| 标注清晰 | 标题、轴标签、图例、数据来源缺一不可 |
| 交互增强 | 在线可视化支持筛选、缩放、悬停查看详情 |