墨者修齐 2020-05-10 · 可视化700年的利率下降情况、Famous Hope Quotes as Charts、手画线算法、CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE BY NATION - 《墨者修齐 · 数据可视化月刊》

可视化700年的利率下降情况

利率还能降到什么程度？目前，许多国家的处在负利率中，利率下降似乎是趋势，那利率还可能会降到多少？下图的可视化展示了过去将近8个世纪内的全球平均真实利率变化趋势，真实地证明和展示了利率下降的过程。
图由一些列历史上的贷款利率数据的散点，和趋势线组成。

by @翎刀(zqlu)

因图生意：Famous Hope Quotes as Charts

使用abstract charts表达数据之外的抽象概念，下次G2Plot可以用类似的概念做一次小推广，应该会很有趣~

by @米法(guaguagege)

手画线算法

通常我们趋向于可视化使用的是标准的直线，但是从用户角度触发，部分时候接近人手画的，“不完美的线条”更加有亲切感和交互感，所以对手画线稿进行了一定的探索，本次的研究主题建立在08年论文：Mimicking Hand-Drawn Pencil Lines上，针对一个生成铅笔手画线进行生成。

在1985年的一篇对于手臂动作探索的论文—— The Coordination of Arm Movements: An Experimentally Confirmed Mathematical Model中，对与手臂的运动模式建立了一种相对确定的数学模型，其中给出了一个在指定时间内，手从一个点画到另一个点最平滑的路径，这个路径与线的角度以及线性变化无关（前提是在画直线过程中没有很大的动作）。从而可以得出一个关于线的路径的计算公式：

墨者修齐 2020-05-10 · 可视化700年的利率下降情况、Famous Hope Quotes as Charts、手画线算法、CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE BY NATION - 图3

x0和y0代表开始点的坐标，xf，yf表示时间经过t = tf时候画到的位置。tf从开始画为 0 再到画完结束的时候为 2，这样画出来的线看起来是比较舒服的。并且为了使线更加的随机，我们在线的路径上面加上随机变化的量。

下面是基于G的绘图方式的生成路径代码：

// 计算贝塞尔曲线的中心点
const getControlPoint = (prev, next) => {
  // 随机加上 -0.5 ~ 0.5的偏移量
  const rdm = () => (Math.random() * 0.5 - 1);
  const dx = rdm() * 10 - 5;
  const dy = rdm() * 10 - 5;
  return {
    x: (prev.x + next.x) / 2 + dx,
    y: (prev.y + next.y) / 2 + dy
  };
}
// 通过主要算法得出点
function handLineAlg(sx, sy, fx, fy, t) {
  const tau = t / 2.0;
  const polyTerm = 15 * Math.pow(tau, 4) -
    6 * Math.pow(tau, 5) -
    10 * Math.pow(tau, 3);
  return {
    x: sx + (sx - fx) * polyTerm,
    y: sy + (sy - fy) * polyTerm
  };
}
// 得出G可以用来绘制的路径
const getHandLinePath = (startX, startY, endX, endY) => {
  const [dx, dy] = [endX - startX, endY - startY];
  // 按照线长短来改变控制点数
  let dt = 1 / Math.sqrt(dx ** 2 + dy ** 2) * 200;
  const path = [
    ['M', startX, startY]
  ];
  let lastPoint = {
    x: startX,
    y: startY
  };
  // 根据论文里面，dt大于0.5
  if (dt > 0.5) {
    dt = 0.5
  }
  for (let t = 0; t <= 2.0; t += dt) {
    const currentPoint = handLineAlg(startX, startY, endX, endY, t);
    const squiggleControlPoint = getControlPoint(lastPoint, currentPoint);
    path.push(['S', squiggleControlPoint.x, squiggleControlPoint.y,
      currentPoint.x, currentPoint.y
    ])
    lastPoint = currentPoint;
  }
  path.push(['L', endX, endY])
  return path;
}