How To Create Interactive Covid-19 Graph with Plotly And Export It To HTML

Hi guys! In this story we are going to learn how to create interactive graph and export it to HTML. To demonstrate it I am going to use Coronavirus dataset. With this method, you can create your own graph and add it to your website. Let’s begin!

I am going to use Jupyter Notebook to create graph. First of all create new notebook.

First of all we need to import our magical libraries!

After that let’s download the dataset from the kaggle.com to visualize it. I am going to use that dataset. Let’s focus on creating a dataset to show open cases all around the world, and their change during time for all countries.

“time_series_covid_19_confirmed.csv” will be our dataset to visualize. Let’s download it. Move it to the file you have created the notebook and read that dataset as a data frame. I have named it as “dfcase”.

Let’s check what we have here with “dfcase.head()”

Our dataset looks good! But I am going to create a graph that shows the number of cases for every country and in the given time. So I don’t need some columns for that purpose. They are “Province/State”, “Lat” and “Long” columns so I am going to drop them. But before that, some countries has “Province/State” columns so I don’t want to lose that information as well so add that information to “Country/Region” column if it is exist, if not, leave it as is. To do that I am going to run that line,

I am going to set “Country/Region” column as index column since they are unique for me.

After this, now I can drop the columns that I don’t need anymore.

Let’s check our dataset again to be sure.

That’s it. Now we have perfect dataset to visualize it according to our purpose. Let’s do that. Before creating graph I want to create graph offline with Plotly. So import cufflinks will be our next move and call go_offline().

We are ready! We have updated our dataset according to our needs and let’s create our graph! I am setting width to 7 to make lines better look. Of course you don’t need to do that.

So our graph is ready! But how can we create HTML of it to add our website? First we need to convert our graph to figure and export it to HTML with Plotly. That’s all we need. Let’s see in action.

This will create “index.html” which is basically our graph! You can add this html to anywhere to show your graph. In my case I have uploaded it to one of my Github page to show it! You can see the graph from this link!

https://anilemrah.github.io/MediumCovid19/

If you wonder how to import your HTMLs to Github please visit this story to explore.

That’s all for now. I hope that article will help you, if you have any questions or suggestions please leave me a comment. Thank you for your time. Hope to see you in next articles!

Full-time developer, and lifelong learner. Loves to learn and experience. Motto: Stay Hungry, Stay Foolish | @anilemrah_

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store