3. Crazy geek

Original: https://www.monterail.com/blo…

This article first send WeChat messages public number: jingchengyideng welcome attention, every day to push you fresh front-end technology articles

How data-dependent is your program? Even if the application is not fully business oriented, you may need data for management panels, dashboards, performance tracking, and similar analytics features that users love.

For JS developers, the ability to visualize data is just as valuable as the ability to create interactive web pages. Especially when the two often go together. With the growing popularity of JavaScript in data visualization, there are even new libraries on the market that can create beautiful charts for the Web.

We chose 14 JavaScript libraries for data visualization (which are by far the most popular or interesting) and did some research to see which was the best fit for our project. There are many factors to consider here:

  • What kind of chart do I want? Pie charts, geography charts, line charts, bar charts?
  • Some libraries support only a few types. The first step is to know what you need.
  • How big is the data set?
  • SVG-based libraries are often better suited to small and medium-sized datasets because each element is a unique node and resides in the DOM tree. This also means that they are allowed to be accessed directly, giving them more flexibility. While you can make them work with large data sets with some data aggregation algorithms, smart memory management, and other fancy tricks, using Canvas based large data set tools is a more reliable option. Canvas is very fast.
  • Is the app for the Web, mobile, or both?
  • Some libraries are more responsive, while others have their own versions of React Native, such as Victory.
  • Does the browser support the given library?
  • Which JavaScript framework do you use?
  • Make sure your database library is running smoothly. If you’re using React, it’s probably better to use a React specific library than a wrapper.
  • What kind of look do you need?
  • If you need some advanced animation, you should also take this into account.

In some cases, you may not need a data visualization library at all. Sometimes it’s a good idea to start from scratch with native JavaScript. While it’s costly to get started (especially the first time you do it), projects with custom custom charts can pay off in the future. Sometimes it’s better to be sensible and spend more resources on the development side, rather than trying to adapt the library to meet your specific needs. While it sounds scary at first, an SVG-oriented mindset and a few hours of experimentation — who knows, it could be fun!

If you’re familiar with modern front-end frameworks, Vue.js is particularly good at this, and it works with SVG with ease. Please note that I am talking strictly about SVG-based charts because it is easier to implement. The HTML5 Canvas is just a bitmap drawing surface, and it doesn’t know what objects are drawn inside — they are pixels, not DOM elements like SVG. If you want it to be interactive, you need to handle all the logic yourself. While the Canvas based approach offers the performance benefits of large data sets (1000 + elements) and rigorous manipulation, I don’t recommend writing from scratch — unless it’s a core feature of your product.

So when can a library be used?

When you have a weird diagram in your project, one that needs a pretty basic interface with all the bells and bolts (tooltips, legends, X/Y axis, etc.), or when the application needs standardization, responsiveness, and detailed diagrams, especially when it needs multiple types.

Finally, we use libraries to avoid reinventing the wheel over and over again, and most libraries have been around for a long time and take into account most usage cases. Oh, and they come with built-in animations, too.

It is not possible to try all of these libraries on a project, but here is a list based on my experience and others’. Remember, it’s always a good idea to figure out how to integrate a library into your project before diving into it. In the end, it’s up to you which one you choose — it’s just a list!

Free data visualization library

If you’re not a big company, open source libraries offer plenty of options. If you can answer the questions I mentioned above, it will be easy to find the perfect match.

1, D3. Js

D3 is one of the most popular JS libraries, not only for data visualization, but also for animation, data analysis, geography, and mathematical reality applications. Use techniques such as HTML, SVG and CSS. It has a huge set of APIs, and some people think it’s not a data visualization library at all. You can do anything you can think of with this library, but it has its drawbacks. The learning curve is steep, and the documentation is outdated, which can easily lead to confusion.

Most APIs expose direct access to the DOM, which can conflict with the way modern front-end frameworks like React or Vue work. But there are ways around this problem. There is a declarative data-driven document (D4 for short) that recommends letting the framework manipulate the DOM and using D3 strictly as the data API. You can find more information and examples here.

Suitable for: any environment

GitHub:https://github.com/d3 demos: https://github.com/d3/d3/wiki…

2, Recharts

Special for React. Recharts is using D3 as the engine and has exported declarative components. It is lightweight and allows you to create beautiful interactive diagrams by rendering SVG elements. It’s easy to use and well documented. Charts are customizable, and the library itself provides some good examples. Its static chart performance is excellent and includes built-in general chart tools such as legend tooltips and labels. Lags can occur when working with multiple animated charts on the same page and large data sets, but it is still useful for most applications.

A little disconcerting is the large number of unresolved issues on GitHub. These questions may not be important, but the author does not seem eager to answer them. So if you run into trouble, be prepared to delve into the code.

Suitable for: the React GitHub:https://github.com/recharts example: http://recharts.org/en-US/exa…

3, Victory

This is a set of modular charting components designed specifically for React and React Native. Victory does a good job of the basics – such as coordinate axis customization, tagging, and passing different data sets to a single chart are all very simple, and the ability to adjust styles and behaviors is very straightforward. It works really well and allows you to create beautiful diagrams with minimal code. This is a cross-platform library that is definitely worth checking out.

Apply to: React, React Native

GitHub:https://github.com/Formidable… Presentation: https://formidable.com/open-s…

4, the React – vis

This is a simple visualization library developed by Uber that allows you to create all the common chart types: bar charts, tree charts, line charts, area charts, etc. Its API is very simple and very flexible. It’s lightweight and the animation is simple but smooth. It also allows you to write custom charts based on existing elements.

However, its minimalist look may not be to everyone’s taste (but I love it!). . Although the response was lukewarm, the documentation was simple and easy to read.

Applicable to: React

Making: https://uber.github.io/react-… Example: https://uber.github.io/react-…

5, ApexCharts

This is a fairly compact SVG diagram library that comes with Vue.js and the React wrapper. It looks good on different devices, and the library allows for custom walks and provides comprehensive documentation. Performance can suffer on large data sets, so make sure it really works for your project. According to Juned Chhipa, author of ApexCharts, the library was written to make it easier to zoom in and out, pan, scroll through data, place informative comments on charts, etc.

This library is relatively new and has a lot of room to grow, but if responsiveness and interactivity are particularly important to you, then this beautiful library is well worth a try!

Applicable to: React, Vue.js, Pure JavaScript

GitHub:https://github.com/apexcharts example: https://apexcharts.com/javasc…

6, Chart. Js

A very popular open source library with over 40,000 stars on GitHub. It is lightweight and allows you to build responsive charts using HTML5 Canvas elements. The ability to easily mix and match plot and bar charts to combine different data sets is a great feature.

Chart.js provides you with six different Chart types by default. It supports responsiveness and is very beginner-friendly. It is also my preferred library when dealing with large data sets. Definitely one of the most interesting open source libraries.

Applicable to: React, vue.js

GitHub:https://github.com/chartjs/Ch… Example: https://www.chartjs.org/sampl…

7, Echarts

This library created by Baidu is very useful for data visualization on the Web. It is also available in English and is suitable for large data sets. It also supports SVG and Canvas rendering.

Applicable to: All environments

GitHub:https://github.com/ecomfe/ech… Example: https://ecomfe.github.io/echa…

8, Frappe Charts

This is a very simple library for graphs with zero dependencies. It is open source, with only 17 contributors, making it one of the smallest libraries on this list.

Inspired by a GitHub-like visual effects package, Frappe Charts supports line Charts, bar Charts and other types of Charts. If you’re looking for a small, lightweight bag, this is one of them!

Suitable for: any environment

GitHub:https://github.com/frappe/charts website: https://frappe.io/charts

9, Nivo

Nivo is a beautiful framework based on D3 and React that provides fourteen different types of components to render your data. It was launched in 2017 and was launched on August 20, 2017 as a product of ProductHunt.

Nivo offers many customization options and three rendering options: Canvas, SVG, and even API-based HTML. The documentation is excellent, and the Demo is configurable and fun. This is an advanced library that is very simple, but has little leeway to provide custom visualizations.

Applicable to: React

GitHub:https://github.com/plouc/nivo website: https://nivo.rocks/

10, Google Charts

A very popular graphing Web service, I simply can’t get it off the list. For many people, it is the JS library of choice because it provides a variety of pre-built chart types, such as bar charts, line charts, area charts, calendar charts, geographic charts, and so on. For me, however, this library is a bit excessive in most cases, and frankly I don’t recommend using it.

It’s free, but it’s not open source (like every Google product). It is not reactive by default, but you can resize the chart using code. Depending on the chart type, there are different customization options, and it is not entirely suitable for beginners. And you must load it directly from the Google URL instead of the NPM package.

Suitable for: any environment

Google Charts website: https://developers.google.com.) Documents: https://developers.google.com…

Commercial chart library

Some libraries offer free versions for individuals, but you have to pay to use them in commercial applications. The ones listed below are common in large companies. Because they are truly comprehensive, customizable, and offer great customer support. If you’re a business, you should check it out.

11, amCharts

This is one of the most popular chart libraries. Its beautiful design really sets it apart from the competition. Apple, Amazon, NASA and many well-known companies are users of Amcharts, which is very impressive.

Amcharts is a commercial tool with a starting price of $180 per site license. In return for your investment, you get all the types of charts you need, including geographic maps and excellent user support, with an average response time of less than 3 hours. This is a good solution for large companies.

For: Angular, React, Vue.js, Common JS Apps, TypeScript

GitHub:https://github.com/amcharts/a… Website: https://www.amcharts.com/

12, CanvasJS

This is another commercial tool that provides elegant charts that cross devices and browsers. However, it lacks some chart types, such as network charts, mini-charts, and meter charts. It also has a steep learning curve.

On the other hand, even with up to 100K + data points, it is very fast and works smoothly. Four default themes are provided, which should work for most scenarios. Their client list is also impressive: Apple, Bosch, Siemens, HP, Microsoft, and more.

Applicable to: Angular, React, jQuery, Pure JavaScript

Website: https://canvasjs.com/ demo: https://canvasjs.com/javascri…

13, Highcharts

JS library, released in 2009, is based on SVG and supports VML and Canvas for older browsers. It provides different project templates. Highcharts is compatible with older browsers, including Internet Explorer 6.

This is a good solution for non-developers because it has an integrated WYSIWYG (what you see is what you get) chart editor. It has a very smooth learning curve, and is used by many major players, such as Facebook or Microsoft — some even claim that 72 of the world’s largest 100 companies have used it. This is a paid solution that costs $1500 with unlimited commercial licenses.

Beneath the glossy exterior, however, it feels as if it was written in 2009. A colleague of mine took me through it recently, and let me tell you, it wasn’t very pleasant. It’s great when you’re not messing around with it at the code level, but when you want to… It’s hard work.

Suitable for: any environment

GitHub:https://github.com/highcharts… Website: https://www.highcharts.com/

14, Zoomcharts

Another commercial JS data tool, describes itself as “the world’s most interactive JavaScript chart library.” In addition to being responsive, it focuses on multi-touch gestures and the native feel of being on a variety of devices. The library prides itself on being a beautiful visualization that can be easily deployed into your product with very little code. ZoomChatRts is Canvas based, and with the same amount of data, using default Settings, it is 20 times faster than its SVG-based competitor. I couldn’t find an exact price for Zoomcharts, but I did find some reviews calling it “pricey”. But whatever the price, in return you’ll get amazing interactivity, multi-touch gestures, and high-quality user support.

Suitable for: any environment

Website: https://zoomcharts.com/en/ Demo:https://zoomcharts.com/en/jav…

More and more data visualization libraries are proving the importance of visualization to the Web — and that’s very exciting! I hope this list will help you create beautiful diagrams for future projects. Good luck!

The first send WeChat messages public number: Jingchengyideng

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

  • 12 Amazing CSS Experiment Projects
  • What are the front-end interview questions at the world’s top companies
  • CSS Flexbox Visualization Manual
  • The holidays are boring? Write a little brain game in JavaScript!
  • React from a designer’s point of view
  • How does CSS sticky positioning work
  • A step-by-step guide to implementing animations using HTML5 SVG
  • Programmer 30 years old before the monthly salary is less than 30K, which way to go
  • 7 open front end questions
  • React Tutorial: A Quick Start Guide