2d:null 2e:["$","title",null,{"children":"O que são Notebooks? | Guilherme Ranoya | Observable"}] 33:T5de,```js gerasvg = function (meusdados, LAF) { let meusvg = ``; // Devolve o código SVG para ser incluíndo como elemento HTML no documento return meusvg; } ```34:T81d,Entendendo que através de notebooks podemos desenvolver soluções de programação divididas em blocos, com explicações claras sobre o que desempenham e processam, fica mais evidente por que estas plataformas possuem grande apreço quando tratamos de contextos científicos e nas ciências de dados. Elas podem ser muito práticas ao longo do desenvolvimento de softwares que processam sinais ou dados, na construção de visualizações, e no desenvolvimento de ferramentas que auxiliam a análise de dados ou informações. Não se tratam de ferramentas do tipo **no-code**, para uso de iniciantes; mas se constituem como instrumentos inovadores e poderosos, principalmente no campo da ciência de dados. Mas talvez a maior facilidade proporcionada pelo Observable é que ele simplificará o carregamento de dados de múltiplas fontes diferentes, o que é essencial para ambas as aplicações citadas. Carregar dados de diversos lugares não é um procedimento trivial, já que estas operações são *assíncronas*, isto é, elas podem demorar dependendo do tempo de resposta de onde as informações estão armazenadas. Verificar se todos os dados já foram carregados antes de iniciar seu processamento é uma tarefa complicada, e a plataforma já resolve toda a cadeia de instruções, verificando quais recursos são dependentes de quais dados, dando início ao processamento assim que suas dependências estiverem resolvidas. Com isso, você não precisa se preocupar em resolver todo este trâmite, e também não precisa se preocupar se seus já estão todos devidamente carregados, ou se sua programação está lidando com informações pela metade. Este aspecto não ficará evidente no início, mas é uma questão que pode ser importante no futuro: não há necessidade de se preocupar se uma função já foi declarada antes de ser usada, assim como não há preocupações se alguma tarefa já foi concluída para que outra possa lidar com seus resultados. Todo este gerenciamento do que vem antes e do que vem depois é feito pelo próprio Observable.35:T14ae,O conceito de programação letrada (*literate programming*) foi criado em 1984 por Donald Knuth, autor do livro de mesmo nome, lançado em 1992. Sua proposição foi de uma forma de programar que fosse mais legível para seres humanos, misturando em uma coisa só as explicações/anotações em "linguagem natural" (linguagem verbal) com o código computacional. De forma mais simples, Knuth inverteu a estrutura do código computacional no qual predominam as instruções para o computador intercaladas por pequenos comentários, para um texto escrito intercalado por algumas instruções para o computador. Ele criou um sistema de programação conhecido como *WEB* que adotava como base a linguagem de programação *Pascal*, frequentemente utilizada no contexto acadêmico da época. O sistema era composto de duas ferramentas, o *Tangle*, capaz de extrair as informações do código que deveriam ser convertidas em Pascal, e o *Weave*, capaz de extrair os textos e anotações do programador, produzindo um documento para ser impresso. É relevante mencionar que grande parte do trabalho de Knuth foi dedicado à tipografia digital, prezando pela qualidade da documentação e dos materiais impressos, principalmente depois de ter sentido a perda desta qualidade na segunda edição do seu livro *The Art of Computer Programming* (1968), que deixou de ser impresso através de tipos móveis em uma máquina Monotype, e passou a ser produzido por fotocomposição. O resultado da nova edição não o agradou, o que o levou a criar o sistema *TeX* em 1976, para gerar documentos impressos de alta qualidade. Este sistema é encontrado hoje na ferramenta *LaTeX*, muito utilizada por cientistas da computação e matemáticos para a escrita de documentos em PDF através de instruções de marcação, facilitando principalmente a escrita de fórmulas e notações matemáticas que os processadores de texto até hoje têm dificuldade em realizar. Seu sistema *WEB* produzia documentações com o *TeX*, diretamente do código fonte escrito com o paradigma da programação letrada. Em pouco tempo também surgiu o *CWEB*, uma versão do *WEB* capaz de gerar códigos na linguagem *C* no lugar do *Pascal*. Contudo, as manifestações mais conhecidas da programação letrada vieram só na década de 2010, com a ferramenta [Jupyter Notebook](https://jupyter.org/) criada entre 2011 e 2014, originalmente para a linguagem *Python*, mas ampliada para lidar também com as linguagens *Julia* e *R*. Da mesma forma que o [Wolfram Mathematica](https://www.wolfram.com/mathematica/) (1998), o Projeto Jupyter adotava o conceito de notebooks de programação para o que seria o código fonte contendo também outros elementos além das instruções. Ambos os sistemas foram revolucionários para a computação científica e a Ciência de Dados, sobretudo por priorizarem as explicações e raciocínios envolvidos no processamento computacional que estavam sendo executados nos notebooks. Tecnicamente, o conceito de notebook é uma forma de interface. Ele foi criado por Theodore Gray na Apple, tentando fazer com que pequenos trechos de código em um editor pudessem ser executados independentemente do resto do código, de forma interativa. Gray acabou migrando para a empresa de Stephen Wolfram, e ainda com ajuda de Steve Jobs, aperfeiçoou este tipo de interface. Com o Wolfram Mathematica, sua tentativa era de mesclar a representação gráfica de expressões, fórmulas e estruturas matemáticas complexas, com seu próprio cálculo. Assim como processadores de texto em modo gráfico já eram capazes de exibir com fidelidade na tela o resultado final impresso (lembrando que os processadores originais como o Wordstar, e as primeiras versões do Word e do WordPerfect, em modo texto, não faziam isso), buscava-se tornar possível que planilhas eletrônicas de cálculo pudessem apresentar, igualmente, as equações e fórmulas de maneira como eram escritas na notação matemática, e claro, operarem os cálculos ali descritos. Este conceito costumava ser referenciado como *WYSIWYG* (*What You See Is What You Get*), e constituiu a premissa para o que deveria ser um novo formato para a escrita do código computacional: um documento gráfico, verbalizado, mais próximo da forma como escrevemos, em que as instruções envolvidas pudessem ser executadas e processadas. Os notebooks e a programação letrada casaram perfeitamente, dando luz as plataformas atuais onde este paradigma é utilizado. A plataforma que utilizamos para este livro é a do [Observable](https://www.observablehq.com), que adota a linguagem *javascript* em conjunto com uma documentação escrita através das linguagens de marcação *HTML* e *markdown*, mas que também podem ser subprodutos da própria programação, e não apenas uma forma de documentação. Diferentemente do Jupyter, os documentos do [Observable](https://www.observablehq.com) permanecem online, hospedados todos na própria plataforma. Isto permite que sejam totalmente intercambiáveis, e que um notebook possa usufruir de recursos, dados ou funções construídos em outro notebook, isto é, uma plataforma que também usufrui do que há de mais atual para a programação na computação na nuvem (*cloud computing*).36:[] 31:{"id":"88edeac1fc5f9d7b","slug":"livroobservable-1","title":"O que são Notebooks?","thumbnail":"b4f1caa0b7978d68b23fc8bab876feff6c863c0d9448381a91e9dbe195396d66","access_level":"public","create_time":"$D2024-05-21T14:23:54.833Z","update_time":"$D2025-01-16T21:08:58.815Z","view_time":null,"first_public_time":"$D2024-05-21T14:23:54.833Z","has_unpublished_edits":null,"fork":{"id":"0218a43ebfda0b4c","slug":"oquesaonotebooks","title":"O que são Notebooks?","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":261,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"O que são Notebooks?","cells":[{"id":0,"value":"# O que são Notebooks?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Introdução sobre a plataforma de *literate programming* Observable\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"## Notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Notebooks são um \"novo\" paradigma de programação. Eles são ambientes de desenvolvimento de software, mas ao contrário dos ambientes tradicionais onde apenas códigos de programação são escritos e salvos na forma de arquivos, os Notebooks são documentos escritos, online, onde estarão presentes explicações, discussões, exemplos, **e também código computacional** sendo executado no mesmo local.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"Este tipo de paradigma passa a ser interessante por que além de documentar e possibilitar o entendimento de processos utilizados em um programa, também é possível fazer experimentos com pedaços do código computacional, testes com seus recursos, simulações, além de ser possível enxergar de forma estruturada os dados utilizados.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Textos podem ser escritos utilizando a linguagem de marcação **markdown**, uma versão simplificada do **html**; mas também é possível utilizar o próprio **html**. Por este motivo, é possível inserir qualquer tipo de elemento ao longo do documento, tais como vídeos...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"... [links para outros sites ou documentos](https://www.youtube.com/watch?v=GeZyR3ZlXXI), textos em **negrito**, *oblíquo*, ou mesmo em outras cores. Também é possível incluir tabelas...\n\n| Nome | Ano | Discplina | Aprovado |\n|------|-----|----------|\n| Guilherme | Linguagens de Marcação | 1996 | Sim |\n| Rogério | Linguagens de Marcação | 1996 | Sim |\n| João | Linguagens de Marcação | 1998 | Não |\n\n... imagens ...\n\n

\n\n... E quaisquer tipos de componentes e elementos que possam ser colocados em websites, blogs, ou documentos **html**.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"O [Observable](https://www.observablehq.com) é apenas uma das plataformas de programação letrada (notebooks). Ele utiliza a linguagem de programação **javascript** como base, diferente de outros notebooks mais antigos como o [Jupyter Notebooks](https://jupyter.org/) e o [Google Colab](https://colab.google/) que utilizam a linguagem **python**. Por adotarem linguagens de programação muito utilizadas nas Ciências de Dados, estes ambientes acabaram sendo associados à contextos científicos e ao ensino de programação.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Qual a vantagem de usar notebooks?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"Até aqui, os notebooks não parecem em nada diferentes de um documento de texto capaz de exibir vídeos ou imagens. A vantagem é que se tratam de ambientes onde **códigos de programação** podem ser construídos e executados. Por exemplo, o código abaixo captura dados disponíveis em um outro notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"```js\nimport { resultados } from \"@ranoya/googlesheets-dataviz\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"import { resultados } from \"@ranoya/googlesheets-dataviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"Este código efetivamente está sendo executado e acessando dados. Podemos enxergá-los através da própria plataforma para nos certificar que estão corretos. Um ambiente convencional de desenvolvimento não nos permitira fazer isso sem um **debug** dos valores passando por alguma variável, mas em uma plataforma de programação letrada, é possível fazer com que estes dados façam parte do próprio texto sendo escrito. Por exemplo, sabemos que na **${resultados[2].Nome}**, o valor final é **${resultados[2].Final}**.\n\nAqui estão os dados completos na forma de uma **array em javascript** (uma estrutura de dados):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"resultados","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"Eles poderiam ser vistos também em forma de uma tabela (o Observable possui esses componentes prontos para facilitar nossa vida):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"Inputs.table(resultados)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Podemos construir um código capaz de gerar representações visuais (uma visualização gráfica) em tempo real destes dados, e rodar este código aqui mesmo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"html`${gerasvg(resultados)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Para que isso seja feito, é necessário elaborar um **código javascript** que processe os dados e construa a imagem/representação. O código para produzi-la é este aqui:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"Por mais que existam recursos e componentes prontos para serem usados em um notebook, é evidente que sua plena utilização não pode ser separada da necessidade de saber programar. Como se trata realmente de um ambiente de programação, saber programar passa a ser uma exigência mínima para se trabalhar nestas plataformas.\n\nAlém do próprio código ficar documentado e visível para que se entenda o que ele faz, e como (**o que para o contexto científico e/ou educacional é algo sempre muito bem vindo**), podemos testá-lo com outros dados, ou até com variáveis. Para isso vamos incluir uma variável que pode ser modificada por você na execução do código: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"viewof variavel = Inputs.range([0, 480], { label: \"Variavel\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html`${gerasvg(resultados, variavel)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"Durante o processo de desenvolvimento do código capaz de gerar a representação visual, talvez tenha sido necessário fazer alguns testes para verificar seu funcionamento. Estes teste podem ficar documentados no próprio documento, como prova de conceito ou como exemplos de uso daquilo que foi criado.\n\nVamos declarar aqui uma nova **array em javascript** com outros dados, para verificar se o programa se comporta bem:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"Novosdados = [\n { Nome: \"Teste A\", Inicial: 0, Final: 480 },\n { Nome: \"Teste B\", Inicial: 240, Final: 480 },\n { Nome: \"Teste C\", Inicial: 0, Final: 240 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"E abaixo faremos um experimento com nosso código de representação utilizando os dados de teste:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"html`${gerasvg(Novosdados)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"\n------\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"## Aplicação e usos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"## Origens da programação letrada","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"import { gerasvg } from \"@ranoya/livroobservable-funcoes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"