Rajesh
Rajesh Kumar's Blog

Rajesh Kumar's Blog

Top Best Data Visualization Tools provided by Antd in 2020 - 2021 πŸ”₯

Top Best Data Visualization Tools provided by Antd in 2020 - 2021 πŸ”₯

Rajesh's photo
Rajesh

Published on Jan 6, 2021

7 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Greeting you as X-axis Y-axis, πŸ‘‹

There are many things to consider when choosing the right data visualization or charts tool for our web page. We will be going through the best data visualization tools for our needs.

x-y.jpg

Now the question is,

Question - "What Are Data Visualization Tools?" πŸ›  🧰

Ans - Data visualization tools provide data visualization designers with an easier way to create visual representations of large data sets.

The answer is not perfectly clear and understanding unless we see what it means.

We all know it's pointing to the direction of a chart or graph which may be d3.js or chart.js similar kinda lib. Yes, you’re absolutely correct here but I want to point out the important part of it.

Do you know when someone buys a theme for the admin panel what should be most Circean in terms of UI? 60% Ans would be Charts and Graphs.


Let's roll over the Visualization lib or tool... πŸ‘‡πŸ»

AntV - Liven Data Lively

A new generation of data visualization solutions from Ant Group.

Don't worry about the "Liven Data Lively" it's the slogan.

Here is what AntV provide the full list of the things which treasure for us.

  • G2 -Data-driven visual language with a high level of usability and scalability.

Screenshot 2021-01-01 at 7.44.21 PM.png


  • F2 - F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based and is also compatible with Node.js, F2 provides all the chart types you'll need. Our mobile design guidelines enable a better user experience in mobile visualization projects.

Screenshot 2021-01-06 at 7.35.15 PM.png


  • G6 - is a graph visualization engine with simplicity and convenience. Based on the ability to customize, it provides a set of elegant graph visualization solutions and helps developers to build up applications for graph visualization, graph analysis, and graph editor.

Screenshot 2021-01-06 at 7.39.09 PM.png


  • X6 Diagram Editing Engine - X6 is AntV's diagram editing engine, which provides a series of easy-to-use interactive components and node customization capabilities to facilitate the rapid construction of DAG diagrams, ER diagrams, flowcharts, and other applications.

Screenshot 2021-01-06 at 7.50.50 PM.png


  • L7 Geospatial Visualization - Large-scale WebGL-powered Geospatial data visualization analysis framework

Screenshot 2021-01-06 at 8.06.07 PM.png


  • AVA - AVA is a framework for more convenient Visual Analytics. The first A of AVA has many meanings. It states that the goal of this framework is to become an Automated, AI-driven solution that supports Augmented analytics.

Screenshot 2021-01-06 at 8.10.47 PM.png


All the above have there owned capabilities and concepts but if you're looking for specific in React version of it, then I will recommend you to go for Ant Charts

Let's see in action -

Screenshot 2021-01-06 at 8.26.32 PM.png

  • installation

    $ npm install @ant-design/charts

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  const data = [
    { year: '1991', value1: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
  };
  return <Line {...config} />;
};
export default Page;

And here is the final output is πŸ‘‡πŸ»


Wrapping Up

Hope you enjoyed this article. Go add some nice reactions and cool comments below. You only need a few moments to like and comments, it will encourage me to write more good articles in the future. Share it with your friends let them know about this article.

Thank you for your time.✌️

Finally ✍️

If you have time then do check out my other article & many of them are related to Ant. Design.

Here is the most viewed post so far πŸ‘‡πŸ»

πŸ‘‹ If you're using Twitter and posting code snippets then do checkout bonus post for you.


I'm also available on Twitter & do follow for Tips and Tricks and developer journey with me.

Thank you for your valuable time. ⏰ Your applications will make my dayπŸ™

Β 
Share this