Apresentando seu Jupyter Notebook em slides HTML

Vitor Ferreira Lins
Data Hackers
Published in
4 min readNov 7, 2023
Photo by Ben Kolde on Unsplash

1 Introdução

Quando se trata de um profissional Cientista de Dados, muitas empresas procuram profissionais com a capacidade de apresentar suas ideias e análises. Normalmente, quando começamos a desenvolver análises e modelos (no python), usamos os utilitários notebook/lab da família Jupyter.

A visualização em forma de notebook já é um bom método para expor suas análises de maneira geral, e é compatível com com GitHub, o que quer dizer que você pode fazer o upload para um repositório e exibir o notebook na sua forma de apresentação, acessível para qualquer pessoa com o link para o arquivo e acesso à internet.

Mas esta exibição ainda é bastante técnica e pouco intuitiva, para quem não está acostumado a lidar com dados. No dia-a-dia de Cientista de Dados, a tarefa de apresentar seus insights e análises de maneira simples para entendimento do público geral vai ser bastante recorrente. Para nos ajudar com isso, podemos usar o utilitário nbconvert para criar apresentações elegantes usando o motor do reveal.js.

2 Setup

Para apresentar este utilitário, vou usar de exemplo um mini projeto que eu já tenho pronto no meu GitHub. Vamos começar com os passos anteriores à produção da apresentação:

2.1 Desenvolvimento

Desenvolva uma análise ou solução de dados, você deve responder uma dúvida, ou desenvolver uma solução (exemplo). Este exemplo só expõe uma curiosidade sobre economia, mas de preferência apresente uma resposta ou solução com valor de negócio.

2.2 Conteúdo da apresentação

Com o conjunto de dados tratado, e as visualizações prontas, podemos reciclar o código e os dados que já temos para criar um novo notebook, este vai receber apenas o conteúdo que vai compor a apresentação (exemplo).

Antes de renderizar os slides, temos que configurar as células de nosso notebook para definir uma função para cada uma no processo de renderização, no jupyter lab, nós vamos clicar no símbolo de engrenagem no canto superior direito do editor, e em seguida abrir o menu dropdown que tem o nome “COMMON TOOLS”:

Recorte da interface do Jupyter Lab, mostrando o menu dropdown “COMMON TOOLS”

Os valores de cada propriedade aqui são únicos para cada célula do notebook. Mas a única que interessa para nós é a propriedade “Slide Type”, aqui nós temos 6 opções disponíveis.

  1. -: Apenas acrescenta o valor da célula atual na sequência da célula anterior, ainda no mesmo slide
  2. Slide: O conteúdo desta célula aparece no início de um novo slide, à direita do anterior
  3. Sub-Slide: Adiciona conteúdo abaixo do último Slide, mas em uma tela dedicada, pode ser útil para acrescentar uma informação extra que não é crucial, mas pode sanar a dúvida de de alguém
  4. Fragment: Similar à -, mas o conteúdo em Fragment vai precisar de um clique extra para aparecer
  5. Skip: conteúdo não será exibido no resultado final, mas pode ser executado
  6. Notes: Aparece como notas do apresentador no último Slide ou Sub-Slide criado (o que aparecer por último)

3 Gerando uma apresentação

Depois de ter todas as células configuradas, podemos gerar a apresentação em .html usando o nbconvert, para isto, vamos executar uma linha de comando:

jupyter nbconvert nome_do_notebook.ipynb --to slides --no-input --output nome_da_apresentacao --execute

Neste comando, estamos:

  1. Chamando o utilitário nbconvert do jupyter
  2. Para converter o arquivo “nome_do_notebook.ipynb" em slides (--to slides)
  3. Não queremos mostrar o código, apenas os gráficos e o Markdown (--no-input)
  4. O nome do arquivo gerado (--output) precisa ser nome_da_apresentacao (opcional)
  5. Por fim, queremos que os códigos sejam executados (--execute) durante o render da apresentação, para usar todas as visualizações geradas lá

Saiba que o arquivo vai ser gerado no diretório em que você executa este comando, se este diretório for diferente daquele em que se encontra nome_do_notebook.ipynb, você deve inserir o caminho completo para o arquivo, para não ter que se preocupar com isto, você pode fazer como eu fiz:

3.1 Alternativa mais simples

Em vez de executar pela Command Prompt, Bash ou Power Shell, você também pode adicionar esta linha de código no final do notebook de slides, acrescentando %%capture antes:

%%capture
!jupyter nbconvert nome_do_notebook.ipynb --to slides --no-input --output nome_da_apresentacao

Então eu posso ir em Run > Run All Cells, isto vai garantir que todos os blocos vão ser executados, portanto não precisamos mais de --execute, e como estamos executando direto pelo kernel do jupyter, sabemos que o arquivo .html gerado vai ficar na mesma pasta que o nosso notebook.

4 Publicando online

Como é um simples arquivo .html, temos muitas opções, para mim a mais simples seria incorporá-lo no corpo de um site do Google. Mas existe outra maneira que eu considero um pouco mais profissional que é o GitHub Pages.

Para configurar um repositório para hospedar sua página, basta seguir este passo-a-passo do próprio GitHub. Depois de feito isso, basta subir o arquivo .html para o repositório escolhido. O endereço, vai ter um formato padrão:

https://[seu_username].github.io/[seu_repo]/[sua_apresentacao].html

Existe um caso diferente, no caso da sua apresentação se chamar “index.html”, neste caso, o endereço vai ser:

https://[seu_username].github.io/[seu_repo]/

Eu publiquei o notebook de exemplo no meu GitHub Pages e este foi o resultado. Espero ter ajudado na construção de seu portfólio!

--

--

Vitor Ferreira Lins
Data Hackers

Data Scientist in Brazil, Bachelor's Degree in Economic Sciences. I like to talk about Data Science, Economics, and sometimes, also poetry.