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

[roger-hiro]

1. 手绘风图表库：roughViz.js

基于D3(v5), roughjs, 和handy。

1.1 衡量方式

有三种衡量方式：

粗糙度：

线条种类：

线条粗细：

1.2 多种搭配

简答CDN:

<script src="https://unpkg.com/rough-viz@1.0.5"></script>

npm:

npm install rough-viz

react/vue:

npm install react-roughviz
npm install vue-roughviz

甚至在Python中也可以：

pip install roughviz

具体用法请参照官方文档：https://github.com/jwilber/roughViz

2. 抖音字体爆炸特效：react-three-fiber

Web和react-native都可用的高性能Threejs for react库。

可以在React外部驱动渲染循环，而不会产生额外开销。

最新版本采用了Hooks的写法，不像以往强行兼容的Threejs,写起来更加友好。

不止抖音字体爆炸特效，它能实现什么，源于你的技术和想象力。

以下一部分特效：

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

抖音爆炸特效的实现：

其中用到一个库：react-spring，这是react最优秀的动画库，没有之一。

3. 播放器里的颜值担当：Mini Music Player - VueJS

国外友人写的一个Vue.js音乐播放器，好看的不得了。

其中的交互和逻辑，也是非常精炼。

源码：https://codepen.io/JavaScriptJunkie/pen/qBWrRyg

4. UI都夸好的卡片验证库：interactive-paycard

这个11月Vue新库一发布，就狂揽3k+star，过于优秀。

完整库名vue-interactive-paycard

React版的作者表示也即将发布了。

源码：https://github.com/muhammederdem/vue-interactive-paycard/issues

5. 真*动态可视化数据：SandDance

微软出品，必属精品

SandDance是使用Vega进行图表布局，使用Deck.gl进行WebGL渲染。

能在如此密集的数据量上保持动画流畅和美观的，也就微软爸爸能做到了。

我先跪了，你们随意。

此外，该库还有多种使用方式：

1. Power BI软件内使用:
   • PowerBI是微软发布的一款数据可视化软件,可以在较短时间内生成各种报表。
     
2. VSCode插件形式:
   
3. 网页版和React:
   

官网：https://sanddance.js.org/

体验：https://sanddance.js.org/app/