手绘风格的可视化和 UI 的开源项目

推荐一些手绘风格的可视化和 UI 的开源项目。基于这些项目，构建一个不那么复杂的手绘风格的页面，应该不会特别难。

• rough 手绘风格的图形渲染引擎

  类似于 @antv/g，支持 SVG、Canvas，提供了一些基础图形。没有提供动画和事件机制，大概 ~30 kb 大小。

基于这个渲染引擎，社区贡献了了很多周边内容：

1. 各种可视化图形
2. 技术栈包装
3. 手绘风格 H5 小游戏

周边内容：https://github.com/pshihn/rough/wiki/Examples

• wiredjs 手绘风格 UI 组件库

  目前包含有 15 个 UI 组件的封装，包括常用的 Form 表单组件、Icon、Spin、Tab、进度条等等。组件的扩展完全是线性的，扩展容易，维护方便。

• chart.xkcd 手绘风格图表库

  xkcd 漫画诞生于2005年9月。当时兰德尔·门罗不想丢掉他在旧笔记本上的涂鸦，于是把这些作品扫描并发表在网上，得到了读者的好评。于是他开始更认真地画漫画，并在网站上出售印有他的漫画的T恤。现在他已经成为了一名全职漫画家。 2012年7月3日，xkcd网站开通了新栏目“xkcd What-Ifs”，用幽默的方式回答读者提交的科学问题。

xkcd 这个词不是缩写，没有特别的含义，也没有发音，但是这几个字母代表的就是漫画，手绘风格。

by @逍为(hustcc)

Dynamic Design Documents for supporting applied visualization

这是 2017 年最佳海报，为了提高可视化研究人员和领域专家之间的协作效率，一般来说，可视化研究人员试图在数据，任务和需求上呈现丰富的细节，以设计明显有用的可视化工具。该海报设计了一种实现此类协作的方法，该方法可以在整个设计过程中用于收集和开发需求，并持续评估和支持迭代设计。该方法使用高度互动的网页来实现动态设计文档。以为期四年的犯罪研究可视化数据分析项目为例，合作者（犯罪分析员）可以灵活、连续地探索一系列数据映射。作者认为该方法反馈了一种参与水平，这种参与在质量上与传统的反馈诱导方法截然不同，为分析师和可视化研究人员之间的协作提供了解决方案。

例如，下面但犯罪数-时间折线图，用户可以选择自动划分区间，也可以在该划分结果上进行自定义的修改划分。

原犯罪数-时间折线图。

（左）自动划分区间结果。（右）人工划分结果。

犯罪分析师通过本系统的交互可以学习新的数据映射，形成了对它们的看法，并对设计更大数据密度所涉及的权衡产生了敏感性。分析师可以自由切换可视化方式：

（左1）颜色映射不同行政区域。（其他）不同的可视化方式

通常，可视化研究人员会仔细组合视觉上的变量，达到最终呈现重要信息的设计。通过本文方法，分析师能够自己交互式地组合、查看分层的信息：

将地图抽象化为格子后，每个格子上有该区域映射某种数据的图表

自动分类出不同的犯罪，分析师可以交互式地调整透明度

by @十吾(shiwu-5wap2)

Slavery’s explosive growth, in charts: How ‘20 and odd’ became millions

USA TODAY 用生动的可视化方式展示了两个世纪以来美国的奴隶制度是如何爆炸式发展的。这是一个按照时间线来阐述故事的可视化作品，不同于常见的使用时间轴的设计方式，他们将故事的时间线同用户的阅读行为相结合，即使用上下滚动的方式，将网页文字与图表完美得融合在一起，而且上下文衔接得也非常流畅，颇具阅读趣味。更多细节请访问：链接

by @司马淇(simaqi)

Material Desing Data Visualization

谷歌Material Desing设计指南中最近添加了数据可视化相关的部分，包括设计原则、图表类型、图表的选择、图表样式、图表交互行为、和仪表盘设计等部分，每部分都有详细的介绍，Material Design从原来单一的UI设计指南变得更加丰富了，包括了可视化部分。
网站上目前只是提供了设计相关的指南和说明，官方实现和material-ui中都还没有看到有visualizaion图表相关的实现，这和我们做的AntD和AntV的设计融合类似，不过AntV已经有实现了，Material Desing的可视化实现还知道谷歌官方和社区会不会也有实现了。
by @翎刀(zqlu)

星座可视化

每次仰望星空看着天空中的星辰，想分辨各种星座从来没成功过，我们来看一下学者对 28 种文化对星空星座的划分：

通过点击单个星座可以看到对星座的定义：

更多的内容参看：http://www.datasketch.es/may/code/nadieh/
by @萧庆(xiaoqing)

房地产泡沫风险最高的国家

Mapped: The Countries With the Highest Housing Bubble Risks
房地产市场容易受央行货币宽松政策和投资客投机的影响，可能引起房价上涨过快，从而形成泡沫。
作者从房价/房租比值、房价/家庭收入比值、通货膨胀调整后的房价、以及家庭房贷/国家GDP的比值四个维度， 展示了不同国家的房地产市场发展情况。

下图展示了不同国家房价/房租比值情况，新西兰和加拿大的风险最高。

下图从房价/家庭收入比值的角度来分析，同样新西兰和加拿大的泡沫最大。

by @长哲(changzhe)

人体解剖学地铁图

当提到人体结构时，我们脑海里浮现的可能都是解剖学中复杂的器官构成。剑走偏锋的是，塔夫茨医疗中心的乔纳森·西蒙兹博士创建了一幅很有意思的人体解剖学地铁图，用伦敦地铁线路图的风格来解释人体解剖学。在这个图中，人体的多个系统被分解成不同的地铁线路。这个简单而直观的演示方法，让我们可以更好地了解自己的身体构造。

by @珂甫(pddpd)