Basic Plotly.js Plots – Data Science Examples

Please follow and like us:

Data visualization is an essential aspect of communicating with data. Plotly, a graphing module that can work with Python, also has a javascript version. With plotly.js, making web-based dashboards and dynamic graphs is straight forward.

As with most any website dashboards, you will need to start out with an HTML file. In the head of the HTML file, you will either need to link to the plotly.js file on a server or to the plotly website that has the file. This file link is in quotes after the src attribute of the script tag. If the link is to an external file from the makers of plotly.js, the file is called the cdn.

A separate section will have to be designated for a future graph with div tags. The opening div tag in this case will have an id of myDiv.
At the end of the HTML page, in the body, you will need another script tag that links to the javascript file that you create. You can use VScode or Sublime Text to create HTML and javascript files.

HTML File

Below is the text of the entire HTML file:

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

	</head>
	<body>
		<div id=myDiv></div>
		<script src="test.js"></script>
	</body>
</html>

Create a folder on your desktop called “plotly_tutorial”
Save the file in this folder as test.html.

Javascript for Basic plotly.js Plots

Then, create a new file. This file will be the linked javascript file that directs plotly.js to produce the graph.

var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: ‘scatter’
};
var data = [trace1];
Plotly.newPlot(‘myDiv’, data);

Save this file in the same folder as the HTML file as test.js.

Now, if you want to find out what the plot looks like, you will need to run a local server. The easiest way of doing this is running the server that comes with python with the following command in the command line.

Go to the command line, and then,

cd desktop

Then,

cd plotly_tutorial

After that begin running a local HTTP server that comes with python.

python -m http.server

You should see the line:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) …

However, if you go to that address in your browser, nothing will come up. The default is to go to the index.html file. If that does not exist, nothing will come up. So, you need to add the name of the HTML file at the end of the address.

http://www.0.0.0.0:8000/test.html

Again, this web address won’t work unless you have your machine running a local HTTP server. Now, the plot will show up on the page. Don’t worry. Your computer is not acting like a true server. It is only showing that page locally at either http://0.0.0.0:8000/test.html or http://127.0.0.1:8000/test.html.

Now, you can try changing the data in the test.js file and see how it turns out. You will notice that plotly.js comes with some dynamic capabilities built-in that are available through buttons in the top right such as zoom, pan, and select. Play with these buttons in the plotly.js plots to see what happens.

Putting such plots on a WordPress site like this is a little more complicated, but not too difficult. It requires a plugin. I used the pro version of CSS & Javascript Toolbox.

The code for this simple plotly demo is at my Github page: https://github.com/scottcm73/simple_plotly.js_tutorial/

Reference

“Line Charts in Javascript, How to make D3.js-based line charts in JavaScript”. plotly.com. Retrieved from https://plotly.com/javascript/line-charts/ on June 22, 2020.

“http.server — HTTP Servers”. Python.org. Retrieved from https://docs.python.org/3/library/http.server.html#http.server.HTTPServer on June 22, 2020.

Please follow and like us: