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

颜值即正义!这几个库颠覆你对数据交互的想象作为一个对UI和动画敏感的切图仔,在日常开发之余,也会关注一些贼好看的图表库和插件。 接下来,我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 1. 手绘风图表库:roughViz.js 基于D3(v5), roughjs, 和handy。…

前言

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

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

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

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

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

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

Webreact-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渲染。

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

我先跪了,你们随意。

此外,该库还有多种使用方式:

  1. Power BI软件内使用:
    • PowerBI是微软发布的一款数据可视化软件,可以在较短时间内生成各种报表。 颜值即正义!这几个库颠覆你对数据交互的想象
  2. VSCode插件形式: 颜值即正义!这几个库颠覆你对数据交互的想象
  3. 网页版和React: 颜值即正义!这几个库颠覆你对数据交互的想象

官网:sanddance.js.org/

体验:sanddance.js.org/app/

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

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

这是个很有意思的实现,大致流程是:

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

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

6.1 实现步骤

1. 查找模型

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

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

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

2. 下载3D模型

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

下载glTF格式(A框架提供glTFOBJ两个格式官网建议使用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>
  • 第1〜3行:把js套件都约会进来
  • 第6行:使用A-framehtml标签添加一个a-scene摄像头并把AR.js崁入
  • 第7行:标记Marker如果标记的Marker出现在摄像头里就会执行下方的事情
  • 第8行:新增你想要跟对方说的话
  • 第9行:新增3D模型

4. 部署你的应用。

5. 制作一个可供识别的二维码

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

6. 制作一张实体卡片

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

7. 扫一扫

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

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

请欣赏一个价值2199刀的模型 颜值即正义!这几个库颠覆你对数据交互的想象

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

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

这也太好看了吧。 颜值即正义!这几个库颠覆你对数据交互的想象

想体验AR.js的可以放大下面这图,然后用相机扫一扫。

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

4. 后记&引用

原本想凑齐十个再发的,但找了好久,都没什么开源库能入我法眼。

恳请大家,推荐几款骚得不行的开源库,我来补充补充,谢谢喇。

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

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
  2. 关注「前端劝退师」,不定期分享原创知识。
  3. 也看看其它文章

劝退师个人微信:huab119

也可以来我的GitHub博客里拿所有文章的源文件:

前端劝退指南github.com/roger-hiro/… 一起玩耍呀。~

今天的文章颜值即正义!这几个库颠覆你对数据交互的想象分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20833.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注