preface
Front-end visualization has always been a common word. With the development of SVG, Canvas, WebGL and other technologies, a large number of excellent visualization libraries have emerged. This article will select some interesting and practical recommendations to you, the use of tools, development efficiency will naturally improve.
ECharts
ECharts is an open source visual chart library based on JavaScript. I’m sure many of you who have worked on visualizations have used it forever.
GitHub:github.com/apache/echa…
Website: echarts.apache.org/zh/index.ht…
makeapie
Makeapie is a collection of resources for the ECharts community. There’s a lot of community work on the site, and if you can’t figure out how to make it work, just go to Makeapie and you’ll probably have what you want.
Website: www.makeapie.com/explore.htm…
ZRender
ZRender is a 2d drawing engine, it provides Canvas, SVG, VML and many other rendering methods. ZRender is also the renderer for ECharts. Interested partners can study.
GitHub:github.com/ecomfe/zren…
Website: ecomfe. Making. IO/zrender – doc…
Chartjs
Chartjs is a simple and flexible JavaScript diagram for designers and developers. The style is fresh.
GitHub:github.com/chartjs/Cha…
Website: www.chartjs.org/
English: chartjs.bootcss.com/
D3.js
D3.js is an open source JavaScript library for data visualization, which is considered one of the best JavaScript visualization frameworks. More flexible and complex than ECharts.
GitHub：github.com/d3/d3
Website: d3js.org/
AntV
AntV series: contains all kinds of data visualization solutions, this set is very systematic, including all aspects of data visualization.
GitHub：github.com/antvis
Website: antv. Vision/useful
AntV G2
AntV G2 is a set of high interactive graphics syntax driven by data for general statistical charts, with a high degree of ease of use and scalability.
Web site: g2. Antv. Vision/useful
AntV F2
AntV F2 is a mobile-focused, out-of-the-box visualization engine for general statistical charts.
Website: f2. Antv. Vision/useful
AntV G6
AntV G6 is a simple, easy to use, complete graph visualization engine.
Website: g6. Antv. Vision/useful
AntV X6
AntV X6 is a graph editing engine, which provides a series of out of the box interactive components and easy to use node customization capabilities, so that we can quickly build DAG, ER, flow chart and other applications.
Website: x6. Antv. Vision/useful
AntV L7
AntV L7 is a geospatial visualization analysis engine.
SpriteJS
SpriteJS is a cross-platform high performance graphics system, which can support web, Node, desktop applications and small programs to draw graphics and achieve various animation effects.
GitHub:github.com/spritejs/sp…
Website: spritejs.org/#/zh-cn/ind…
Rough.js
Rough.js: A graphic that can be used to draw the appearance of a sketch.
GitHub:github.com/rough-stuff…
Website: roughjs.com/
ThreeJS
ThreeJS is an open source mainstream 3D drawing JS engine, which can be said to be a prerequisite for front-end 3D development.
GitHub:github.com/mrdoob/thre…
Website: threejs.org/
Pixi.js
Pixi.js is a very fast 2D Sprite rendering engine that supports WebGL. Can help us display, animate, and manage interactive graphics so that we can easily create games and applications using JavaScript and other HTML5 technologies.
GitHub:github.com/pixijs/pixi…
Website: pixijs.com/
English: pixijs.huashengweilai.com/
Phaser
Phaser is a fast, fun, and free open source framework for H5 games. For those interested in H5 game development, check out Pixi.js and this library.
GitHub:github.com/photonstorm…
Website: phaser. IO /
SVG.js
Svg.js is a lightweight library for manipulating SVG and setting up SVG animations.
GitHub:github.com/svgdotjs/sv…
Website: SVGJS. Dev/docs / 3.0 /
Snap.svg
Snap.svg is a JavaScript SVG library designed for the modern Web.
GitHub:github.com/adobe-webpl…
Website: snapsvg. IO /
Fabric.js
Fabric.js is a library that operates on Canvas and can convert SVG to canvas.
GitHub:github.com/fabricjs/fa…
Website: fabricjs.com/
Easing functions
The rate at which the custom parameters change over time helps us choose the right Easing function.
GitHub:github.com/ai/easings….
Website: easings.net/en#
Animate.css
Animate. CSS A cross-browser CSS animation library.
GitHub:github.com/animate-css…
Site: the animate. Style /
Anime.js
Animo.js is a lightweight JavaScript animation library with a simple but powerful API.
GitHub:github.com/juliangarni…
Website: animejs.com/
English: www.animejs.cn/
Hover.css
Hover. CSS pure CSS3 mouse slide over the library
GitHub:github.com/IanLunn/Hov…
Website: ianlunn. Making. IO/Hover
The last
For now, the above libraries are quite useful and some of them are quite interesting. If you have not used it in the article, but it is also interesting or useful, welcome to share ~