hello and welcome to red stapler channel in this video we are going to show you
how to create a 3d surface chart just JavaScript using plotly.js
open-source JavaScript graphing library that is built on top of d3.js
and very powerful for making graph and charts it is the same library that I've
showed you how to create a real-time updating chart in previous tutorial ready
let's check it out so as usual if you are not using NPM we will download the
latest version of ploty.js from github and include it to your page using
script tag
and also create a div element that you want to display the chart
to create a surface chart you will need to provide the data in array of arrays
format like this one
you can retrieve the data from third party API or read it from CSV file or
using your database but eventually you will need to convert it into array of
array before passing to the library so in the first example I'm going to write
a function to create an array of arrays with random data with the size of 10 and
the second example I'm going to read the data from the CSV file
here's how the array looks like if we displayed on console
now we will call plotly.newPlot and pass the chart div element
followed by data and chart definition object
you can provide the data by passing the array into Z property and set the type
to surface
and that's it let's see how it works
now in real-life scenario we wouldn't use random value like this with
plotly you can read the CSV file to retrieve the data by using plotly.d3.csv function
the CSV data need to be in this format with the first row and column having x
and y values
you can pass the URL or path to your CSV file followed by a callback function
when the CSV was loaded
the first parameter is the error if there's any and the second one is the
rows object from the CSV file let's display it on console to see it how it looks like
now you will see that we have the value of each row but it's in object format we
need to convert it into array before we can pass it to partly you can do that
easily by using map method
now let's display to console again
now we have the data in the correct format the final step is to create the chart
this is only the basic and there are lots of options to customize your chart
you can visit Plotly documentation and try experiment it so that's it you can
find the source code at the video description box below please like or
subscribe to stay tuned with us for more interesting tutorials thanks watching
and see you in the next video