Data Science and Machine Learning - #21 Aplicação Real VI (Gráficos)

Nesse tutorial aprenderemos como plotar gráficos utilizando a lib Plotly através de uma aplicação real no Python.

Plotando gráficos com Matplotlib

Vamos começar instalando a lib Plotly.

pip install plotly
python manage.py runserver

app/templates/index.html

Vamos criar uma div para receber os gráficos.

<div class="graph col-10 m-auto">
    {% autoescape off %}
     {{grafico}}
    {% endautoescape %}
</div>

app/views.py

Na views vamos importar a lib Plotly e exportar os dados para o template:

import plotly.offline as py
import plotly.graph_objs as go

def home(request):
    #data['dados']=df[(df['release_year']>2009) & (df['country']=='Brazil')]\
    counter = 0
    list = []
    rows = len(df.index)

    while(counter < rows):
        list.append("Detalhes")
        counter+=1
    df['links']=list

    trace = go.Bar(
        x=df.sort_values(by='release_year')['release_year'].unique(),
        y=df.groupby('release_year')['title'].count()
    )
    datas=[trace]
    data['grafico']=py.plot(datas,output_type='div')
    """trace = go.Pie(
        labels=df['type'].unique(),
        values=df.groupby('type')['title'].count()
    )"""
    datas = [trace]
    data['grafico'] = py.plot(datas, output_type='div')

    data['dados']=df[['title','country','links']]\
        .dropna()\
        .head(20)\
        .to_html(render_links=True, escape=False,classes=['table','table-striped','mt-5'])
    data['countryFilter']=df['country'].sort_values().unique()
    return render(request,'index.html',data)

def countryFilter(request):
    if request.body:
        field = json.loads(request.body.decode('utf-8'))
        search = field['country']
        title = field['title']
        df2=df.dropna()

        data['grafico']={
            'x':df2[(df2['country'].str.contains(search))&(df2['title'].str.contains(title,flags=re.IGNORECASE))].sort_values(by='release_year')['release_year'].unique().tolist(),
            'y':df2[(df2['country'].str.contains(search))&(df2['title'].str.contains(title,flags=re.IGNORECASE))].groupby('release_year')['title'].count().to_list()
        }

        data['dados']=df2[(df2['country'].str.contains(search))&(df2['title'].str.contains(title,flags=re.IGNORECASE))]\
        .to_html(index=False,classes=['table','table-striped','mt-5'])
        return JsonResponse({'data':data['dados'],'graph':data['grafico']})

app/templates/main.html

Vamos instalar a lib javascript do Plotly para trabalhar com ajax:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

app/static/js/javascript.js

No javascript.js faremos o nosso ajax:

(function(win,doc){
    'use strict';

    doc.querySelector('.btn').addEventListener('click',async(event)=>{
        event.preventDefault();
        let req=await fetch('http://localhost:8000/countryFilter/',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json',
                'X-CSRFToken':doc.querySelectorAll('input')[0].value
            },
            body:JSON.stringify({
                'country':doc.querySelector('#country').value,
                'title':doc.querySelector('#title').value,
            })
        });
        let res=await req.json();
        doc.querySelector('.result').innerHTML=res.data;

        let graph = doc.querySelector('.graph');
        Plotly.newPlot( graph, [{
        x: res.graph.x,
        y: res.graph.y,
        type:'bar'
        }] );
    },false);

})(window,document);

Por hoje é só! Sucesso nos códigos e na vida!