顏值即正義！這幾個庫顛覆你對數據交互的想象

時間 2019-12-08

標籤正義幾個顛覆數據交互想象简体版

原文原文鏈接

前言

做爲一個對UI和動畫敏感的切圖仔，在平常開發之餘，也會關注一些賊好看的圖表庫和插件。html

接下來，我將給你們介紹幾款web/python/vue/react裏漂亮得不行的開源庫/實現。前端

1. 手繪風圖表庫：`roughViz.js`

基於D3(v5), roughjs, 和handy。vue

1.1 衡量方式

有三種衡量方式：python

粗糙度： react

線條種類： git

線條粗細： github

1.2 多種搭配

簡答CDN:web

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

npm:spring

npm install rough-viz
複製代碼

react/vue:npm

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 實現步驟

1. 查找模型

首先咱們先到 https://sketchfab.com下載本身喜歡的3D模型

2. 下載3D模型

下載glTF格式（A框架提供glTF，OBJ兩個格式官網建議使用glTF）

3. 建立`index.html`並把這些代碼都貼上

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

<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>
複製代碼