四维数据可视化：气泡图中的时间

气泡图将大量信息优雅地压缩为单个可视化，气泡大小增加了第三个维度。但是，比较“之前”和“之后”状态通常至关重要。为了解决这个问题，我们建议在这些状态之间添加过渡，以创建直观的用户体验。

图表

由于我们找不到现成的解决方案，所以我们开发了自己的解决方案。这个挑战非常有趣，需要重新学习一些数学概念。

毫无疑问，可视化中最具挑战性的部分是两个圆圈之间的过渡——之前和之后的状态。为了简化，我们专注于解决单个案例，然后可以在循环中扩展该案例以生成必要数量的过渡。

基本元素，作者提供的图像

要构建这样的图形，让我们首先将其分解为三个部分：两个圆圈和一个连接它们的多边形（灰色）。

基本元素分解，图片来自作者

构建两个圆很简单——我们知道它们的圆心和半径。剩下的任务是构造一个四边形多边形，其形式如下：

多边形，图片来自作者

这个多边形的构造归结为找到其顶点的坐标。这是最有趣的任务，我们将进一步解决它。

从多边形到切线，图片来自作者

要计算从点 (x1, y1) 到直线 ax+y+b=0 的距离，公式为：

(x1, y1) ax+y+b=0

从点到直线的距离，图片来自作者

在我们的例子中，距离 (d) 等于圆半径 (r)。因此，

d r

到半径的距离，作者的图像

将等式的两边乘以 a**2+1 后，我们得到：

a**2+1

基础数学，作者的图像

将所有内容移到一边并将等式设置为零后，我们得到：

import . as as as .