数据可视化

数据可视化是将数据通过图形化手段呈现的学科与技术，它借助视觉通道（位置、长度、颜色、形状等）将抽象的数值信息映射为直观的图形元素，帮助人们快速发现数据中的模式、趋势和异常。在前端领域，数据可视化库主要分为两大阵营：以 ECharts 为代表的高层声明式图表库，和以 D3.js 为代表的底层可视化库。本文将全面探讨数据可视化的核心技术、工程实践与设计原则。

ECharts：声明式图表框架

ECharts 是 Apache 基金会旗下的开源可视化库，基于 ZRender 轻量级 Canvas 引擎实现。它采用声明式配置的编程范式，开发者只需要通过一个 JSON 风格的配置对象描述"图表长什么样"，ECharts 便负责完成所有绘制和交互逻辑。

声明式配置

ECharts 的核心思想是将图表的每一个方面——数据、坐标系、视觉映射、交互行为——抽象为配置项。整套配置体系被归纳为 option 对象，其基本结构如下：

typescript

const option = {
  // 数据集：支持多种格式
  dataset: { source: [... ] },
  // 坐标系：直角坐标系、极坐标系、地理坐标系等
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  // 系列：决定图表类型
  series: [{ type: 'line', data: [...] }],
  // 视觉映射：将数据映射到颜色、大小等视觉通道
  visualMap: { min: 0, max: 100, ... },
  // 交互组件
  tooltip: { trigger: 'axis' },
  dataZoom: [{}],
};

这种声明式设计的优势在于：关注点分离——业务逻辑关注数据的组织，配置描述关注视觉呈现，二者互不干扰；可序列化——配置对象可以轻松地通过 JSON 传输、存储或从后端动态生成；可组合——坐标系、系列、组件之间遵循严格的层级关系，可以灵活组合出数千种图表变体。

图表类型覆盖

ECharts 内置了 20 多种图表类型，覆盖日常开发中几乎所有的可视化需求：

常规统计图表：折线图、柱状图、饼图、散点图、雷达图、漏斗图、仪表盘
关系与流程：关系图（力导向布局）、桑基图、树图、矩形树图
地理空间：地图（GeoJSON/矢量瓦片）、热力图、散点地图
多维数据：平行坐标系、盒须图（箱线图）
时序与流式：K 线图（烛形图）、河流图、主题河流

每种图表类型都经过精心设计，默认提供合理的交互行为（悬停高亮、数据提示、图例切换等），真正做到开箱即用。

组件系统

ECharts 的组件系统是其可扩展性的基石。每个组件都有明确的职责：

组件	职责
title	图表标题与副标题
tooltip	鼠标悬浮时的数据提示框
legend	图例，用于筛选系列
dataZoom	数据区域缩放与滑动
visualMap	视觉映射组件，将数据映射为颜色/大小
toolbox	工具箱（保存图片、数据视图、刷新等）
graphic	自定义图形元素，用于在图表上叠加标注

组件的设计遵循单一职责原则，每个组件只负责一个视觉或交互方面的功能，通过配置项的方向（left/right/top/bottom）和绝对定位来灵活布局。

响应式适配

ECharts 提供了三层响应式能力：

容器自适应：通过监听 window.resize 事件自动调用 chart.resize()，使图表铺满容器宽高变化后的空间。
媒体查询：通过 media 配置项，可以为不同屏幕尺寸定义不同的样式规则——例如在小屏上隐藏图例、调小字体。
百分比定位：所有位置属性（left、right、top、bottom）都支持百分比值，相对于容器而非绝对值。

大数据量渲染

ECharts 在渲染大规模数据时表现出色，这得益于其底层引擎的多种优化策略：

Canvas 批量绘制：所有图形元素在 Canvas 上以批处理方式一次性绘制，避免频繁的 DOM 操作。
采样（Sampler）：当数据量超过阈值（默认约 2000 条）时，ECharts 会自动启用采样算法。支持 'lttb'（Largest-Triangle-Three-Buckets）、'average'、'min'、'max'、'sum' 等多种采样策略，其中 LTTB 能在保持趋势形状的前提下大幅减少数据点数。
渐进式渲染：对于数据量极大的场景（百万级），ECharts 支持渐进式渲染，将数据分批绘制，保证用户在渲染过程中仍能进行交互。

配置采样方式：

typescript

series: [{
  type: 'line',
  sampling: 'lttb',
  data: largeDataset // 数万乃至数十万个数据点
}]

D3.js 原理

D3.js（Data-Driven Documents）是一个低层级的可视化库，它不提供现成的图表类型，而是提供了直接操作 DOM/SVG 的数据绑定机制和丰富的数学工具。D3 的核心哲学是"用数据驱动文档"——开发者描述数据与视觉元素之间的映射关系，D3 负责计算并更新 DOM。

数据绑定（Data Join）

D3 最核心的概念是数据绑定。通过 selection.data() 方法，将数组数据与 DOM 元素建立一一映射关系：

javascript

const circles = svg.selectAll('circle')
  .data(dataset);

这行代码建立了数据与选择集之间的关联，每个数据项对应一个 <circle> 元素。数据绑定的本质是将数据"附着"在 DOM 元素上，后续的所有操作（属性计算、事件绑定）都可以直接通过 d => ... 的函数形式访问数据。

Enter-Update-Exit 模式

这是 D3 数据驱动的核心运作模式，也是现代前端声明式 UI 的思想先驱：

Enter：当数据项多于绑定元素时，为多余的数据创建新的 DOM 节点。
Update：更新已有元素以反映数据的变化（属性、样式、文本）。
Exit：当数据项少于绑定元素时，移除多余的 DOM 节点。

javascript

const circles = svg.selectAll('circle')
  .data(newData, d => d.id); // 第二个参数为 key 函数

// Enter：新数据创建新圆
circles.enter()
  .append('circle')
  .attr('r', 5)
  .merge(circles) // 合并 enter 和 update
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y));

// Exit：多余元素渐出后移除
circles.exit()
  .transition()
  .duration(500)
  .attr('r', 0)
  .remove();

这种模式使得 D3 可以自然地处理数据的增删和变化，而无需开发者手动管理 DOM 的创建与销毁。

SVG 操作

D3 提供了对 SVG 的全面操作能力，与标准 DOM API 相比更加简洁和声明式：

属性操作：selection.attr('fill', 'steelblue') 等同于 element.setAttribute('fill', 'steelblue')
样式操作：selection.style('opacity', 0.5)
类操作：selection.classed('active', true)
属性值作为函数：几乎所有方法都接受函数参数，使得视觉属性可以动态绑定到数据

d3-shape 模块进一步封装了常见 SVG 路径的计算逻辑：

d3.line() / d3.area()：生成折线和面积图的路径
d3.arc()：生成圆弧路径（饼图扇区）
d3.symbol()：生成常见图形符号（圆、方、菱形等）
d3.ribbon() / d3.link()：用于和弦图和力导向图的连线

比例尺（Scales）

比例尺是 D3 的另一个核心抽象，它负责将数据空间（domain）映射到屏幕空间（range）。没有比例尺的 D3 程序是不完整的。

javascript

// 线性比例尺：连续数据 → 连续像素
const xScale = d3.scaleLinear()
  .domain([0, 100])  // 数据范围
  .range([0, 800]);  // 屏幕范围

// 时间比例尺：Date 对象 → 像素
const timeScale = d3.scaleTime()
  .domain([new Date(2024, 0, 1), new Date(2024, 11, 31)])
  .range([0, 800]);

// 序数比例尺：离散类别 → 离散颜色
const colorScale = d3.scaleOrdinal()
  .domain(['A', 'B', 'C'])
  .range(['#e41a1c', '#377eb8', '#4daf4a']);

// 平方根比例尺：适合聚焦小值差异
const sqrtScale = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 50]);

除了映射功能，比例尺还提供了刻度生成器（scale.ticks() 和 scale.tickFormat()），用于自动计算坐标轴上的刻度数量和标签格式，省去了手动计算刻度的繁琐。

布局（Layouts）

D3 的布局模块是数据转换器，它将原始数据转换为适合特定图表类型的视觉数据：

饼图布局（d3.pie()）：将数值数组转换为起始角度和终止角度
堆叠布局（d3.stack()）：将多维数据转换为堆叠的基线偏移
力导向布局（d3.forceSimulation()）：通过物理模拟计算节点位置，适用于网络/关系图
树布局（d3.tree() / d3.cluster()）：计算树形结构节点的 x/y 坐标
弦布局（d3.chord()）：计算和弦图所需的弧和 ribbons

布局的输出是标准的 JavaScript 对象数组，可以直接作为比例尺和图形生成器的输入，体现了 D3 的数据流式设计哲学。

ECharts 与 D3.js 对比

维度	ECharts	D3.js
抽象层次	高层封装，声明式配置	底层工具，命令式+声明式混合
学习曲线	较低，文档完善，示例丰富	较高，需要理解 SVG/DOM/数据绑定
开发效率	极高，几行配置即可生成复杂图表	较低，需要自行构建所有视觉元素
渲染引擎	Canvas（ZRender）	SVG（默认），也支持 Canvas
定制自由度	中等，支持自定义系列和图形组件	极高，几乎没有限制
动画支持	内置丰富动画和过渡效果	通过 transition 实现，灵活但需手写
大数据量	优秀，内置采样和渐进渲染	依赖开发者自行优化
交互能力	内置 tooltip、dataZoom、图例等	需要自行实现交互逻辑
包体积	完整版约 800KB（支持按需加载）	核心约 80KB（模块化）
适用场景	标准商业报表、仪表盘、运维监控	学术出版、定制可视化、数据艺术

选型建议：如果团队需要快速交付标准图表且定制需求有限，优先选择 ECharts；如果需要高度定制化的可视化作品（如新闻数据可视化、学术图表），或需要将可视化与其他交互深度集成，D3.js 是更好的选择。实际工程中，两者也可以共存——用 ECharts 承担 80% 的通用图表，用 D3.js 处理那 20% 的特殊需求。

图表组件封装

在实际项目中，直接使用 ECharts 或 D3.js 裸写图表会导致代码重复、难以维护。合理的封装是构建可维护可视化应用的关键。

设计模式

图表组件封装通常采用以下设计模式：

1. 容器组件模式：将图表封装为独立的容器组件，接收数据、配置等 Props，内部管理图表的生命周期（初始化、更新、销毁）。

<StockChart
  :data="klineData"
  :options="{ theme: 'dark' }"
  @zoom="handleZoom"
/>

2. 高阶组件/组合式函数模式：将图表逻辑提取为 Hooks 或 Composables，让开发者可以在任何组件中复用图表能力。

typescript

// React Hook
function useECharts(containerRef, option) {
  const chartRef = useRef(null);

  useEffect(() => {
    chartRef.current = echarts.init(containerRef.current);
    return () => chartRef.current?.dispose();
  }, []);

  useEffect(() => {
    chartRef.current?.setOption(option);
  }, [option]);

  return chartRef;
}

配置合并

业务中常需要将全局默认配置与业务配置进行深度合并。推荐使用深合并策略：

javascript

function mergeChartOptions(globalDefaults, businessOptions) {
  // 使用 lodash.merge 或手写深合并
  return _.merge({}, globalDefaults, businessOptions);
}

const baseOption = {
  tooltip: { trigger: 'axis' },
  grid: { containLabel: true },
  legend: { show: true },
};

const actualOption = mergeChartOptions(baseOption, {
  series: [{ type: 'line', data: [ ... ] }]
});

自适应与主题切换

自适应是现代 Web 应用的基本要求。图表组件需要响应容器尺寸变化和主题状态：

javascript

// 使用 ResizeObserver 替代 window.resize，更精确
const resizeObserver = new ResizeObserver(entries => {
  const { width, height } = entries[0].contentRect;
  chart.resize({ width, height });
});
resizeObserver.observe(containerRef);

// 主题切换
function applyTheme(theme) {
  const themes = {
    light: { backgroundColor: '#fff', textColor: '#333' },
    dark: { backgroundColor: '#1a1a2e', textColor: '#e0e0e0' },
  };
  chart.setOption({
    backgroundColor: themes[theme].backgroundColor,
    textStyle: { color: themes[theme].textColor },
  });
}

React 完整封装示例

tsx

import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 按需注册组件
echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

interface ChartProps {
  option: echarts.EChartsOption;
  theme?: 'light' | 'dark';
  width?: number | string;
  height?: number | string;
}

export const Chart: React.FC<ChartProps> = ({ option, theme = 'light', width = '100%', height = 400 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    chartRef.current = echarts.init(containerRef.current, theme);

    const observer = new ResizeObserver(() => {
      chartRef.current?.resize();
    });
    observer.observe(containerRef.current);

    return () => {
      observer.disconnect();
      chartRef.current?.dispose();
    };
  }, [theme]);

  useEffect(() => {
    chartRef.current?.setOption(option);
  }, [option]);

  return <div ref={containerRef} style={{ width, height }} />;
};

Vue 完整封装示例

vue

<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, shallowRef } from 'vue';
import * as echarts from 'echarts/core';

const props = defineProps({
  option: Object,
  theme: { type: String, default: 'light' },
  width: { type: String, default: '100%' },
  height: { type: String, default: '400px' },
});

const chartRef = ref(null);
const chart = shallowRef(null);

onMounted(() => {
  chart.value = echarts.init(chartRef.value, props.theme);
  chart.value.setOption(props.option);

  const observer = new ResizeObserver(() => {
    chart.value?.resize();
  });
  observer.observe(chartRef.value);
});

onUnmounted(() => {
  chart.value?.dispose();
});

watch(() => props.option, (val) => {
  chart.value?.setOption(val);
}, { deep: true });

watch(() => props.theme, () => {
  chart.value?.dispose();
  chart.value = echarts.init(chartRef.value, props.theme);
  chart.value.setOption(props.option);
});
</script>

大数据量渲染优化

当数据量达到万级乃至百万级时，前端的渲染性能成为核心挑战。以下从四个维度展开优化策略：

Canvas 渲染

对于大数据量场景，Canvas 相比 SVG 有数量级的性能优势。Canvas 的渲染本质是像素操作，DOM 树的节点数始终为 1，不受数据量影响。

javascript

function renderLargeScatter(ctx, data, width, height) {
  const xScale = (v) => (v / 100) * width;
  const yScale = (v) => (v / 100) * height;
  const colorScale = (v) => v > 50 ? '#e74c3c' : '#3498db';

  ctx.clearRect(0, 0, width, height);
  for (let i = 0; i < data.length; i++) {
    const d = data[i];
    ctx.beginPath();
    ctx.arc(xScale(d.x), yScale(d.y), 2, 0, Math.PI * 2);
    ctx.fillStyle = colorScale(d.z);
    ctx.fill();
  }
}

关键优化点：

避免在循环中创建新对象
使用 Float32Array 等 TypedArray 替代普通数组
合并同类绘制操作，减少 beginPath/fill 调用次数
对离屏 Canvas 进行预渲染

数据采样

当数据点数量超过屏幕像素宽度时，全部绘制不仅浪费性能，还会造成视觉混乱。采样算法在保持数据趋势的前提下减少数据量：

LTTB（Largest-Triangle-Three-Buckets）：将数据分段，在每个桶中选择使三角形面积最大的点，能很好地保留峰值和谷值。ECharts 和许多时序数据库均采用此算法。
M4 聚合：在每个桶中保留四个关键点——最小值、最大值、第一个值、最后一个值——完整保留每个区间的极值信息。
随机采样：适用于对趋势不太敏感但需要极高性能的场景。

javascript

// 简化的 LTTB 实现示意
function lttb(data, threshold) {
  if (data.length <= threshold) return data;
  const bucketSize = (data.length - 2) / (threshold - 2);
  const sampled = [data[0]];
  let a = 0;
  for (let i = 0; i < threshold - 2; i++) {
    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;
    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;
    // 在桶内寻找使三角形面积最大的点...
  }
  sampled.push(data[data.length - 1]);
  return sampled;
}

Web Worker 数据处理

将数据预处理、采样、布局计算等 CPU 密集型任务移入 Web Worker，避免阻塞主线程：

javascript

// main.js
const worker = new Worker('data-worker.js');
worker.postMessage({ rawData: largeDataset, type: 'sampling' });
worker.onmessage = (e) => {
  chart.setOption({ series: [{ data: e.data.sampled }] });
};

// data-worker.js
self.onmessage = (e) => {
  if (e.data.type === 'sampling') {
    const sampled = lttb(e.data.rawData, 2000);
    self.postMessage({ sampled });
  }
};

Web Worker 的优势在于：

数据处理与 UI 渲染并行进行
大数据集的筛选、聚合、转换不影响用户操作
对于 D3 的力导向布局，可以在 Worker 中运行物理模拟，只将最终坐标传回主线程

虚拟化

在可视化中，虚拟化不仅适用于列表，也适用于图表：

数据缩放虚拟化：只渲染当前 dataZoom 范围内的数据点，范围外的数据仅保留在内存中。
层级虚拟化：树图或矩形树图中，只渲染到指定层级的节点，下钻时才加载更多细节。
时间窗口虚拟化：对于实时流数据，维护一个固定长度的时间窗口，窗口外数据自动丢弃。

ECharts 的 dataZoom 和 sampling 结合使用，即可实现数据层面的虚拟化——无论原始数据有几百万条，实际绘制的点数始终保持在可控范围内。

Canvas vs SVG 选型对比

维度	Canvas	SVG
渲染方式	像素位图（立即模式）	矢量图形（保留模式）
DOM 节点	单一 `<canvas>` 元素	每个图形对应一个 DOM 节点
性能 - 大数据	优秀，几万节点无明显压力	下降，数千节点后开始卡顿
性能 - 小数据	略高但无明显差距	良好
交互能力	需自行实现命中检测	原生 DOM 事件，天然支持
动画	需通过 requestAnimationFrame 重绘	支持 CSS 动画、SMIL 动画
放大缩小	放大后模糊（位图特性）	无限清晰（矢量特性）
可访问性	差，内容对屏幕阅读器不可见	好，每个元素可标注 aria 属性
导出	可通过 toDataURL 导出图片	可通过 innerHTML 导出 SVG
适用场景	大数据量、实时更新、游戏	小数据、高保真打印、需要交互

工程建议：

数据点 < 1000 且需要丰富的鼠标交互：使用 SVG（D3.js）
数据点 > 5000 或需要高频更新：使用 Canvas（ECharts）
两者可混用：ECharts 的 Canvas 图表上可以通过 graphic 组件叠加 SVG 标注

可视化设计原则

技术实现只是可视化的手段，最终目的是有效传达信息。优秀的数据可视化作品始终遵循经过验证的设计原则。

Tufte 原则

统计学家 Edward Tufte 提出的数据可视化经典原则至今仍具有指导意义：

数据-墨水比最大化：剔除所有不承载数据的装饰元素，如 3D 效果、过度的网格线、无意义的渐变。让墨水尽可能用于呈现数据本身。
图表垃圾（Chartjunk）：避免冗余的刻度标签、过密的网格线、花哨的字体和阴影。Tufte 认为这些元素会干扰读者对数据的理解。
小多组图（Small Multiples）：用多个同比例的迷你图表并列展示不同维度的数据，方便对比。相比一张拥挤的大图，小多组图在面板大小相同的前提下传递了更多信息。
协变量最大化：一张图表应尽量承载多个相关变量的信息，帮助读者发现变量之间的关系。

text

// 数据-墨水比示意
// 差：3D 柱状图 + 渐变填充 + 密集网格线 + 背景图
// 好：2D 柱状图 + 纯色填充 + 轻网格 + 白底

颜色选择

颜色是可视化中最容易被误用的视觉通道。合理选择颜色需要遵循以下准则：

定性色板：用于区分不同类别，选择色相差异大的颜色（如 D3 的 schemeCategory10）。避免使用色盲难以区分的红绿组合，推荐使用蓝橙或紫绿组合。
顺序色板：用于表示数值大小，选择明度渐变的单色系（如从浅蓝到深蓝）。推荐使用 ColorBrewer 的 Blues、Greens 等方案。
发散色板：用于表示偏离中心值的数据（如正负温差、涨跌），选择两种不同色相从中心向两端渐变。推荐 ColorBrewer 的 RdBu、PiYG。
可访问性：确保颜色对比度满足 WCAG AA 标准（对比度 >= 4.5:1）。使用 chroma.js 或 d3-scale-chromatic 生成色盲友好的色板。

javascript

// d3-scale-chromatic 色板示例
import { schemeCategory10, interpolateBlues, interpolateRdBu } from 'd3-scale-chromatic';

// 定性：10 种类别色
const colors = schemeCategory10;
// 顺序：9 级蓝色渐变
const seqColor = t => interpolateBlues(t);
// 发散：11 级红-蓝
const divColor = t => interpolateRdBu(t);

可访问性（Accessibility）

数据可视化的可访问性常被忽视，但它是 Web 内容无障碍指南（WCAG）的重要组成部分：

非文本内容的文本替代：为 SVG 图形添加 <title> 和 <desc>，或者通过 aria-label 描述图表的关键信息。
颜色独立传达：除了颜色，还应使用形状、纹理、标签来区分数据类别。ECharts 支持在柱状图上叠加图案纹理。
键盘导航：确保所有交互（悬停提示、数据筛选）可通过键盘完成。提供 tab 导航和 Enter/Space 激活。
屏幕阅读器支持：使用 role="img" 标记图表容器，配合 aria-label 提供数据摘要。
足够的对比度：文本和背景的对比度至少为 4.5:1，图形元素与背景的对比度至少为 3:1。

交互设计

静态图表只能展示预设的视角，而交互让用户自主探索数据：

概览+细节：先展示数据全貌，通过缩放、悬停、点击等手段查看具体细节。典型的如 dataZoom 组件。
筛选与高亮：允许用户通过图例筛选系列，或悬停高亮相关数据点，降低视觉混乱。
动态排序：对于排名数据，动态排序的条形图（bar chart race）在展示变化趋势方面比静态排序更直观。
过渡动画：数据更新时使用平滑的过渡动画，帮助用户理解数据从之前状态到新状态的变化过程。动画时长建议控制在 300~600ms 之间。
撤销/回溯：提供返回上一步或重置视图的能力，让用户放心探索。

参考 Demo

以下 Demo 展示了 Canvas 绘制的实时股票 K 线图与关系图谱的联合呈现，涵盖了大分辨力渲染、实时数据更新、缩放平移交互等技术点：

数据可视化 ​

ECharts：声明式图表框架 ​

声明式配置 ​

图表类型覆盖 ​

组件系统 ​

响应式适配 ​

大数据量渲染 ​

D3.js 原理 ​

数据绑定（Data Join） ​

Enter-Update-Exit 模式 ​

SVG 操作 ​

比例尺（Scales） ​

布局（Layouts） ​

ECharts 与 D3.js 对比 ​

图表组件封装 ​

设计模式 ​

配置合并 ​

自适应与主题切换 ​

React 完整封装示例 ​

Vue 完整封装示例 ​

大数据量渲染优化 ​

Canvas 渲染 ​

数据采样 ​

Web Worker 数据处理 ​

虚拟化 ​

Canvas vs SVG 选型对比 ​

可视化设计原则 ​

Tufte 原则 ​

颜色选择 ​

可访问性（Accessibility） ​

交互设计 ​

参考 Demo ​

数据可视化

ECharts：声明式图表框架

声明式配置

图表类型覆盖

组件系统

响应式适配

大数据量渲染

D3.js 原理

数据绑定（Data Join）

Enter-Update-Exit 模式

SVG 操作

比例尺（Scales）

布局（Layouts）

ECharts 与 D3.js 对比

图表组件封装

设计模式

配置合并

自适应与主题切换

React 完整封装示例

Vue 完整封装示例

大数据量渲染优化

Canvas 渲染

数据采样

Web Worker 数据处理

虚拟化

Canvas vs SVG 选型对比

可视化设计原则

Tufte 原则

颜色选择

可访问性（Accessibility）

交互设计

参考 Demo