19、数据可视化：流式数据与Voronoi图、热力图

数据可视化：流式数据与Voronoi图、热力图

1. 流式数据可视化

流式数据可视化可以通过不同方式实现，下面将介绍几种常见的方法。

1.1 流式图表

首先可以创建一个简单的折线图，基于鼠标移动显示实时信息。还可以连接到一个简单的WebSocket服务器，获取心电图和呼吸信息，并将接收到的数据直接流式传输到两个折线图中。另外，流图也是一种流式区域图的替代方案，它可以对多个流式数据进行美观的可视化。

例如，在创建流图时，由于D3的默认路径插值器在插值路径时会产生摆动效果，而不是沿y轴移动。在过渡完成后，需要移动数据，将数据分配给 ._old 变量，以便下次在插值器中使用，并启动新的过渡。最后设置一个遮罩来隐藏波动元素。以下是相关代码：

svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", x(totalDatapoints-4))
    .attr("height", height + margin.bottom + margin.top);
var g = svg.append("g").attr("clip-path", "url(#clip)");

1.2 在地图上可视化Meetup.com的RSVP数据

可以将Web前端连接到Meetup的公共流式API，该API提供公共会议的RSVP信息。当连接到该端点时，会收到包含有用信