{"id":14108,"date":"2021-12-15T12:10:49","date_gmt":"2021-12-15T12:10:49","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14108"},"modified":"2022-08-13T11:08:54","modified_gmt":"2022-08-13T11:08:54","slug":"surface-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/12\/15\/surface-chart-javascript\/","title":{"rendered":"How to Build Surface Chart Using JavaScript"},"content":{"rendered":"

\"How<\/a>Data visualization<\/a> is a must-have skill today with ever-growing data and the need to analyze as well as present that data. You will definitely come across data charts whether you are in the technology industry or not and therefore, it is a good idea to learn how to build visualizations.<\/p>\n

I will show you here that building charts is not very tough and with the right tools, you can start creating interactive, interesting visualizations in little time and effort!<\/p>\n

In this step-by-step tutorial, I will demonstrate how to represent GDP values of various countries for the past 15 years on a beautiful interactive 3D surface chart using a JavaScript library for data visualization.<\/p>\n

The surface plot looks quite complex, but I will show you how straightforward it is to make a compelling and fully functional one.<\/p>\n

<\/p>\n

What\u2019s a 3D Surface Chart?<\/h2>\n

A 3D surface chart plots three dimensions of data on the x, y, and z axes with two of the variables being independent (displayed along the horizontal axes) and one being dependent on the other two (shown on the vertical axis).<\/p>\n

In this tutorial, I will be plotting countries and years as the independent variables and GDP values as the dependent variable.<\/p>\n

JavaScript Charting Libraries<\/h2>\n

Currently, there are a lot of good JS charting libraries<\/a>, all of them having some pros and cons. You can choose which one to use based on your specific requirements and the best part is that the process of building visualizations is very similar for all of the libraries. So, you can start learning with any of the libraries and extend your knowledge to another library as well.<\/p>\n

For this tutorial, I am going to use the AnyChart<\/a> JavaScript charting library which is likely a good choice for beginners. It has tons of examples<\/a> along with extensive documentation<\/a> that is really useful when starting out.<\/p>\n

Also, AnyChart is quite easy to use and flexible with loads of customization options. And what\u2019s especially important to many \u2014 it is free for personal, educational, and other non-commercial use.<\/p>\n

Building Basic 3D Surface Plot Using a JS Library<\/h2>\n

It is an advantage, of course, if you have background knowledge of HTML, CSS, and JavaScript. But don\u2019t get overwhelmed even if you are a complete beginner. I will walk you through each line of the code, and once you understand what is happening, it should get easier to grasp.<\/p>\n

There are four general steps to create a 3D surface plot or basically any chart with a JS library, and as mentioned earlier, these steps remain alike irrespective of the library you use.<\/p>\n