文档章节

手绘风格的数据可视化实现 Sketchify

naughty
 naughty
发布于 2019/11/16 17:11
字数 913
阅读 730
收藏 1

多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《Sketchy Rendering for Information Visualization》(该论文发表于2013年)

于是我带这两个实习生,利用论文中的知识做出了该工具的原型。收到了领导的赞许,就像很多有用和没用的创新一样,这东西最终无疾而终了。

论文的核心是对基本的图形元素的利用随机变形实现手绘风格。例如线和圆:

最近我发现一些手绘风格图表库出现在我的视野,例如chart.xkcdchartjs-plugin-rough

chart.xkcd风格很好看,但是支持的图表类型有限。

chartjs-plugin-rough仅仅是chartjs的扩展,使用的范围也很有限。

我希望能有一个通用的工具能够把任意类型的数据可视化转化为手绘风格,于是开发了这个Sketchify

Sketchify同样是基于Roughjs,Roughjs是是个非常强大的手绘风格基础工具,可以实现基本的绘画元素在Canvas和SVG上的手绘风格的实现。

Skethcify的原理非常简单,从一个给定的根DOM元素开始,找到所有的SVG对象,然后递归寻找所有的子元素,读出子元素的基本属性,利用roughjs创建一个手绘风格的元素拷贝,隐藏原始元素。这样手绘风格的SVG元素就取代了原始的图形。当需要回到初始状态的时候,只要重现所有隐藏的原始元素,移除后加入的手绘元素即可。

代码如下:

const option = {
    fillStyle: 'hachure',
    roughness: 1,
    bowing: 1,
    chartType: 'highcharts',
};
// container is the root dom element that contains related graph svg
const handler = Sketchifier(container, option);
handler.handify();

// call restore will turn the graph back to original one
handler.restore();

我实验了几种常见类型的SVG图表:

以下是一些演示截图(包含原始数据图和手绘风格的对照):

ECharts

Echart的泡泡图手绘有些问题,这位灵魂画手不太擅长画泡泡。

 

AntV G2

G2的手绘效果非常好。

highcharts

amcharts with solid fill

xCharts with cross-hatch fill

你也可以到Codepen上去尝试这些例子:

最后要提一下,手绘风格的字体来自于Google Fonts,选择handwriting类别,能够给出很多好看的手绘风格字体,居然还有中文。Sketchify使用了Indie Flower

 

提示:

  1. 该工具仅仅支持以SVG为基础的数据可视化,不支持基于Canvas的库,例如ECharts和Ant G2。
  2. 手绘风格的处理会引入大量的svg图形元素,可能会消耗大量资源,请量力而为!

如果你喜欢数据可视化的话题,欢迎和我交流。如果你喜欢Sketchify,请到我的github点赞。

相关作品和引用

 

© 著作权归作者所有

naughty

naughty

粉丝 420
博文 82
码字总数 164382
作品 2
其它
私信 提问
新的快速图像转手绘方法,人类水准、户外场景

雷锋网 AI 科技评论按:下面的 AI 生成的手绘图看起来怎么样?有耳目一新的感觉吗?像你不好好听课的时候在草稿纸上随便画的风格吗? 作者们尤其希望读者关注下面那张卧室的生成手绘图像。其...

杨晓凡
2019/01/28
0
0
谁在撼动Axure在原型设计领域的霸主地位?

目前活跃在国外的原型设计工具不胜枚举:Pidoco、UXPIN、Proto.io 6、InVision等等,令人眼花缭乱。曾几何时,Axure一枝独秀,可以说是占据了无法撼动的地位。然而时过境迁,现在的国内市场上...

jongde
2016/08/19
81
0
手绘风格的 JS 图表库:Chart.xkcd

本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手...

HelloGitHub
2019/10/30
0
0
手绘风格 UI 集合 - Wired Elements

Wired Elements Wired Elements 是一系列具有手绘外观的基本 UI 元素,这些 UI 元素可以用于线框、模型等手绘风格页面。 元素具有一定的随机性,像真正的手绘一样,同一个元素每次出现的显示...

匿名
2018/06/01
6.4K
11
基于 Canvas 的手绘风格图形库 - Rough.js

Rough.js 是一个轻量级的(大约8k),基于 Canvas 的可以绘制出粗略的手绘风格的图形库。该库提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力,同时支持绘制 SVG 路径。 Usage cons...

匿名
2018/03/29
3.4K
7

没有更多内容

加载失败,请刷新页面

加载更多

如何查看Android的系统版本?

有谁知道我怎么能检查系统版本(例如1.0 , 2.2 ,等)编程? #1楼 我无法对答案发表评论,但是Kaushik的答案存在一个严重错误:SDK_INT与系统版本不同,但实际上是指API级别。 if(Build.VER...

技术盛宴
48分钟前
35
0
引入AI变量,精准农业正在加速豹变?

  不久前,“江苏省脱贫率达 99.99%,尚未脱贫人数仅剩 6 户、17 人”这样一则新闻刷屏。“把这 17 个人迁出,江苏就全省脱贫”、“最后这 6 户人家拖了后腿”,在网民们的调侃和质疑声背后...

水果黄瓜
51分钟前
41
0
Elasticsearch系列---结构化搜索

概要 结构化搜索针对日期、时间、数字等结构化数据的搜索,它们有自己的格式,我们可以对它们进行范围,比较大小等逻辑操作,这些逻辑操作得到的结果非黑即白,要么符合条件在结果集里,要么...

清茶豆奶
今天
69
0
每天AC系列(一):三数之和

1 题目 LeetCode第15题,难度中等,题目描述: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组。 注意:答...

Blueeeeeee
今天
120
0
OSChina 周四乱弹 —— 水果你们都没吃全

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @ 莱布妮子:分享五月天的单曲《温柔》@小小编辑 @cIouddyy @clouddyy 《温柔》- 五月天 手机党少年们想听歌,请使劲儿戳(这里) @FalconChe...

小小编辑
今天
1.9K
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部