颜值即正义！这几个库颠覆你对数据交互的想象

作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。

手绘风图表库：roughViz.js

基于D3(v5), roughjs, 和handy。 1.1 衡量方式有三种衡量方式：粗糙度：

线条种类：

线条粗细：

1.2 多种搭配简答CDN:

复制代码npm: npm install rough-viz 复制代码react/vue: npm install react-roughviz npm install vue-roughviz 复制代码甚至在Python中也可以： pip install roughviz 复制代码1.3 简单使用

首先定义两个div

<div id="vis0"></div> <div id="vis1"></div> 复制代码之后new两个实例： new roughViz.BarH( { element: '#vis0', title: "Vehicles I've Had", titleFontSize: '1.5rem', legend: false, margin: {top: 50, bottom: 100, left: 160, right: 0}, data: { labels: ['1992 Ford Aerostar Van', '2013 Kia Rio', '1980 Honda CB 125s', '1992 Toyota Tercel'], values: [8, 4, 6, 2] }, xLabel: 'Time Owned (Years)', strokeWidth: 2, fillStyle: 'zigzag-line', highlight: 'gold', } );

new roughViz.BarH( { element: '#vis1', titleFontSize: '1.5rem', data: 'https://raw.githubusercontent.com/jwilber/random_data/master/owTanks.csv' color: 'tan', labels: 'name', values: 'health', title: "Overwatch Tank Health", roughness: 4, } ); 复制代码整个的配置非常简洁，其中：

data: 数据源，支持简单对象或csv格式的文件 roughness: 线条粗糙混乱层级。如果调成10，就会变成这样：

线上体验demo: blockbuilder.org/jwilber/419… 具体用法请参照官方文档：github.com/jwilber/rou… 2. 抖音字体爆炸特效：react-three-fiber

Web和react-native都可用的高性能Threejs for react库。可以在React外部驱动渲染循环，而不会产生额外开销。最新版本采用了Hooks的写法，不像以往强行兼容的Threejs,写起来更加友好。不止抖音字体爆炸特效，它能实现什么，源于你的技术和想象力。以下一部分特效：

如果有人学会了...大佬带带？

抖音爆炸特效的实现：

其中用到一个库：react-spring，这是react最优秀的动画库，没有之一。官方文档：github.com/react-sprin… 字体爆炸：codesandbox.io/s/y3j31r13z… 3. 播放器里的颜值担当：Mini Music Player - VueJS

国外友人写的一个Vue.js音乐播放器，好看的不得了。其中的交互和逻辑，也是非常精炼。源码：codepen.io/JavaScriptJ… 4. UI都夸好的卡片验证库：interactive-paycard

这个11月Vue新库一发布，就狂揽3k+star，过于优秀。完整库名vue-interactive-paycard React版的作者表示也即将发布了。源码：github.com/muhammederd… 5. 真*动态可视化数据：SandDance

微软出品，必属精品 SandDance是使用Vega进行图表布局，使用Deck.gl进行WebGL渲染。能在如此密集的数据量上保持动画流畅和美观的，也就微软爸爸能做到了。我先跪了，你们随意。此外，该库还有多种使用方式：

Power BI软件内使用:

PowerBI是微软发布的一款数据可视化软件,可以在较短时间内生成各种报表。

VSCode插件形式:

网页版和React:

官网：sanddance.js.org/ 体验：sanddance.js.org/app/ 6. 实现一个自己的AR: AR.js+Three.js+Autodesk 3D

这是个很有意思的实现，大致流程是：

手机开启浏览器 AR.js程序开始 ARToolKit识别到图片标记 A-Frame.js开始调用Three.js渲染3D模型在画面上显示

6.1 实现步骤

查找模型首先我们先到 https://sketchfab.com下载自己喜欢的3D模型
下载3D模型

下载glTF格式（A框架提供glTF，OBJ两个格式官网建议使用glTF） 3. 创建index.html并把这些代码都贴上

<body style='margin : 0px; overflow: hidden;'> <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'> <a-marker type='pattern' url='res/pattern-marker.patt'> <a-entity position='-3 2 0' text="width: 5; value:I am Psyduck. We are pokemon. We love you"></a-entity> <a-entity position='0 0 0' gltf-model="url(res/scene.gltf)"></a-entity> </a-marker> </a-scene> </body> 复制代码第1〜3行：把js套件都约会进来第6行：使用A-frame的html标签添加一个a-scene摄像头并把AR.js崁入第7行：标记Marker如果标记的Marker出现在摄像头里就会执行下方的事情第8行：新增你想要跟对方说的话第9行：新增3D模型