2e:null 2f:["$","title",null,{"children":"Introdução os Imports | Radamés Ajna | Observable"}] 34:[{"id":"f1f1344c5afd87a7d173bcfc688ba86da5588220c84ca31d62db89d871459beb953cc9b864301a350744e637e9caff4107edebe51f88687fec6bf96903bde65e","href":"https://static.observableusercontent.com/files/f1f1344c5afd87a7d173bcfc688ba86da5588220c84ca31d62db89d871459beb953cc9b864301a350744e637e9caff4107edebe51f88687fec6bf96903bde65e","name":"d3.json","type":"application/octet-stream","lastModified":1598747310350.077,"size":21848}] 32:{"id":"f5b0a64714f080f4","slug":"introducao-os-imports","title":"Introdução os Imports","thumbnail":"30e53bf49d605c15ecada6a58033575b350cd14bb18e00796d405a2c62dfe6e5","access_level":"public","create_time":"$D2020-08-30T00:28:30.350Z","update_time":"$D2020-08-30T06:58:44.058Z","view_time":null,"first_public_time":"$D2020-08-30T07:05:51.044Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":772,"publish_version":772,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4f031a62e4e2db2a","slug":"documentacao-em-portugues","title":"Documentação em Português","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"title":"Introdução os Imports","cells":[{"id":0,"value":"md`# Introdução os Imports\n\nObservable permite que você reutilize códigos importando células nomeadas de outros notebooks.\n\nPara demostrar, veja o notebok sobre escalas de cores usado para visualizar dados quantitativos. Esse notebook define uma função com nome *ramp* que retorna um canvas dada uma função *color*, onde a função *color* retorna a cor para um intervalo ${tex`t \\in [0,1]`} da esquerda para direita. Para criar as cores do clássico arco-íris, importe e chame a função *ramp*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"ramp(t => `hsl(${t * 360}, 100%, 50%)`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`\nVocê poderia ao invés copiar e colar a função *ramp* do notebook original para o seu notebook, já que são apenas algumas linhas de código. Mas importar de outro notebook têm algumas vantagens.\n\nPrimeiro, a célula que você deseja reutilizar pode depender de outras células. Se você copiar e colar, também terá que copiar e colar essas outras células e certificar-se de que elas não estão em conflito com as células existentes em seu notebook. Se você importar, as dependências serão carregadas automaticamente, então você não precisa se preocupar com isso.\n\nPor exemplo, considere um notebook com a projeção de mapa Sinu-Mollweide interrompida, que requer as bibliotecas D3, TopoJSON e a informação da geometria que representa os continentes da Terra. Você pode importar o mapa e exibi-lo sem se preocupar como complicado foi feito.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import {map} from \"@d3/interrupted-sinu-mollweide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`\nEm segundo lugar, ao importar, é mais fácil manter o código reutilizado atualizado. As importações têm como alvo a última versão publicada, portanto, se o autor melhorar o notebook do mapa, o novo mapa aparecerá automaticamente aqui.\n\n(O risco de importar a versão mais recente é que seu notebook pode parar de funcionar se o notebook importado for alterado de uma forma não compatível com uma das versões anteriores. Observable também oferece suporte a importações com versão, entretanto, os números da versões não estão expostos na interface do usuário, então, por enquanto você deve especificar a versão manualmente. No futuro, as importações serão fixadas na última versão publicada no momento em que você escrever a declaração de importação e podem ser fixadas novamente sob demanda.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`\nTerceiro, e mais interessante, as importações no Observable permitem injetar dependências usando import-with! Isso permite que você “reescreva” o código importado, como faria ao copiar e colar, sem problemas de duplicação de código.\n\nConsidere meu notebook do mapa de árvore usando D3 que visualiza o dataset Flare. Para reutilizar esta implementação de mapa de árvore para visualizar um conjunto de dados diferente, injete uma nova definição de *data* na cláusula with na importação:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"import {chart as treemap}\nwith {treemap_data as data}\nfrom \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"treemap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"treemap_data = FileAttachment(\"d3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`\n\nContanto que os novos dados estejam de acordo com a mesma forma dos dados originais (aqui, uma árvore de objetos com as propriedades *children* e *value*), você pode reutilizar o código existente sem copiar e colar ou sem ter que se desafiar a programar uma abstração para um gráfico reutilizável!\n\nO melhor de tudo, porque [Observable é reativo](https://observablehq.com/d/8182d2105b244b22), você pode até mesmo injetar definições dinâmicas em códigos que eram antes estáticos!\n\nPor exemplo, abaixo está um histograma com uma distribuição beta fictícia usando valores ${tex`\\alpha`} e ${tex`\\beta`} controlados por um slider. Sempre que ${tex`\\alpha`} ou ${tex`\\beta`} mudam, o Observable atualiza automaticamente o histograma - mesmo que a implementação esteja reutilizadando um histograma estático da taxas de desemprego.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"import {chart as histogram}\nwith {histogram_data as data}\nfrom \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"viewof alphabeta = {\n const form = html``;\n form.oninput = () => {\n form.value = [form.a.valueAsNumber, form.b.valueAsNumber];\n form.oa.value = form.a.valueAsNumber;\n form.ob.value = form.b.valueAsNumber;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"histogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"histogram_data = new Array(10000).fill().map(() => randb(...alphabeta))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`\nAqui estão alguns detalhes adicionais sobre importações:\n\nComo [ES imports](http://exploringjs.com/es6/ch_modules.html), as importações no Observable são live bindings. Se você importar um valor que muda ao longo do tempo ([uma célula geradora](/@mbostock/generator-cells-functions-and-objects)), por exemplo, uma contagem regressiva para uma determinada data no futuro, o valor importado também mudará com o tempo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {interval} from \"@mbostock/countdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"interval","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`\nVocê só pode importar células nomeadas e você deve nomear cada célula que deseja importar explicitamente. Não são permitidas células anônimas; se um notebook usa side effects, algumas vezes isso acontece com células anônimas, você também deve nomear e importar as células com side effects.\n\nAs células importadas são avaliadas preguiçosamente (lazy evaluation): se você importar uma célula mas não fizer referência a ela em nenhum lugar o código não será executado. Tente descomentar a célula abaixo e pressione Shift-Enter. Note que o gerador *i* começa em zero - ele não se inicia até que seja referenciado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {i} from \"@mbostock/generator-cells-functions-and-objects\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`\n\nTambém como ES imports, apenas as células importadas estão disponíveis (*bound*) no notebook local, mesmo se essas células dependerem de outras células. As células dependentes também são *executadas* e não são expostas no escopo do notebook local\n\nVocê pode usar importações circulares apenas se não usar a cláusula *with* ao importar. Import-with cria efetivamente uma cópia local do módulo importado com suas substituições, portanto, uma importação circular criaria um módulo infinitamente recursivo, algo como ver seu reflexo em uma sala espelhada.\n\nVocê pode importar o mesmo notebook várias vezes e as referências serão resolvidas da mesma maneira. (Note, no entanto, que as versões dos notebooks importados também devem corresponder ou ele serão considerados notebooks diferentes.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"import {map as map2} from \"@d3/interrupted-sinu-mollweide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"map === map2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`\n\nSe você estiver usando muitas importações em seus notebooks, poderá achar o notebook [visualizador de importação](/ @observablehq/notebook-import-visualizer) útil para depuração. Por exemplo, aqui estão as importações usadas por este notebook. *Meta!* `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"graph","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"shared = md`### Importações compartilhadas e privadas\n\nVocê também pode importar notebooks compartilhados (não públicos): `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"import {hello} from \"1b9f514e4db7af3a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"hello","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`\nVocê pode até importar de notebooks privados; no entanto, se você publicar um notebook que importa de um notebook privado, o notebook privado importado não estará acessível para seus leitores, o que pode impedir que seu notebook funcione como desejado. Não se esqueça de compartilhar ou publicar suas importações antes de publicar.\n\nPor último, as importações não têm como objetivo substituir bibliotecas (como [lodash](https://lodash.com) ou [D3](https://d3js.org)); se você deseja projetar, construir e dar suporte a uma biblioteca reutilizável, vá em frente e publique no npm! Mas se você precisa de uma maneira simples e rápida para reutilizar códigos através dos seus notebooks sem recorrer ao copiar e colar, use imports.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"url = \"https://api.observablehq.com/@observablehq/introduction-to-imports.js?v=3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"orient = \"LR\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"import {graphic as graph} with {url, orient} from \"@observablehq/notebook-import-visualizer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"function randb(alpha, beta) {\n const u = randg(alpha);\n return u / (u + randg(beta));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"// Returns a gamma deviate by the method of Marsaglia and Tsang.\nfunction randg(shape) {\n let oalph = shape, a1, a2, u, v, x, mat;\n if (!shape) shape = 1;\n if (shape < 1) shape += 1;\n a1 = shape - 1 / 3;\n a2 = 1 / Math.sqrt(9 * a1);\n do {\n do {\n x = randn();\n v = 1 + a2 * x;\n } while (v <= 0);\n v = v * v * v;\n u = Math.random();\n } while (\n u > 1 - 0.331 * Math.pow(x, 4) &&\n Math.log(u) > 0.5 * x * x + a1 * (1 - v + Math.log(v))\n );\n if (shape === oalph) return a1 * v; // alpha > 1\n do u = Math.random(); while (u === 0); // alpha < 1\n return Math.pow(u, 1 / oalph) * a1 * v;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"// Returns a normal deviate (mu=0, sigma=1).\nfunction randn() {\n let u, v, x, y, q;\n do {\n u = Math.random();\n v = 1.7156 * (Math.random() - 0.5);\n x = u - 0.449871;\n y = Math.abs(v) + 0.386595;\n q = x * x + y * (0.19600 * y - 0.25472 * x);\n } while (q > 0.27597 && (q > 0.27846 || v * v > -4 * Math.log(u) * u * u));\n return v / u;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"