Category: pro

Python hosting: Host, run, and code Python in the cloud!

3d scatterplot

Matplotlib can create 3d plots. Making a 3D scatterplot is very similar to creating a 2d, only some minor differences. On some occasions, a 3d scatter plot may be a better data visualization than a 2d plot. To create 3d plots, we need to import axes3d.

Related course:
Data Visualization with Python and Matplotlib

Introduction
It is required to import axes3d:

from mpl_toolkits.mplot3d import axes3d

Give the data a z-axis and set the figure to 3d projection:

ax = fig.gca(projection='3d')

matplotlib-scatterplot-3d — 3d scatter plot with Matplotlib

3d scatterplot

Complete 3d scatterplot example below:

import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import axes3d
 
# Create data
N = 60
g1 = (0.6 + 0.6 * np.random.rand(N), np.random.rand(N),0.4+0.1*np.random.rand(N))
g2 = (0.4+0.3 * np.random.rand(N), 0.5*np.random.rand(N),0.1*np.random.rand(N))
g3 = (0.3*np.random.rand(N),0.3*np.random.rand(N),0.3*np.random.rand(N))
 
data = (g1, g2, g3)
colors = ("red", "green", "blue")
groups = ("coffee", "tea", "water") 
 
# Create plot
fig = plt.figure()
ax = fig.add_subplot(1, 1, 1, axisbg="1.0")
ax = fig.gca(projection='3d')
 
for data, color, group in zip(data, colors, groups):
    x, y, z = data
    ax.scatter(x, y, z, alpha=0.8, c=color, edgecolors='none', s=30, label=group)
 
plt.title('Matplot 3d scatter plot')
plt.legend(loc=2)
plt.show()

The plot is created using several steps:

vector creation (g1,g2,g3)
list creation (groups)
plotting

The final plot is shown with plt.show()

Matplotlib Subplot

The Matplotlib subplot() function can be called to plot two or more plots in one figure. Matplotlib supports all kind of subplots including 2×1 vertical, 2×1 horizontal or a 2×2 grid.

Related courses

Data Visualization with Matplotlib and Python

Horizontal subplot
Use the code below to create a horizontal subplot

from pylab import *
 
t = arange(0.0, 20.0, 1)
s = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
 
subplot(2,1,1)
xticks([]), yticks([])
title('subplot(2,1,1)')
plot(t,s)
 
subplot(2,1,2)
xticks([]), yticks([])
title('subplot(2,1,2)')
plot(t,s,'r-')
 
show()

Vertical subplot
By changing the subplot parameters we can create a vertical plot

 
from pylab import *
 
t = arange(0.0, 20.0, 1)
s = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
 
subplot(1,2,1)
xticks([]), yticks([])
title('subplot(1,2,1)')
plot(t,s)
 
subplot(1,2,2)
xticks([]), yticks([])
title('subplot(1,2,2)')
plot(t,s,'r-')
 
show()

matplot-subplot-vertical — matplotlib subplot vertical

Subplot grid
To create a 2×2 grid of plots, you can use this code:

from pylab import *
 
t = arange(0.0, 20.0, 1)
s = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
 
subplot(2,2,1)
xticks([]), yticks([])
title('subplot(2,2,1)')
plot(t,s)
 
subplot(2,2,2)
xticks([]), yticks([])
title('subplot(2,2,2)')
plot(t,s,'r-')
 
subplot(2,2,3)
xticks([]), yticks([])
title('subplot(2,2,3)')
plot(t,s,'g-')
 
subplot(2,2,4)
xticks([]), yticks([])
title('subplot(2,2,4)')
plot(t,s,'y-')
 
show()

Matplot Matrix Correlation

A correlation diagram can be created using Matplotlib. Matplotlib is the most used plotting library for Python. It can be included in all the graphical toolkits that are available for Python.

Related courses

Data Visualization with Matplotlib and Python

Matrix definition
To start we define a 2×2 matrix and a list called groups. The matrix is defined inside the brackets (double [[ and ]] if written on a single line).

m = [
[1,0,2,0,0],
[1,1,1,2,0],
[0,4,1,0,0],
[0,4,4,1,2],
[1,3,0,0,1],
]
 
groups = ['Blues','Jazz','Rock','House','Dance']

Visual:

Matrix correlation

The code below generates a Matrix correlation diagram using Matplotlib.

import matplotlib.pyplot as plt
import numpy as np
 
m = [
[1,0,2,0,0],
[1,1,1,2,0],
[0,4,1,0,0],
[0,4,4,1,2],
[1,3,0,0,1],
]
 
plt.matshow(m)
 
groups = ['Blues','Jazz','Rock','House','Dance']
 
x_pos = np.arange(len(groups))
plt.xticks(x_pos,groups)
 
y_pos = np.arange(len(groups))
plt.yticks(y_pos,groups)
 
plt.show()

Initially we define the matrix (m) and the list (groups).
We set the length to be equal to the length of the groups. On the x axis and y axis we set the group names.

Image histogram

A histogram is collected counts of data organized into a set of bins. Every bin shows the frequency. OpenCV can generate histograms for both color and gray scale images. You may want to use histograms for computer vision tasks.

Related course

Master Computer Vision with OpenCV

Histogram example
Given an image we can generate a histogram for the blue, green and red values.

Histogram_Calculation — Histogram Calculation

We use the function cv.CalcHist(image, channel, mask, histSize, range)

Parameters:

image: should be in brackets, the source image of type uint8 or float32
channel: the color channel to select. for grayscale use [0]. color image has blue, green and red channels
mask: None if you want a histogram of the full image, otherwise a region.
histSize: the number of bins
range: color range:

Histogram for a color image:

# draw histogram in python.
import cv2
import numpy as np
 
img = cv2.imread('image.jpg')
h = np.zeros((300,256,3))
 
bins = np.arange(256).reshape(256,1)
color = [ (255,0,0),(0,255,0),(0,0,255) ]
 
for ch, col in enumerate(color):
hist_item = cv2.calcHist([img],[ch],None,[256],[0,255])
cv2.normalize(hist_item,hist_item,0,255,cv2.NORM_MINMAX)
hist=np.int32(np.around(hist_item))
pts = np.column_stack((bins,hist))
cv2.polylines(h,[pts],False,col)
 
h=np.flipud(h)
 
cv2.imshow('colorhist',h)
cv2.waitKey(0)

Flask and great looking charts using Chart.js

Flask piechart — **Flask** webapp with pie chart

In this article you will learn how to create great looking charts using Chart.js and Flask.

Chart.js is a javascript library to create simple and clean charts. All of them are HTML5 based, responsive, modular, interactive and there are in total 6 charts.

Related course
Python Flask: Make Web Apps with Python

We will start by creating a web application that displays a bar chart from a Python array. Create a directory /templates/ and add the file chart.html with this content:

   <meta charset="utf-8"/>   <title>Chart.js </title>      <!-- import plugin script -->   <script src="static/Chart.min.js"></script>
<h1>Flask Chart.js</h1>
<!-- bar chart canvas element --><canvas id="chart" width="600" height="400"></canvas>
<script><br />
   // bar chart data<br />
   var barData = {<br />
   labels : [{% for item in labels %}<br />
                  "{{item}}",<br />
              {% endfor %}],<br />
   datasets : [<br />
      {<br />
            fillColor: "rgba(151,187,205,0.2)",<br />
            strokeColor: "rgba(151,187,205,1)",<br />
            pointColor: "rgba(151,187,205,1)",<br />
         data : [{% for item in values %}<br />
                      {{item}},<br />
                    {% endfor %}]<br />
      }<br />
      ]<br />
   }
<p>   // get bar chart canvas<br />
   var mychart = document.getElementById("chart").getContext("2d");</p>
<p>   steps = 10<br />
   max = 10<br />
   // draw bar chart<br />
   new Chart(mychart).Bar(barData, {<br />
        scaleOverride: true,<br />
        scaleSteps: steps,<br />
        scaleStepWidth: Math.ceil(max / steps),<br />
        scaleStartValue: 0,<br />
        scaleShowVerticalLines: true,<br />
        scaleShowGridLines : true,<br />
        barShowStroke : true,<br />
        scaleShowLabels: true<br />
   });</p>
<p></p></script>

Create the directory /static/ and add the file Chart.min.js to it. You can get it either from the Chart.js website or use the link. Finally go into the home directory and create app.py with this contents:

from flask import Flask
from flask import Markup
from flask import Flask
from flask import render_template
app = Flask(__name__)
 
@app.route("/")
def chart():
labels = ["January","February","March","April","May","June","July","August"]
values = [10,9,8,7,6,4,7,8]
return render_template('chart.html', values=values, labels=labels)
 
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5001)

Finally run:

python app.py

Open http://127.0.0.1:5001/ and you will see the array values[] plotted with the data in labels[].

We simply pass these two arrays to render_template(). This means that most of the magic occurs in the template. Chart.js is a client-side javascript library which is why our app.py is very minimal.

Result:

Continue reading “Flask and great looking charts using Chart.js”

Flask Web App with Python (beginners tutorial)

python-flask-webap — Python app created with Flask

In this tutorial you’ll learn how to build a web app with Python. We’ll use a micro-framework called Flask.

Why Flask?

easy to use.
built in development server and debugger
integrated unit testing support
RESTful request dispatching
uses Jinja2 templating
support for secure cookies (client side sessions)
100% WSGI 1.0 compliant
Unicode based
extensively documented

Related course:
Python Flask: Make Web Apps with Python

$ pip install Flask

Create a file called hello.py

from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def hello():
return "Hello World!"
 
if __name__ == "__main__":
app.run()

Finally run the web app using this command:

$ python hello.py
* Running on http://localhost:5000/

Open http://localhost:5000/ in your webbrowser, and “Hello World!” should appear.

Creating URL routes

URL Routing makes URLs in your Web app easy to remember. We will now create some URL routes:

/hello
/members/
/members/name/

Copy the code below and save it as app.py

from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def index():
return "Index!"
 
@app.route("/hello")
def hello():
return "Hello World!"
 
@app.route("/members")
def members():
return "Members"
 
@app.route("/members/<string:name>/")
def getMember(name):
return name</string:name>
 
if __name__ == "__main__":
app.run()

Restart the application using:

$ python hello.py
* Running on http://localhost:5000/

Try the URLs in your browser:

Style Flask Pages

We will separate code and User Interface using a technique called Templates. We make the directory called /templates/ and create the template:

<h1>Hello {{name}}</h1>

The Python Flask app with have a new URL route. We have changed the default port to 80, the default HTTP port:

from flask import Flask, flash, redirect, render_template, request, session, abort
 
app = Flask(__name__)
 
@app.route("/")
def index():
return "Flask App!"
 
@app.route("/hello/<string:name>/")
def hello(name):
return render_template(
'test.html',name=name)</string:name>
 
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80)

You can then open : http://127.0.0.1/hello/Jackson/

Styling the template
Do you want some better looking template? We modify the file:

{% extends "layout.html" %}
{% block body %}
<div class="block1">
<h1>Hello {{name}}!</h1>
<h2>Here is an interesting quote for you:</h2>
"The limits of my language are the limits of my mind. All I know is what I have words for."
 
<img src="http://www.naturalprogramming.com/images/smilingpython.gif">
 
</div>
{% endblock %}

We then create layout.html which defines the look of the page. (You may want to split the stylesheet and layout.html file). Copy this as layout.html

 
<title>Website</title>
 
<style>
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:700);</p>
<p>body{<br />
    text-align: center;<br />
}<br />
h1{<br />
    font-family: 'Amatic SC', cursive;<br />
    font-weight: normal;<br />
    color: #8ac640;<br />
    font-size: 2.5em;<br />
}</p>
</style>{% block body %}{% endblock %}

Restart the App and open the url. http://127.0.0.1/hello/Jackson/
You can pick any name other than Jackson.

python-webapp-flask — python webapp flask

Passing Variables

Lets display random quotes instead of always the same quote. We will need to pass both the name variable and the quote variable. To pass multiple variables to the function, we simply do this:

    return render_template(
'test.html',**locals())

Our new test.html template will look like this:

{% extends "layout.html" %}
{% block body %}
<div class="block1">
<h1>Hello {{name}}!</h1>
<h2>Here is an interesting quote for you:</h2>
{{quote}}
 
<img src="http://www.naturalprogramming.com/images/smilingpython.gif">
 
</div>
{% endblock %}

We will need to pick a random quote. To do so, we use this code:

    quotes = [ "'If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.' -- John Louis von Neumann ",
"'Computer science is no more about computers than astronomy is about telescopes' --  Edsger Dijkstra ",
"'To understand recursion you must first understand recursion..' -- Unknown",
"'You look at things that are and ask, why? I dream of things that never were and ask, why not?' -- Unknown",
"'Mathematics is the key and door to the sciences.' -- Galileo Galilei",
"'Not everyone will understand your journey. Thats fine. Its not their journey to make sense of. Its yours.' -- Unknown"  ]
randomNumber = randint(0,len(quotes)-1)
quote = quotes[randomNumber]

The first thing you see is we have defined an array of multiples quotes. These can be accessed as quote[0], quote[1], quote[2] and so on. The function randint() returns a random number between 0 and the total number of quotes, one is subtracted because we start counting from zero. Finally we set the quote variable to the quote the computer has chosen. Copy the code below to app.py:

from flask import Flask, flash, redirect, render_template, request, session, abort
from random import randint
 
app = Flask(__name__)
 
@app.route("/")
def index():
return "Flask App!"
 
#@app.route("/hello/<string:name>")
@app.route("/hello/<string:name>/")
def hello(name):
#    return name
quotes = [ "'If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.' -- John Louis von Neumann ",
"'Computer science is no more about computers than astronomy is about telescopes' --  Edsger Dijkstra ",
"'To understand recursion you must first understand recursion..' -- Unknown",
"'You look at things that are and ask, why? I dream of things that never were and ask, why not?' -- Unknown",
"'Mathematics is the key and door to the sciences.' -- Galileo Galilei",
"'Not everyone will understand your journey. Thats fine. Its not their journey to make sense of. Its yours.' -- Unknown"  ]
randomNumber = randint(0,len(quotes)-1)
quote = quotes[randomNumber] </string:name></string:name>
 
return render_template(
'test.html',**locals())
 
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80)

When you restart the application it will return one of these quotes at random.

Download App and more Flask Examples

Whats next?
You could link your site with a database system such as MySQL, MariaDb or SQLite. You can find an SQLite tutorial here. Enjoy creating your application!

1 2 3 4 5 6 7 8 9 … 13 14 15

3d scatterplot

Matrix correlation

Creating URL routes

Style Flask Pages

Passing Variables

Posts navigation