Integrations
Scatter Chart

Matplotlib Scatter Chart

Introduction

Matplotlib is a library for making charts, which works very well with Jupyter Notebook. One of them is called a Scatter Chart. We've got a few examples ready to show you, so you can see what they look like and how they work:

  • simple scatter chart
  • scatter chart with numpy data
  • scatter chart with pandas data
  • an interactive scatter chart

If you need any information about Matplotlib check their docs: Matplotlib Docs (opens in a new tab).

All of code examples are availabe as Jupyter Notebooks in our GitHub repositiory:

Scatter Chart

Example with using only matplotlib package:

# import packages
import matplotlib.pyplot as plt
 
# create data
x = [1,3,5,3,4,6,1]
y = [45,57,49,60,54,47,55]
 
# plot 
plt.scatter(x, y)
plt.show()
Simple matplotlib scatter chart.

Scatter Chart with Numpy Data

You can turn numpy data into scatter chart thanks to matplotlib library:

# import packages 
import matplotlib.pyplot as plt
import numpy as np
 
# create data
x = np.array([5,7,8,7,2,2,9,4,9,6])
y = np.array([99,86,87,88,111,86,103,87,94,78])
 
# plot
plt.scatter(x,y)
plt.show()
Matplotlib scatter chart with numpy data.

Scatter Chart with Pandas Data

Display pandas data as a scatter chart created with matplotlib:

# import packages 
import matplotlib.pyplot as plt
import pandas as pd
 
# create data
df = pd.DataFrame({'points_x': [1,4,2,5,4,4,3,3,2,1], 'points_y': [45,47,65,56,49,63,57,42,58,61]})
 
# plot
plt.scatter(df['points_x'],df['points_y'])
plt.show()
Matplotlib scatter chart with panads data.

Interactive Scatter Chart

Static charts are boring, what about creating an interactive scatter chart? It's possible with matplotlib and mercury packages. You can choose which data you want to display using mercury widgets. In this example we used MultiSelect (opens in a new tab):

# import packages 
import matplotlib.pyplot as plt
import mercury as mr
# mercury widget 
selection = mr.MultiSelect(label="Please select data", 
                          value=["data1"], 
                          choices=["data1","data2","data3"])
# create data
x_1 = [4, 4, 8, 10, 7, 6, 7, 6, 3, 5]
x_2 = [10, 10, 5, 5, 9, 3, 8, 5, 1, 1]
x_3 = [5, 1, 10, 1, 8, 5, 1, 2, 10, 9]
y_1 = [53, 42, 56, 59, 49, 53, 45, 53, 43, 50]
y_2 = [47, 56, 49, 58, 45, 55, 54, 49, 45, 52]
y_3 = [45, 53, 40, 49, 60, 54, 52, 44, 59, 56]
 
# plot
if "data1" in selection.value:
    plt.scatter(x_1,y_1)
if "data2" in selection.value:
    plt.scatter(x_2,y_2)
if "data3" in selection.value:
    plt.scatter(x_3,y_3)
plt.show()

Now, you can turn your Jupyter Notebook into Web App without additional code changes! Here is a video which presents how it will look:

Deploying Web App is very easy that you can do it in 3 steps:

Login to Mercury Cloud

If you don't have account, you can create it here: Mercury Cloud (opens in a new tab).

Create new site

Create new or use an existing site.

Upload your notebook

Upload the notebook with code.

Congrats! You just created your own Web App and you can share your Jupyter Notebooks with nontechnical users. If you need more information about deploying the Web App check Mercury Cloud Documentation (opens in a new tab).