{"id":16460,"date":"2023-04-11T18:24:21","date_gmt":"2023-04-11T18:24:21","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16460"},"modified":"2023-06-15T18:32:49","modified_gmt":"2023-06-15T18:32:49","slug":"3d-surface-plot","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/04\/11\/3d-surface-plot\/","title":{"rendered":"Building 3D Surface Plot in JavaScript"},"content":{"rendered":"

\"3D<\/a>Welcome to this tutorial<\/a> on creating a visually stunning and interactive 3D surface plot<\/strong> using JavaScript<\/strong>! If you’re passionate about data visualization<\/a> and want to expand your skills to the next level, this guide is for you. Here, we’ll take you through a step-by-step process to create an engaging 3D surface plot that will make your data come alive.<\/p>\n

Sometimes, representing complex information using traditional 2D charts can be difficult, especially when working with large datasets or data that varies over three or more dimensions. This is where a 3D surface plot (or surface chart) can prove to be useful<\/a>. In this tutorial, we’ll be using real-world population data to create our surface plot, showcasing the population growth trends of the top 50 most populous countries<\/strong> in the world. You don’t need to be a data expert to follow this guide, as we’ll cover everything in detail.<\/p>\n

So, sit back, grab your favorite beverage, and let’s dive into the world of data visualization with a 3D surface plot. By the end of this tutorial, you’ll have an impressive chart that you can showcase to your colleagues or friends. Let’s get started!<\/p>\n

<\/p>\n

3D Surface Plot That Will Be Created<\/h2>\n

In this tutorial, I will guide you through creating a beautiful custom 3D surface plot using JavaScript. By following the step-by-step instructions will give you the skills to build your own visually stunning charts. The result will be an impressive surface chart that you can use to showcase your data meaningfully.<\/p>\n

Look at the example chart below to see what you’ll be creating by the end of this tutorial. So let’s get started and create something amazing together!<\/p>\n

\"3D<\/p>\n

A. How to Create Basic JS 3D Surface Plot<\/h2>\n

Creating a custom 3D surface plot in JavaScript is easier than you might think! It involves the following four fundamental steps:<\/p>\n

    \n
  1. Create a basic webpage in HTML<\/li>\n
  2. Include the required JavaScript files<\/li>\n
  3. Add the data<\/li>\n
  4. Write a simple JS charting code<\/li>\n<\/ol>\n

    And voila! You’ll have a stunning surface chart. Let\u2019s dive deeper into each of these steps.<\/p>\n

    1. Create a basic webpage in HTML<\/h3>\n

    First, we need to whip up a simple HTML webpage. Then, we add a <div><\/code> element and assign it a unique ID to create a special spot for our 3D surface plot to shine. To make sure the chart fills the entire page, we include CSS code within the <style><\/code> tag with the width and height set to 100%. Of course, you can always customize the size and shape of your chart to your heart’s content.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript 3D Surface Plot<\/title>\r\n    <style type=\"text\/css\">\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include the required JavaScript files<\/h3>\n
    Now, we’ll add the necessary JavaScript files in the <head><\/code> section. Luckily, many charting libraries are available that simplify the process of visualizing data. I personally love AnyChart<\/a>, as it supports 3D surface plots with its comprehensive documentation<\/a> and is free for non-profit use. Regardless of which library you choose, the basic steps for chart creation remain the same. For the 3D surface plot, we need to include the Core, Surface, and Data Adapter modules<\/a> in your project.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript 3D surface plot<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-surface.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n    <style type=\"text\/css\">\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the 3D surface plot will come here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Add the data<\/h3>\n
    For this chart, we’ll be using data from The World Bank<\/a>.<\/p>\n
    I’ve already saved the data in a JSON file, which you can find here<\/a>. However, I’ve excluded the data of China and India since their large populations skew the chart data.<\/p>\n
    To load the data into our surface chart, we’ll use the anychart.data.loadJsonFile()<\/code> function. Here’s the code we\u2019ll be using.<\/p>\n
    anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/awanshrestha\/9d0f4c864817d5ee043126f63f1f4d02\/raw\/91cb71ac4159ce86bbe2eb204c190f1e9ce43ba6\/surface-test.json',);<\/code><\/pre>\n
    4. Write a simple JS charting code<\/h3>\n
    Creating a 3D surface plot is simpler than you might think. With just a few lines of code, you can build your chart in no time when using a good JavaScript charting library. Start by enclosing all the necessary code within an anychart.onDocumentReady()<\/code> function, which ensures that it will only execute once the page is fully loaded.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The JS 3D surface plot data and code will be in this section.\r\n  });\r\n<\/script><\/code><\/pre>\n
    We’ll add the data from Step 3 and create a dataset result. Then, we’ll use the anychart.data.loadJsonFile()<\/code> method to load the JSON data from the file and execute a callback function when the data is available. The function (data) { }<\/code> is the callback function that takes the loaded JSON data as its parameter and processes it into a format that the surface chart can understand.<\/p>\n
    Next, we’ll pass the result as a parameter to the anychart.surface()<\/code> function to create a 3D surface plot object. This object can be customized and displayed on the page using JavaScript.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/awanshrestha\/9d0f4c864817d5ee043126f63f1f4d02\/raw\/91cb71ac4159ce86bbe2eb204c190f1e9ce43ba6\/surface-test.json',\r\n      function (data) {\r\n        \/\/ pre-processing of the data\r\n        var result = [];\r\n        for (var x = 0; x < data.x.length; x++) {\r\n          for (var y = 0; y < data.y.length; y++) {\r\n            result.push([x, data.y[y], data.z[x][y]]);\r\n          }\r\n        }\r\n      }\r\n    );\r\n  });\r\n<\/script><\/code><\/pre>\n
    We’ll use the surface()<\/code> function to create our chart, passing the result dataset into it.<\/p>\n
    var chart = anychart.surface(result);<\/code><\/pre>\n
    The labels of all axes are enabled by default and can be formatted using the format()<\/code> parameter of the labels()<\/code> method.<\/p>\n
    chart\r\n  .xAxis()\r\n  .labels()\r\n  .format(function () {\r\n    return data.x[Math.round(this.value)];\r\n  });<\/code><\/pre>\n
    We can set the axis scale using the appropriate constructor, as shown in the code snippet.<\/p>\n
    chart.xScale().maximum(data.x.length - 1);<\/code><\/pre>\n
    We’ll also set the chart paddings using the padding()<\/code> function.<\/p>\n
    chart.padding(50, 50, 50, 75);<\/code><\/pre>\n
    Additionally, we can rotate the 3D surface plot by dragging it with the help of a mouse. We can even set the angles of rotation using rotationY()<\/code> and rotationZ()<\/code> methods.<\/p>\n
    \/\/ set the default chart rotation by the y-axis\r\nchart.rotationY(40);\r\n\r\n\/\/ set the default chart rotation by the z-axis\r\nchart.rotationZ(130);<\/code><\/pre>\n
    Finally, we’ll set the title of the chart and place it into the <div><\/code> container that was previously specified. We’ll display it by using the draw()<\/code> function.<\/p>\n
    \/\/ set the chart title\r\nchart.title('Population Growth of Top 50 Most Populous Countries Over Past 50 Years');\r\n\r\n\/\/ set the container id for the chart\r\nchart.container('container');\r\n\r\n\/\/ initiate the visualization\r\nchart.draw();<\/code><\/pre>\n
    Ta-da! Our 3D surface plot is complete and can be seen below. For your convenience, I’ve included the complete code just under the picture. If you want to experiment with the code and see how different modifications can affect the surface chart visualization. Feel free to find the interactive version on the playground<\/a>. But for now, keep reading because this is just the beginning.<\/p>\n