颜值即正义！颜值爆表的几个数据交互的库来啦！

作者 | 前端劝退师

责编 | Elle

作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。

接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。

手绘风图表库：roughViz.js

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

1.1 衡量方式

有三种衡量方式：

粗糙度：

线条种类：

线条粗细：

1.2 多种搭配

简答CDN:

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

npm:

npminstall rough-viz

react/vue:

npminstall react-roughviz

npminstall vue-roughviz

甚至在Python中也可以：

pipinstall roughviz

1.3 简单使用

首先定义两个div

< divid= "vis0"></ div>

< divid= "vis1"></ div>

之后new两个实例：

newroughViz.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',

}

);

newroughViz.BarH(

{

element: '#vis1',

titleFontSize: '1.5rem',

data: 'https://raw.githubusercontent/jwilber/random_data/master/owTanks.csv'

color: 'tan',

labels: 'name',

values: 'health',

title: "Overwatch Tank Health",

roughness: 4,

}

);

整个的配置非常简洁，其中：

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

线上体验demo:

https://blockbuilder.org/jwilber/419fa6d878fe6c0f79a28f9fc72d7ec6

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

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

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

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

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

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

以下一部分特效：

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

抖音爆炸特效的实现：

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

官方文档：https://github/react-spring/react-three-fiber

字体爆炸：https://codesandbox.io/s/y3j31r13zz

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

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

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

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

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

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

完整库名vue-interactive-paycard

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

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

真*动态可视化数据：SandDance

微软出品，必属精品

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

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

我先跪了，你们随意。

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

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

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

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

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

实现一个自己的AR: AR.js+Three.js+Autodesk 3D

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

1. 手机开启浏览器；
2. AR.js程序开始；
4. A-frame.js开始调用Three.js渲染 3D 模型；
5. 在画面上显示。

6.1 实现步骤1. 查找模型

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

2. 下载 3D 模型

下载glTF格式（A框架提供glTF，OBJ两个格式官网建议使用glTF）

3. 创建index.html并把这些代码都贴上

< src= "https://aframe.io/releases/0.9.0/aframe.min.js"></ >

< src= "https://rawgit/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></ >

< >THREEx.ArToolkitContext.baseURL = 'https://rawgit/jeromeetienne/ar.js/master/three.js/'</ >

< bodystyle= 'margin : 0px; overflow: hidden;'>

< a-sceneembeddedarjs= 'sourceType: webcam; debugUIEnabled: false;'>

< a-markertype= 'pattern'url= 'res/pattern-marker.patt'>

< a-entityposition= '-3 2 0'text= "width: 5; value:I am Psyduck. We are pokemon. We love you"></ a-entity>

< a-entityposition= '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模型

7. 扫一扫

原文：AR 用 AR.js 做一個讓另對方 喔喔喔喔! 的小卡片吧![1]

请欣赏一个价值 2199 刀的模型

还有超赞的《这个杀手不太冷》女孩模型

这也太好看了吧。

声明：本文为作者投稿，版权归作者个人所有。