本章我们将以地理视角看哲学家，学会使用地理可视化完成 “苏菲的世界中，哲学中心如何变化？” 这个任务。

# 任务分析

我们要分析哲学家的地理位置分布，首先需要找到与“地理”相关的信息，这里刚好有哲学家的所在国家名，我们以哲学家的所在国家作为地理数据，就可以分析“哲学家所在国家分布情况”，然后我们可以利用哲学家的出生日期来分析“哲学中心如何变化”。

大致需要以下几步完成任务

拾取全世界各个国家的地理数据
将国家名与拾取到的国家地理进行关联
使用地理数据可视化库 L7 & L7Plot 将数据给可视化出来
获取数据洞察

下面按照这几个步骤，实现一个哲学家所在国的区域分布图与哲学中心变化图，并从中获得数据洞察。

# 可视分析

# 获取数据

我们要分析的数据”哲学家的所在国家”，数据格式如下：

name	points	lifespan	country
泰利斯	“水是万物之源。”	[-624, -546]	希腊
安纳克西曼德	“形成万物的物质不可能是一定是这些已经被创造出来的物质。”	[-610, -546]	希腊
亚里士多德	“现实生活中最高层次的事物不是那些我们用理性来探索的事物，而是我们用感官察觉的事物。”,“事物是由本身的形式与质料和谐一致的事物所构成的，质料总是致力于实现一种内在的可能性。”	[-384, -322]	雅典
苏格拉底	“我只知道一件事情，就是我一无所知。”, “明辨是非的能力就存在于人的理性中，而不存在于社会中。”	[-470, -399]	雅典
普罗汀	“宇宙间万事万物都是一体的，因为上帝存在于万事万物之中。”	[-270, -205]	意大利

接下来拾取全世界各个国家的地理数据，这里使用地理数据共享开源组织 openstreetmap 的数据，为了方便使用采用 GeoJson 格式的地理数据，数据格式如下：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [ // ... ]
      },
      "properties": {
        "name": "希腊",
        "centroid": [22.989178297364294,39.04355317366236]
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [ // ... ]
      },
      "properties": {
        "name": "意大利",
        "centroid": [12.075174042231398,42.78877076169903]
      }
    },
  ]
}

@前端进阶之旅: 代码已经复制到剪贴板

# Sparrow 绘制气泡地图

有了数据之后，我们首先尝试用 Sparrow 去绘制一个气泡地图。如果在书中出现了该国家的哲学家，那么这个国家会有一个气泡，出现的哲学家数量越多，这个地方的气泡越大。

同样 Sparrow 本身不具备计算地图路径的能力，所以这个地方我们借助 d3-geo 去完成我们的可视化。

(async () => {
  //@see https://observablehq.com/@d3/world-airports?collection=@d3/d3-geo

  // 获取数据
  const URLS = [
    "https://gw.alipayobjects.com/os/bmw-prod/a51018d2-69ef-4e6b-8095-5d4f5815166e.json",
    "https://gw.alipayobjects.com/os/bmw-prod/d345d2d7-a35d-4d27-af92-4982b3e6b213.json",
    "https://gw.alipayobjects.com/os/bmw-prod/1070dc04-329e-4655-95b0-f1dc094206b1.json",
  ];
  const [world, people, country] = await Promise.all(
    URLS.map(async (url) => {
      const response = await fetch(url);
      return await response.json();
    })
  );

  const projection = d3.geoNaturalEarth1();

  // 确定视图大小
  const outline = { type: "Sphere" };
  const width = 800;
  const height = (() => {
    const [[x0, y0], [x1, y1]] = d3
      .geoPath(projection.fitWidth(width, outline))
      .bounds(outline);
    const dy = Math.ceil(y1 - y0),
      l = Math.min(Math.ceil(x1 - x0), dy);
    projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
    return dy;
  })();

  // compute paths data
  const path = d3.geoPath(projection);
  const land = topojson.feature(world, world.objects.land);
  const graticule = d3.geoGraticule10();
  const paths = [
    { d: path(land), fill: "#ddd", stroke: "none" },
    { d: path(graticule), fill: "none", stroke: "#ddd" },
    { d: path(outline), fill: "none", stroke: "black" },
  ];

  // 计算气泡数据
  const countryCentroid = new Map(
    country.features
      .filter((d) => d.properties.name)
      .map((d) => [d.properties.name, d.properties.centroid])
  );
  const countryName = (d) => (d === "雅典" ? "希腊" : d);
  const countries = Array.from(
    d3.group(people, (d) => d.country),
    ([country, people]) => {
      const [x, y] = projection(countryCentroid.get(countryName(country)));
      return {
        country,
        count: people.length,
        x,
        y,
      };
    }
  );

  // 绘制
  return sp.plot({
    type: "layer",
    width,
    height,
    children: [
      {
        type: "path",
        data: paths,
        scales: {
          color: { type: "identity" },
        },
        guides: { color: { display: false } },
        encodings: {
          d: "d",
          fill: "fill",
          stroke: "stroke",
        },
      },
      {
        type: "point",
        guides: { x: { display: false }, y: { display: false } },
        scales: {
          y: { range: [0, 1], domain: [0, height] },
          x: { domain: [0, width] },
          r: { range: [3, 6] },
        },
        paddingLeft: 0,
        paddingTop: 0,
        paddingBottom: 0,
        paddingRight: 0,
        data: countries,
        encodings: {
          x: "x",
          y: "y",
          r: "count",
          fill: "steelblue",
          stroke: "steelblue",
        },
      },
    ],
  });
})();

@前端进阶之旅: 代码已经复制到剪贴板

虽然 Sparrow 已经把一个简单的地图绘制完成了，但是可以发现过程还是比较繁琐的，为了解决这个问题，我们来看看 AntV 的 L7 是如何绘制地图的。

# L7 绘制地图

L7 同样需要把地理数据给关联上，通过国家名称字段将我们拾取的地理数据关联，最后将数据处为理常用的 GeoJson 格式，需要注意的是，数据中的“雅典”是“希腊”的首都。

const MappingName = { 雅典: "希腊" };
const joinData = (philosophers, geoData) => {
  const philosopherCountryMap = philosophers.reduce(
    (countryMap, philosopher) => {
      const { country } = philosopher;
      const mappingCountry = MappingName[country] || country;
      if (countryMap[mappingCountry]) {
        countryMap[mappingCountry].push(philosopher);
      } else {
        countryMap[mappingCountry] = [philosopher];
      }
      return countryMap;
    },
    {}
  );
  const features = geoData.features.map((feature) => {
    const countryName = feature.properties.name;
    const philosophers = philosopherCountryMap[countryName] || [];
    const philosopherSum = philosophers.length;
    const currentFeature = Object.assign({}, feature, {
      properties: {
        ...feature.properties,
        philosophers,
        philosopherSum,
      },
    });

    return currentFeature;
  });
  const geoPhilosophers = Object.assign({}, geoData, { features });

  return geoPhilosophers;
};

@前端进阶之旅: 代码已经复制到剪贴板

我们有了数据，就可以开始利用数据做可视分析了。根据数据中各个国家的哲学家数量，我们先来实现一个气泡图，气泡的地理位置采用国家的行政中心，气泡大小与各个国家的哲学家数量正相关，这里可视化库我们使用 L7 。

绘制出来的效果见下图。从图中可以看出，利用气泡的方式只能看国家点的分布，接下来我们来做国家区域分布的图，利用区域的颜色映射哲学家的数量，这里使用 L7Plot 来完成一个区域分布图，关于 L7 与 L7Plot 的关系见后文“延伸”部分。

绘制出来的效果见下图。接下来我们以哲学家的出生日期为时间线，对相同生平区间的哲学家进行分组，来做一个哲学区域变化图，以时间递增顺序渲染哲学区域。

最后绘制出来的效果如下图所示，代码地址 visualize-sophie-world。

# 任务分析

# 可视分析

# 获取数据

# Sparrow 绘制气泡地图

# L7 绘制地图

# 数据洞察

# 延伸

分析 西方哲学中心的“迁徙之旅”|可视化专题

分析 西方哲学中心的“迁徙之旅”|可视化专题

分析西方哲学中心的“迁徙之旅”|可视化专题

分析西方哲学中心的“迁徙之旅”|可视化专题