Angular and Django – Adding NumPy, Pandas, Matplotlib and Seaborn

In the first post I covered the process of building a simple site with Angular 4 on the client and Django on the server and how to deploy it to heroku. One great benefit to use python is the huge amount of packages it has

Python is great choice for data analysis , it has some popular packages to make development very easy:

  • NumPy – package for creating and using multi-dementional arrays
  • Matplotlib – package for creating graphs
  • Pandas – package for data handling
  • Seaborn – package for data visualization , build on matplotlib

In this post I will cover the process of integrating the above packages on the server side and use it from Angular

Using NumPy

First we need to install it on our virtual environment:

Then we can add code to use numpy arrays for example – adding new view:

Add url to match the view:

Run the server and test the result by using the url: 127.0.0.1:8000/getnum

More useful example:

We want to send list of numbers to manipulate it on server – for example calculate average: we build a simple form:

The Angular side:

HTML:

JavaScript:

The server side:

of course it  is just an example of something you can easily do on the client but if you need something more complex (linear algebra etc.) this is the way

Using Matplotlib

Matplotlib package helps you create many types of graphs. it is based on Numpy Arrays.

Now we want to generate a graph on http request.

The first thing to do is installing matplotlib in our virtual environment:

Then we need to import matplotlib and also add the following command:

You need to use a non-interactive backend ‘Agg’ to generate png files

The following code generate graph as a view:

Add url for the new view and test it locally:

Load the graph from Angular code:

Add an img tag:

Add new data member to the class and connect a button click event:

Build the angular code and copy to the static folder of your app:

 

Using Pandas

Pandas is a great package for data analysis – one object it defines is a dataframe – a 2 dimension table with many methods act on it like SQL.

We need to install it:

Now we define a view to return a dataframe in html format:

In the above code we define a numpy array with random numbers, create a DataFrame and convert it to html. The classes we define belongs to bootstrap

Integrate With Angular

We define a span and bind the innerHTML attribute to the pandas table:

 

Using Seaborn

Seaborn helps with creating statistic graphs. It is built on Matplotlib and support some interesting graphs

Install:

To use seaborn, we will use a CSV file taken from kaggle.com – Titanic Dataset

To load the file into pandas dataframe  we need to add the file to the project files – we simply put it on the same folder as views.py

we want to see who survived group by sex and Pclass so we generate a factorplot graph:

And Again we declare img tag on Angular, bind it to class member and set it on click

This is the result:

Like the above, we can add any package we want , manipulate it on the server and make an http request from the client to load it.

Final server code(views.py):

urls.py

Client side HTML:

TypeScript

You can see the final result here

 

 

 

Tagged ,

1 thought on “Angular and Django – Adding NumPy, Pandas, Matplotlib and Seaborn

  1. […] For integrating data packages – numpy, spicy, pandas and more see this post […]

Leave a Reply

Your email address will not be published. Required fields are marked *