本章我们将会使用可视化完成 “哲学家和哲学流派的关系，哪些哲学家属于同一个流派？” 这个分析任务。

# 任务分析

首先我们需要拿到哲学家以及对应的哲学流派的关系数据，然后用一种可以表示包含关系的图表来进行可视化展示。

• 将哲学家以及关联的哲学流派的数据关联起来，获得要分析的数据
• 使用 CirclePacking 对数据进行可视化，通过这种图形嵌套的方式可以很好地看清数据的层次关系
• 获取数据洞察

# 可视分析

# 获取数据

相关数据在 Github 上（哲学流派、哲学家 以及 哲学家和哲学流派的关系数据)

# 用 Sparrow 绘制 CirclePacking

在绘制 CirclePacking 之前，我们需要了解 CirclePacking。

CirclePacking 也称为圆形树图，是矩阵树图的变体。它的图元使用的是圆圈而不是矩形，每个分支都表示为圆，其子分支表示为其内部的圆。每个圆的区域也可用于表示额外的任意值，如数量或文件大小，数值越大，圆的区域大小越大。

此外，颜色也可以用于分配类别或通过不同的色调表示另一个变量。

CirclePacking 不像矩阵树图那样空间效率高，因为圈子里有很多空位。尽管如此，CirclePacking 实际上揭示了比矩阵树图更好的层次结构。

和力导向图一样，Sparrow 也没有实现 CirclePacking 的布局算法，所以这里我们使用 d3-hierarchy 里面相关的布局算法。

(async () => {
  // 请求数据
  const URLS = [
    "https://gw.alipayobjects.com/os/bmw-prod/d345d2d7-a35d-4d27-af92-4982b3e6b213.json",
    "https://gw.alipayobjects.com/os/bmw-prod/188bb992-7a9b-4e0e-a036-d1d0e4269738.json",
    "https://gw.alipayobjects.com/os/bmw-prod/61a39597-9564-4f7e-9eb3-3bdd2280061d.json",
  ];
  const [people, schools, relations] = await Promise.all(
    URLS.map(async (url) => {
      const response = await fetch(url);
      return await response.