Embedding Interactive Graphs in Blogs and Websites

This Instructable will show you how create and publish beautiful and free interactive graphs in your website or blog.

For this example we are going to introduce plotly, a free cloud-based tool capable of easily making many different kinds of beautiful graphs. The plotly javascript library is particularly well suited for making science and engineering visualizations.

Step 1: Create a Plotly Account

To get started you will need a plotly account. In addition to providing access to the graphing tool, a plotly account allows you to save all the data and graphs you ever import or create in a personal online folder. Go to https://plot.ly/ in your web browser. In the top right corner you will see a sign up button. You should enter a username and password and save these for later use.

Step 2: Import or Input the Data You Want to Graph

Signing in will take you to your datawell. From here you can import data or input your own data.

Select import if you have a data set to import. This will let you navigate your actual and virtual drives to find the your dataset. (excel, csv, json, xml, matlab, zip, tar, access database files). You can also click on the sample data if you have no data set and want to use ours. You may also select New (then select table) if you would like to input your own data.

For the purpose of this exercise lets create our own simple data set. Click on New and select table.

Step 3: Enter Your Data - Copying and Pasting From Wikipedia

Lets get some data we can enter into our spreadsheet. You can copy and paste directly from the internet into your table. Keeping plotly open, open a new browser window. Lets go to Wikipedia and copy the Baseball single season home run record table there.

Highlight the table as seen above. Copy the data. Then return to your plotly table and paste it in.

Step 4: Make a Graph

With the data in place in the spreadsheet we can make our graph. Lets make a Bar Graph.

Step 1:

Click on Make a Chart and select Bar Chart

Step 2:

Notice that Babe Ruth appears 4 times in the data. For this type of graph we will need to make sure each "Babe Ruth" is treated as a unique bar in the bar chart. So we will put a 1, 2, 3 and 4 after each of the Babe Ruth entries.

Step 3:

Define your x axis by clicking on the x square above the "Batter" column

Step 4:

Define your y axis variable by clicking on the y square above the "HR" column

Step 5:

Click on the "Bar chart" button and your graph will magically appear!

Step 5: Edit Your Graph

You can now edit the graph to your liking. You should put a title on it and perhaps label the y axis.

You will need to know the height and width of your graph for later. Click on the layout button and set the height and width as needed (or just keep the default if you like). Be sure to write these down you need them in step 7.

The rest is optional but you will find a very powerful set of tools to format and manipulate the graph in Traces, Layout, Axis, Notes, and Legend.

Don't forget to save your finished graph.

Step 6: Share Your Graph

Select "Share" in the upper right hand side of the screen.

Select the "Public" radio button and copy (Ctrl-C) the URL. Then click "Save". The graph can now be viewed by anyone on the internet with the URL.

Step 7: Embed Graph in Webpage With Iframe

Insert the code above into your the HTML of your webpage where you would have otherwise included your image file. You will need to insert the URL of the shared graph, the height and width of your graph into the appropriate highlighted area in the code.

Save the HTML file.

You now have an embedded interactive graph on you webpage that can be forked, opened and manipulated by your readers. This code will also allow you to create a user gallery of all of the user generated graphs that are made with the source data for your graph that you can also show in your blog.

This gallery can be customized on plotly and will look something like this.

Enjoy and happy embedding!!