- 可视化700年的利率下降情况">可视化700年的利率下降情况
- 因图生意:Famous Hope Quotes as Charts">因图生意:Famous Hope Quotes as Charts
- 手画线算法
- CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE, BY NATION (2010)">CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE, BY NATION (2010)
- The COVID-19 Impact on App Popularity">The COVID-19 Impact on App Popularity
- 观察巴黎不同类型道路的地图">观察巴黎不同类型道路的地图
- 通过可视化收入差异展现城市分化">通过可视化收入差异展现城市分化
可视化700年的利率下降情况
利率还能降到什么程度?目前,许多国家的处在负利率中,利率下降似乎是趋势,那利率还可能会降到多少?下图的可视化展示了过去将近8个世纪内的全球平均真实利率变化趋势,真实地证明和展示了利率下降的过程。
图由一些列历史上的贷款利率数据的散点,和趋势线组成。
by @翎刀(zqlu)
因图生意:Famous Hope Quotes as Charts
使用abstract charts表达数据之外的抽象概念,下次G2Plot可以用类似的概念做一次小推广,应该会很有趣~
手画线算法
通常我们趋向于可视化使用的是标准的直线,但是从用户角度触发,部分时候接近人手画的,“不完美的线条”更加有亲切感和交互感,所以对手画线稿进行了一定的探索,本次的研究主题建立在08年论文:Mimicking Hand-Drawn Pencil Lines上,针对一个生成铅笔手画线进行生成。
在1985年的一篇对于手臂动作探索的论文—— The Coordination of Arm Movements: An Experimentally Confirmed Mathematical Model中,对与手臂的运动模式建立了一种相对确定的数学模型,其中给出了一个在指定时间内,手从一个点画到另一个点最平滑的路径,这个路径与线的角度以及线性变化无关(前提是在画直线过程中没有很大的动作)。从而可以得出一个关于线的路径的计算公式:
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;
}
最终线条效果:
by @明多牧(mingduomu)
CO2 EMISSION VS. VULNERABILITY TO CLIMATE CHANGE, BY NATION (2010)
为 2U 和乔治华盛顿大学米尔肯研究所公共卫生学院设计的有关气候变化的艺术品。在上面的半圆中,可以观察到排放二氧化碳最多的国家(每个圆圈的大小均以二氧化碳排放的吨数为单位),而气候变化较低的国家,则是最脆弱的国家。
by @聚则(moyee-bzn)
The COVID-19 Impact on App Popularity
新冠对 APP 热度的影响象限分析。
by @步茗Neo(neowang)
观察巴黎不同类型道路的地图
巴黎市为什么要对道路进行如此多的细致分类(路,大道,林荫大道…)?这个项目创建了一张地图,以显示它们在整个城市的分布,并让用户识别出它们的特征。
by @镜曦(jingxi.lp)
通过可视化收入差异展现城市分化
橙色点簇显示最普通的家庭类型收入低于25,000美元的区域。粉色表示家庭中25,000美元至50,000美元之间的家庭最多;紫色:$ 50,000至$100,000;蓝色的是收入超过100,000美元的富裕家庭居住的地方。
注意:点越大,标记的人口越多;亮度越高,“主要”收入群体的集中度越高。