rodrigo_mesquita_DR2

Link notebook: https://deepnote.com/@infnet-b5b4/rodrigomesquitaDR2TP3-e34263c1-0d17-4858-b81c-d90dd43cd40a

!pip install streamlit -U

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Exercício 1: Introdução ao Streamlit e Hello World

a.Explique em poucas palavras o que é o Streamlit e mencione duas funcionalidades principais.

b.Descreva os passos necessários para criar um aplicativo "Hello World" simples com o Streamlit. (com código)

c.Qual é a finalidade do comando st.write() no Streamlit? Dê um exemplo de uso.

d.Crie um aplicativo Streamlit que exiba uma mensagem personalizada e uma imagem.

%%writefile stream.py import streamlit as st st.write("Este é o TP3 de Visualização de Dados") st.image("imagem1.jpg")

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

Exercício 2: Criação de Visualizações e Interações Básicas

a.Liste três bibliotecas de visualização de dados que podem ser integradas ao Streamlit

Matplotlib, Seaborn, Folium

b.Como você pode criar um gráfico de barras usando a biblioteca Matplotlib em um aplicativo Streamlit? e com a biblioteca seaborn?

Podemos utilizar a função nativa do streamlit st.bar_char(df)

Para exibir um gráfico do seaborn é necessário o transformar em figura conforme trecho de código abaixo:

fig = plt.figure() sns.barplot(df) st.pyplot(fig)

Run to view results

c.Desenvolva um aplicativo Streamlit que exiba um gráfico de pizza simples usando a biblioteca de visualização de sua escolha.

%%writefile stream.py import streamlit as st import matplotlib.pyplot as plt dados=[47,25,14,12] rotulos =['maçã','banana','uva','abacate'] fig = plt.figure() plt.pie(dados, labels = rotulos, autopct='%1.1f%%') plt.show() st.pyplot(fig)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

d.Explique como você pode criar um botão de alternância (st.checkbox()) no Streamlit e forneça um exemplo de uso. a

%%writefile stream.py import streamlit as st if st.checkbox('exibir mensagem'): st.write("Este é o TP3 de Visualização de Dados")

Run to view results

e.Crie um aplicativo Streamlit que permita ao usuário escolher uma cor em um menu suspenso e, em seguida, exiba um retângulo colorido usando essa cor.

%%writefile stream.py import streamlit as st cor = ['azul','rosa','cinza','amarelo'] selecao = st.selectbox('Selecione a cor:', cor) if selecao == 'azul': cor_selec = 'blue' if selecao == 'rosa': cor_selec = 'pink' if selecao == 'cinza': cor_selec = 'gray' if selecao == 'amarelo': cor_selec = 'yellow' st.write(f'<div style="background:{cor_selec}; width:100px; height:100px"></div>', unsafe_allow_html=True)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

Exercício 3: Interface de Coleta e Análise de Dados

a.Como você pode criar uma caixa de entrada de texto para que o usuário insira um número inteiro no Streamlit?

Utilizando a função st.number_input com o parâmetro step=1. O parâmetro step=1 define que somente serão aceitos números inteiros.

b.Crie um aplicativo Streamlit que solicite ao usuário um número e, em seguida, exiba o dobro desse número após um botão ser clicado.

%%writefile stream.py import streamlit as st valor_recebido = st.number_input('Forneça um número:') resultado = 0 if st.button('Clique para calcular o dobro'): resultado = valor_recebido * 2 st.write(f'O dobro é {resultado}')

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

c.Desenvolva um aplicativo Streamlit que permita ao usuário fazer o upload de um arquivo CSV e, em seguida, exiba as primeiras 5 linhas dos dados.

%%writefile stream.py import streamlit as st import pandas as pd arquivo = st.file_uploader('Upload', type='csv') if arquivo is not None: df = pd.read_csv(arquivo) st.write(df.head(5))

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

d.Como você pode criar uma barra lateral no Streamlit? Dê um exemplo de um elemento que você poderia adicionar a essa barra lateral.

Usando a função st.sidebar. Normalmente se usa a barra lateral para se criar menus de navegação entre páginas ou adicionar seletores de filtros.

e.Crie um aplicativo Streamlit de duas páginas: uma página inicial com um botão que leva à segunda página, onde é exibido um gráfico de dispersão simples.

%%writefile ./paginas/main.py import streamlit as st st.header('Página Inicial')

Run to view results

%%writefile ./paginas/pages/pagina_1.py import streamlit as st st.header('Primeira Página')

Run to view results

%%writefile ./paginas/pages/pagina_2.py import streamlit as st import numpy as np import pandas as pd import matplotlib.pyplot as plt st.header('Segunda Página') data = pd.DataFrame(np.random.randn(50,2), columns=['x','y']) fig,ax = plt.subplots() ax.scatter(data['x'],data['y']) ax.set_xlabel('Eixo X') ax.set_label('Eixo Y') st.pyplot(fig)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

Exercício 4: Layouts e Navegação Avançados

a.Explique a diferença entre os layouts de coluna st.columns() e st.beta_columns() no Streamlit.

o st.beta_columns() é a versão mais recente do st.columns() e tem recursos adicionais, pois permite além de separar o grid da página em 3 colunas, ajustar a largura de cada coluna individualmente.

b.Crie um aplicativo Streamlit que use o layout de coluna para exibir uma imagem à esquerda e um texto à direita.

%%writefile stream.py import streamlit as st esquerda, direita = st.columns(2) with esquerda: st.image('imgleft.jpg') with direita: st.image('imgright.jpg')

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

c.Como você pode criar um menu de navegação para alternar entre várias páginas em um aplicativo Streamlit?

Dentro de um mesmo diretório, criar um arquivo app.py, que será a página inicial e uma pasta nomeada como "pages", dentro desta pasta deverão ser colocados os arquivos .py referentes a cada página do aplicativo.

d.Desenvolva um aplicativo Streamlit com um layout de coluna que inclua um gráfico de linhas e um gráfico de barras lado a lado.

%%writefile stream.py import streamlit as st import pandas as pd import matplotlib.pyplot as plt esquerda, direita = st.columns(2) df = pd.DataFrame({'valores':[10,20,30,40]}) with esquerda: st.line_chart(df['valores']) with direita: bar = st.bar_chart(df['valores'])

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

e.Explique o conceito de "fluxo de aplicativo" em um aplicativo Streamlit e dê um exemplo de como você pode controlar o fluxo usando widgets interativos.

o fluxo de aplicativo diz respeito à sequência de ações que se espera do usuário executar ao entrar no aplicativo, como subir um arquivo > filtrar qtd linhas > filtrar alguma categoria > aplicar seleções > visualizar em um gráfico.

%%writefile stream.py import streamlit as st import numpy as np import pandas as pd import matplotlib.pyplot as plt np.random.seed(1) df = pd.DataFrame(np.random.randn(50,2), columns=['x','y']) filtro = st.slider('filtrar range de Y', df['y'].min(),df['y'].max(),(df['y'].min(),df['y'].max())) df_filtrado = df[(df['y'] >= filtro[0]) & (df['y'] <= filtro[1])] fig,ax = plt.subplots() ax.scatter(df_filtrado['x'],df_filtrado['y']) ax.set_xlabel('Eixo X') ax.set_ylabel('Eixo Y') st.pyplot(fig)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

Exercício 5: Dashboards Avançados e Interativos

a.Crie um aplicativo Streamlit com um botão de alternância que alterne entre a exibição de uma tabela e um gráfico de barras.

%%writefile stream.py import streamlit as st import numpy as np import pandas as pd import matplotlib.pyplot as plt np.random.seed(13) df = pd.DataFrame(np.random.randint(0,100, size=(50,2)), columns=['x','y']) if st.checkbox('Exibir como gráfico'): fig,ax = plt.subplots() ax.bar(df['x'],df['y']) ax.set_xlabel('Eixo X') ax.set_ylabel('Eixo Y') st.pyplot(fig) else: st.write(df)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

b.Desenvolva um dashboard interativo que permita ao usuário selecionar um intervalo de datas e, em seguida, exiba um gráfico de linha com base nas datas selecionadas.

%%writefile stream.py import streamlit as st import numpy as np import pandas as pd import matplotlib.pyplot as plt dic={'datas':['2023-01-01', '2023-02-01', '2023-03-01', '2023-04-01', '2023-05-01', '2023-06-01', '2023-07-01', '2023-08-01', '2023-09-01', '2023-10-01', '2023-11-01', '2023-12-01'] ,'valores':[2,9,14,20,28,36,55,60,68,79,84,95]} df = pd.DataFrame(dic) df['datas'] = pd.to_datetime(df['datas']) min_data= df['datas'].min() max_data= df['datas'].max() filtro_start = st.date_input('Data início:', min_data) filtro_end = st.date_input('Data fim:', max_data) filtro_start = pd.Timestamp(filtro_start) filtro_end = pd.Timestamp(filtro_end) df_filtrado = df[(df['datas'] >= filtro_start) & (df['datas'] <= filtro_end)] fig,ax = plt.subplots() ax.plot(df_filtrado['datas'],df_filtrado['valores']) ax.set_xlabel('Datas') ax.set_ylabel('Vendas Acumuladas') st.pyplot(fig)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

c.Como você pode criar um widget de seleção múltipla (st.multiselect()) no Streamlit? Dê um exemplo de uso.

Pode ser utilizado para filtrar categorias, como no exemplo abaixo.

%%writefile stream.py import streamlit as st import matplotlib.pyplot as plt import pandas as pd import seaborn as sns dados=[14,12,24,12,34,22,11,44,35,12,34,54] rotulos =['maçã','banana','uva','abacate','maçã','banana','uva','abacate','maçã','banana','uva','abacate'] meses =['jan','jan','jan','jan','fev','fev','fev','fev','mar','mar','mar','mar'] opcoes = list(set(rotulos)) selecao = st.multiselect('Selecione as frutas', opcoes, opcoes) df = pd.DataFrame({'meses': meses, 'vendas':dados, 'frutas':rotulos}) fig = plt.figure() if 'banana' in selecao: df_filtrado = df[ df['frutas'] == 'banana'] plt.plot(df_filtrado['meses'],df_filtrado['vendas']) if 'maçã' in selecao: df_filtrado = df[ df['frutas'] == 'maçã'] plt.plot(df_filtrado['meses'],df_filtrado['vendas']) if 'uva' in selecao: df_filtrado = df[ df['frutas'] == 'uva'] plt.plot(df_filtrado['meses'],df_filtrado['vendas']) if 'abacate' in selecao: df_filtrado = df[ df['frutas'] == 'abacate'] plt.plot(df_filtrado['meses'],df_filtrado['vendas']) plt.show() st.pyplot(fig)

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

d.Crie um aplicativo Streamlit que permita aos usuários fazerem upload de imagens e exibir as imagens carregadas em uma grade.

%%writefile stream.py import streamlit as st import pandas as pd arquivos = st.file_uploader('Upload', type=['jpg','jpeg','png'], accept_multiple_files=True) col1, col2, col3, col4 = st.columns(4) qtd_imagens = len(arquivos) count=1 for imagem in arquivos: if count == 1: with col1: st.image(imagem, use_column_width=True) elif count == 2: with col2: st.image(imagem, use_column_width=True) elif count == 3: with col3: st.image(imagem, use_column_width=True) elif count == 4: with col4: st.image(imagem, use_column_width=True) count = 0 count+= 1

Run to view results

!streamlit run stream.py --server.port=8080 --browser.serverAddress='0.0.0.0'

Run to view results

e.Projete um dashboard Streamlit que utilize um mapa interativo (por exemplo, Folium) e permita ao usuário selecionar pontos no mapa para exibir informações associadas.

Não consegui realizar este

.css-hdxizt{color:var(--chakra-colors-fg-neutral-primary);font-weight:var(--chakra-fontWeights-bold);letter-spacing:-0.09px;}Exercício 1: Introdução ao Streamlit e Hello World

Exercício 2: Criação de Visualizações e Interações Básicas

Exercício 3: Interface de Coleta e Análise de Dados

Exercício 4: Layouts e Navegação Avançados

Exercício 5: Dashboards Avançados e Interativos

Exercício 1: Introdução ao Streamlit e Hello World