手绘风格的数据可视化 Sketchify,让你的图表也萌萌哒
点击上方蓝色“程序猿DD”,选择“设为星标”
回复“资源”获取独家整理的学习资料!
作者 | naughty
来源 | oschina.net/taogang/blog/3130390
多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《Sketchy Rendering for Information Visualization》(https://hal.inria.fr/hal-00720824/document)(该论文发表于2013年)
于是我带这两个实习生,利用论文中的知识做出了该工具的原型。收到了领导的赞许,就像很多有用和没用的创新一样,这东西最终无疾而终了。
论文的核心是对基本的图形元素的利用随机变形实现手绘风格。例如线和圆:
最近我发现一些手绘风格图表库出现在我的视野,例如chart.xkcd和chartjs-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 svgconst handler = Sketchifier(container, option);handler.handify();
// call restore will turn the graph back to original onehandler.restore();
我实验了几种常见类型的SVG图表:
ECharts
AntV G2
highcharts
amcharts
xCharts
以下是一些演示截图(包含原始数据图和手绘风格的对照):
ECharts
Echart的泡泡图手绘有些问题,这位灵魂画手不太擅长画泡泡。
AntV G2
G2的手绘效果非常好。
highcharts
amcharts with solid fill
xCharts with cross-hatch fill
你也可以到Codepen上去尝试这些例子:
ECharts
AntV G2
highcharts
amcharts
xCharts
最后要提一下,手绘风格的字体来自于Google Fonts,选择handwriting类别,能够给出很多好看的手绘风格字体,居然还有中文。Sketchify使用了Indie Flower
提示:
该工具仅仅支持以SVG为基础的数据可视化,不支持基于Canvas的库,例如ECharts和Ant G2。
手绘风格的处理会引入大量的svg图形元素,可能会消耗大量资源,请量力而为!
如果你喜欢Sketchify,请到Github点赞。
Github:https://github.com/gangtao/sketchify
本文通过OpenWrite的Markdown转换工具发布
关注我,回复“加群”加入各种主题讨论群
Token ,Cookie、Session傻傻分不清楚?
使用 LocalDateTime 而不是 Date
深入解读阿里云Redis开发规范:不要只会set&get
在服务器上排除问题的头 5 分钟
多个Java版本如何灵活切换和管理?
朕已阅
手绘风格的数据可视化 Sketchify,让你的图表也萌萌哒相关推荐
- 手绘风格的数据可视化 (萌萌风)Sketchify,及其他可视化工具(商业风)
多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,<Sketchy Rendering for Information Visualization ...
- js折线图设置y轴刻度_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- extjs chart无法在panel中显示_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- 手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- python可视化包选哪个_给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts...
https://github.com/chenjiandongx/cutecharts 今天,给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts.和 Matplotlib . ...
- Python使用matplotlib绘制卡通、手绘风格的图像
博主已经开通微信公众号啦,欢迎关注哈! 入门数据科学这一行以来,陆陆续续学到了很多专业领域的知识,数据可视化就是其中的一部分,在Python中提供数据可视化的工具也不少,但是最为著名的莫过于matpl ...
- Python 采集87个手绘风格PPT模板
源码下载链接:ppt.rar - 蓝奏云 PPT下载链接:https://pan.baidu.com/s/1HUAEe_-4IEV6ttOKC_VPuA?pwd=96px 提取码:96px 采集的参 ...
- Excalidraw - 免费的手绘风格白板应用,能够画各种流程图、示意图、架构图
一款完全免费的手绘风格绘图在线应用,能快速画出漂亮的流程图.示意图甚至是图表. 关于 Excalidraw Excalidraw 是一款轻量的手绘风格电子白板在线应用,无论是 Windows / ma ...
- Python -- 图像的手绘风格
** Python – 图像的手绘风格 ** 今天在mooc上了解到python可以做出手绘风格的图片,感觉很惊奇,很想知道python对于图片是如何处理的,因此上网搜了一些博主的文章,总结了一下. ...
最新文章
- 车辆检测--A Closer Look at Faster R-CNN for Vehicle Detection
- 4、列举你工作中遇到的IE6 BUG,谈谈解决方案
- web项目中的web.xml元素解析
- Notepad++的安装和基本使用
- 清洁数据ploy n_清洁屋数据
- labelimg如何调整框的颜色_如何制作摄影集(下)
- java+selenium模拟登陆新浪微博demo
- [2014.3.23]cse::lab2::partD 简明攻略
- 如何清除图片下方出现几像素的空白间隙?
- eclipse中maven工程添加本地库至Maven Dependencies
- MySQL--Centos7下安装5.7.19
- redis作用_Java高级架构笔记——实现故障恢复自动化:详解Redis哨兵技术
- MAC开机启动项学习笔记
- 【个人笔记一】ART系统类的编译解析加载探究
- js 将图片置灰_将图片转换成黑白(灰色)的css和js的方法
- 成都拉升12名,长沙提升3位,最新全球城市排名出炉
- vue绑定类名 禁用样式
- 一、计算机基础: 特点、数制、编码、组成
- 记录MySQL数据库如何修改密码.
- ROS-学习资料参考
热门文章
- python subprocess.Popen 使用简介
- python3 利用eval反弹shell
- docker 部署 mysql 8.0.18
- python3 bytes与hex字符串互转
- linux putty xshell vi 小键盘无法使用的解决方法
- RegistryCallback routine(CmRegisterCallback 注册表操作监控介绍)
- inet_ntoa()返回字符串的生命周期
- JS文件中加载jquery.js(JS文件添加其他JS文件)
- VC++如何判断当前操作系统是32位还是64位?
- C 一个非递减数组 下标从0到n 元素的取值范围为从0到n的整数 判断其中是否有重复元素