preface

As a UI and animation sensitive cutters, in the daily development, will also pay attention to some beautiful chart library and plug-ins.

Next, I’m going to introduce you to some of the most beautiful open source libraries/implementations on the Web/Python /vue/ React.

1. Hand-drawn wind chart library:roughViz.js

Based on D3(V5), RoughJS, and Handy.

1.1 Measurement Methods

There are three ways to measure it:

Roughness:

Line type:

Line thickness:

1.2 Various combinations

Jane a CDN:

< script SRC = "https://unpkg.com/[email protected]" > < / script >Copy the code

npm:

npm install rough-viz
Copy the code

react/vue:

npm install react-roughviz
npm install vue-roughviz
Copy the code

Even in Python:

pip install roughviz
Copy the code

1.3 Simple Use

First, define two divs

<div id="vis0"></div>
<div id="vis1"></div>
Copy the code

Then new two instances:

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, } );Copy the code

The entire configuration is very simple, where:

  • data: data source, which supports simple objects orcsvFormat file
  • roughness: Rough and chaotic hierarchy of lines. If you set it to 10, it will look like this:

The online experience demo: blockbuilder.org/jwilber/419…

For details, please refer to the official document: github.com/jwilber/rou…

2. Tiktok Font Explosion effect:react-three-fiber

The high-performance Threejs for React library is available on both the Web and React-Native.

You can drive the render loop outside of React without incurring overhead.

The latest version uses Hooks, which are much friendlier to write than the previous forced Threejs.

It’s not just tiktok, what it can achieve is a matter of your skill and imagination.

Here are some special effects:

If anyone learns… Big guy belt?

The realization of tiktok explosion effect:

One library is used: React-Spring, which is one of the best animation libraries in React.

Official document: github.com/react-sprin…

Font explosion: codesandbox. IO/s/y3j31r13z…

3. The appearance level of the player:Mini Music Player - VueJS

Foreign friends wrote a vue. js music player, beautiful great.

The interaction, the logic, is also very refined.

Source: codepen. IO/JavaScriptJ…

4. UIAll praised card verification library:interactive-paycard

As soon as this New Vue library was released in November, it won 3k+ Star, too excellent.

Full library name Vue-interactive – PayCard

The React edition writers say is coming soon.

Source: github.com/muhammederd…

5. True * dynamic visualization data:SandDance

Microsoft products, must be a boutique

SandDance uses Vega for chart layout and Deck.gl for WebGL rendering.

Microsoft Dad is the only one who can keep the animation flowing and beautiful in such a dense amount of data.

I’m on my knees. Do whatever you want.

In addition, there are several ways to use the library:

  1. Power BIUse in the software:
    • PowerBIIs a data visualization software released by Microsoft, which can generate a variety of reports in a relatively short time.

2. VSCodePlug-in form:3. Web version andReact:

Liverpoolfc.tv: sanddance.js.org/

Experience: sanddance.js.org/app/

6. Implement one of your ownAR: AR.js+Three.js+Autodesk 3D

This is an interesting implementation, and it goes like this:

  1. Open your browser on your phone
  2. AR.jsProgram starts
  3. ARToolKitImage tag recognized
  4. A-Frame.jsBegan to callThree.jsRendering 3D models
  5. On the screen

6.1 Implementation Procedure

1. Find the model

First, we go to https://sketchfab.com to download our favorite 3D model

2. Download the 3D model

Download glTF format (A framework provides glTF, OBJ two formats recommended to use glTF official website)

3. Create aindex.htmlAnd I’m going to paste all this code

< 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>Copy the code
  • Line 1-3: date all the JS packages in
  • Line 6: UseA-framethehtmlTag add aa-sceneAnd put the cameraAR.jsThe hallow
  • Line 7: markupMarkerIf the markedMarkerIt appears on the camera and it does what’s below
  • Line 8: Add what you want to say to the other person
  • Line 9: Add3Dmodel

4. Deploy your app.

5. Create a qr code that can be identified

6. Make a physical card

7. Scan

AR uses ar.js to make a doodle-doo doodle-doo! Small card!

Please appreciate a $2,199 model

And the amazing Leon the Professional girl

This is so pretty.

Want to experienceAR.jsYou can zoom in on the image below and scan it with your camera.

4. Postscript & Quotation

Originally wanted to gather together ten to send again, but for a long time, there is no open source library can enter my eyes.

Implore everyone, recommend a few SAO get not line of open source library, I will complement complement, thank you.

❤️ see three things

If you found this post inspiring, I’d like to invite you to do three small favors for me:

  1. Like, let more people can also see this content (collection does not like, is playing rogue – -)
  2. Focus on “front end dispeller” and share original knowledge from time to time.
  3. Check out other articles as well

Personal Wechat of dispeller: HUAB119

You can also go to my GitHub blog and get the source files for all the posts:

Front end exit guide: github.com/roger-hiro/… Let’s play together. ~