30:T5df,gerasvg = function (meusdados, LAF) { let meusvg = ``; // Devolve o código SVG para ser incluíndo como elemento HTML no documento return meusvg; }31:T5de,```js gerasvg = function (meusdados, LAF) { let meusvg = ``; // Devolve o código SVG para ser incluíndo como elemento HTML no documento return meusvg; } ```32:[] 2e:{"title":"O que são Notebooks?","cells":[{"id":0,"value":"# O que são Notebooks?","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Introdução sobre literate programming no Observable com javascript\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"## Notebooks","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":149,"value":"\n-----\n","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"## Qual a vantagem de usar notebooks?","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":45,"value":"import { resultados } from \"@ranoya/googlesheets-dataviz\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":61,"value":"resultados","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":136,"value":"Inputs.table(resultados)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":55,"value":"html`${gerasvg(resultados)}`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":50,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":123,"value":"viewof variavel = Inputs.range([0, 480], { label: \"Variavel\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`${gerasvg(resultados, variavel)}`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":166,"value":"html`${gerasvg(Novosdados)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"\n------\n","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"## Aplicação e usos","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"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.\n\nElas 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\nNã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.","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"\n----\n","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"Próximo: [Começando no Observable](https://omnicode.vercel.app/docs/?url=https://observablehq.com/embed/@ranoya/javascript0?cell=*)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}