本章我们将会使用可视化工具来分析苏菲的世界中，哲学家都在讨论什么八卦内容？这个问题最终可以抽象成“苏菲的世界中，涉及到的问题和回答的关键词是什么？”

# 任务分析

这个问题需要分析哲学问题和回答的关键词，分成几步：

罗列出问题和回答，然后将问题和回答进行分词，获得所有关键词以及出现频次，获得要分析的数据
使用词云图对关键词数据进行可视化，配合字体大小、颜色和频次关联，获得更好的视觉效果
获取数据洞察

下面会按照这几个步骤，去实现这样的一个词云图，并从中获得数据洞察。

# 数据处理

首先我们从《苏菲的世界》中，获取所有问题列表，以及所有的回答列表，然后使用社区开源的 nodejieba 进行关键词抽取。

const nodejieba = require('nodejieba');
const topN = 5;
const keywords = nodejieba.extract('世界上根本没有真正的变化，没有任何事物可以变成另外一种事物。', topN);

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

这里就不去过多介绍了，最后获取的关键词数据放在 GitHub 上（问题、回答观点）。

# 用 Sparrow 绘制词云

所谓的词云就是将关键字互不重叠的在画布上排列展示，文字的大小和词云的关键程度呈正相关。

因为 Sparrow 本身没有实现词云布局算法，所以这里我们将先使用 d3-cloud 去对词语进行布局，然后再用 Sparrow 去绘制。

(async () => {
  // 获得数据
  const response = await fetch(
    "https://gw.alipayobjects.com/os/bmw-prod/d345d2d7-a35d-4d27-af92-4982b3e6b213.json"
  );
  const data = await response.json();

  // 获得词语列表
  const words = data.flatMap((d) =>
    d.words.map(({ weight, word }) => ({
      value: weight,
      text: word,
      name: d.name,
    }))
  );

  // 用 d3-cloud 对文字进行布局
  const width = 640;
  const height = 480;
  const computedWords = await new Promise((resolve) =>
    d3.layout
      .cloud()
      .size([width, height])
      .words(words)
      .padding(2)
      .rotate(() => ~~(Math.random() * 2) * 90) // 文字的旋转角度
      .fontSize((d) => d.value * 2) // 字号
      .on("end", resolve) // 计算布局完成的回掉函数
      .start() // 开始进行布局
  );

  // 绘制处理好的文字
  return sp.plot({
    data: computedWords,
    type: "text",
    width,
    height,
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    guides: {
      x: { display: false },
      y: { display: false },
      color: { display: false },
    },
    scales: {
      fontSize: { type: "identity" },
      rotate: { type: "identity" },
      y: { range: [0, 1] }, // 默认的 range 是 [1, 0]
    },
    encodings: {
      x: "x",
      y: "y",
      rotate: "rotate",
      fontSize: "size",
      text: "text",
      fill: "name",
    },
    styles: {
      textAnchor: "middle",
    },
  });
})();

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

一个简单的词云图就绘制完成了，但是这个地方存在一个问题，就是不能通过我们那的可视化结果去判断每一个词是哪一个哲学家说的。

如果当鼠标移动到任意一个词上，会出现一个提示信息提示该词的来源就好了。可惜 Sparrow 不支持交互，所以接下来我们 AntV 的 G2 再来绘制一下词云。

# 用 G2 绘制词云

在用 G2 绘制词云图之前，我们需要了解 G2 是怎么理解和绘制图表的。G2 是基于图形语法的统计图表引擎，它通过：

不同的图元绘制不同类型的可视化图表。
通过数据映射，将数据和图元的视觉属性绑定起来，比如：color、size、shape 等等。

图元 Geometry	视觉属性通道

那么在绘制词云图的时候，我们使用 point 这个图元去绘制文字，然后文字的位置、大小、颜色都是和数据绑定的。所以绘制词云图分成为 3 个步骤。

视觉属性映射

将原始关键词的权重数据，通过数据转化，变化成文字的位置、大小、颜色信息，以便于下一步 G2 的绘制。

import DataSet from '@antv/data-set';

const dv = new DataSet().createView().source(data);
const fontSize = new Scale.Linear({
  range: [24, 70],
  domain: dv.range('value')
});
const [min, max] = dv.range('value');

dv.transform({
  type: 'tag-cloud',
  fields: ['word', 'value'],
  size: [800, 600], // 画布的大小
  font: 'Verdana',
  padding: 0,
  // 映射旋转角度
  rotate() {
    let random = ~~(Math.random() * 4) % 4;
    if (random === 2) {
      random = 0;
    }
    return random * 90; // 0, 90, 270
  },
  // 映射字体大小，范围为 [24px, 70px]
  fontSize(d) {
    return d.value ? 24 + (70 - 24) / (max - min);
  }
});

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

这里用到了 dat-set 模块中的 tag-cloud 的数据处理函数，对数据进行词云图布局和视觉通道的映射，获得的数据结构为：

[{
  value: 26.6063055869,
  title: "祁克果",
  word: "阶段",
  font: "Verdana",
  style: "normal",
  weight: "normal",
  rotate: 270,
  size: 70,
  x: 286,
  y: 188
}]

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

这个数据结构中，已经包含有文字渲染需要的所有信息，直接拿这个信息在 G2 中绘制即可。

定制词云图需要的图元 shape

import { Chart, registerShape } from '@antv/g2';

// 准备图形：给 point 图元注册一个词云形状 cloud
registerShape('point', 'cloud', {
  draw(cfg, container) {
    // 从数据中获取视觉属性
    const attrs = {
      ...cfg.defaultStyle,
      ...cfg.style,
      textAlign: 'center',
      textBaseline: 'Alphabetic',
      // 数据映射属性
      fontSize: cfg.data.size,
      text: cfg.data.text,
      fontFamily: cfg.data.font,
      fill: cfg.color,
    }
    const textShape = container.addShape('text', {
      attrs: {
        ...attrs,
        x: cfg.x,
        y: cfg.y
      }
    });
    // 旋转图形
    if (cfg.data.rotate) {
      Util.rotate(textShape, (cfg.data.rotate * Math.PI) / 180);
    }
    return textShape;
  }
});

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

通过这个方式，在 G2 的图形池中，就增加了 cloud 类型的绘图，并且可以从数据中去指定 fontSize、text、fontFamily、fill、rotate 等属性。

使用 G2 绘制词云图

有了前面的准备工作，绘制词云图就很容易了。

import { Chart } from '@antv/g2';

// 1. 创建图表容器
const chart = new Chart({
  container,
  autoFit: false,
  width: 800,
  height: 600,
  padding: 0
});

// 2. 装载第一步中处理好的数据
chart.data(data);
chart.legend(false);
chart.axis(false);
chart.tooltip({
  showTitle: false,
  showMarkers: false
});

chart.coordinate().reflect();

// 3. 使用 point 中的 cloud 形状，并将位置、颜色等视觉属性绑定到数据字段上
chart
  .point()
  .position('x*y')
  .color('title', colors)
  .shape('cloud')
  .tooltip('title');

chart.render();

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

最后绘制出来的效果如下图所示，也可以打开我们部署好的线上示例。

# 数据洞察

从中我们可以获取一些有效信息和洞察：

人们更加关注上帝、世界的起源、理性与感性的关系。
许多人试图回答来自大自然、心灵或精神的问题。
马克思和笛卡尔对人类历史有着巨大的影响。

# 拓展

# 图形语法（Grammar of Graphics）

首先我们理解什么是语法？就像我们 JavaScript 语法一样，通过一些正交的关键字，以及语法规范，可以让我们基于语法写出各种各样超越想象的应用。图形语法，顾名思义就是描述视觉图形的语法规范。

人的眼睛（视觉）无论是在获信息的效率上，还是在获取信息的量级上，都是远高于其他的方式，比如听觉、触觉、嗅觉等等。而对于视觉，人脑处理不同视觉属性的速度不同，一般来说对于颜色最敏感，其次是大小，然后是形状，等等。

数据可视化分析是建立在以上的客观的生理条件上的，因此基于图形语法的可视化引擎（ggplot2、vega、G2），大多会将一个可视化图表分成几大部分：

图形：不同的图形包含有不同的数据分析方法，比如折线一般用于看数据趋势，柱形一般用于进行数据的对比，点一般用于看分布，等等。
视觉属性通道：通过将数据和视觉属性绑定和映射，让人脑更容易从视觉上获取数据上的有效的信息。
坐标系：代表数据大小的图形区块，在画布中的展示方式不同，可能带来具有不同的分析效率。

而上述的这些内容，社区上几乎所有的图表库多多少少都会涉及一些。比如在 d3 的代码中，经常遇到类似以下：

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

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

# 任务分析

# 数据处理

# 用 Sparrow 绘制词云

# 用 G2 绘制词云

# 数据洞察

# 拓展

# 图形语法（Grammar of Graphics）

# G2

# 小结

分析哲学家之间在讨论啥八卦|可视化专题

分析哲学家之间在讨论啥八卦|可视化专题