31:T500,viewof point = { const height = width / 2; const context = DOM.context2d(width, height); const projection = d3.geoEqualEarth().fitSize([width, height], {type: "Sphere"}); const path = d3.geoPath(projection, context); let mousedown = false; context.beginPath(), path(graticule), context.strokeStyle = "#ccc", context.stroke(); context.beginPath(), path(land), context.fill(); context.beginPath(), path(sphere), context.strokeStyle = "#000", context.stroke(); context.lineWidth = 2, context.strokeStyle = "#f00"; const image = context.getImageData(0, 0, context.canvas.width, context.canvas.height); function render(coordinates) { context.canvas.value = coordinates; context.clearRect(0, 0, width, height); context.putImageData(image, 0, 0); context.beginPath(), path({type: "Point", coordinates}), context.stroke(); } context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = ({layerX, layerY}) => { if (!mousedown) return; render(projection.invert([layerX, layerY])); context.canvas.dispatchEvent(new CustomEvent("input")); }; context.canvas.onmouseup = event => { mousedown = false; }; render([0, 0]); return context.canvas; }32:Tb58,viewof stroke = { const height = 280; const context = DOM.context2d(width, height); const curve = d3.curveBasis(context); const canvas = context.canvas; let stroke = [[102,211],[103,210],[108,200],[120,187],[142,154],[159,121],[173,90],[185,66],[192,52],[197,41],[199,35],[199,33],[199,32],[199,31],[199,31],[199,30],[199,31],[195,39],[187,53],[177,75],[166,103],[155,129],[147,144],[135,171],[132,178],[124,194],[120,203],[118,208],[116,213],[115,216],[114,218],[114,219],[113,220],[113,218],[114,214],[122,203],[134,185],[141,175],[148,168],[154,161],[159,157],[163,155],[167,153],[169,153],[171,153],[172,153],[173,155],[173,162],[173,171],[173,181],[173,193],[173,204],[173,210],[173,215],[174,218],[176,220],[178,221],[179,221],[183,222],[189,222],[197,216],[209,205],[222,188],[230,174],[235,164],[238,157],[239,152],[239,149],[238,148],[235,148],[230,148],[225,149],[221,153],[218,159],[216,165],[216,172],[216,180],[218,188],[224,196],[230,203],[236,206],[246,209],[253,209],[259,206],[265,199],[271,190],[280,174],[283,168],[287,159],[289,155],[290,151],[293,145],[296,139],[303,128],[310,113],[315,100],[320,86],[320,79],[321,70],[319,67],[312,66],[303,66],[291,74],[282,86],[273,102],[267,121],[262,141],[260,162],[260,176],[260,195],[263,210],[269,220],[275,225],[282,227],[288,226],[299,216],[311,192],[317,172],[328,139],[334,117],[341,92],[345,72],[347,65],[348,55],[349,50],[349,48],[347,47],[344,47],[340,51],[332,62],[327,72],[319,90],[314,109],[310,129],[308,152],[308,169],[308,188],[309,205],[314,218],[319,226],[326,231],[331,232],[337,232],[341,228],[345,223],[348,217],[351,211],[355,205],[357,201],[360,195],[361,192],[361,187],[362,182],[362,180],[362,178],[362,177],[362,176],[362,175],[361,175],[359,174],[358,174],[356,174],[355,174],[353,174],[352,175],[351,176],[349,180],[348,185],[347,190],[347,197],[347,203],[349,206],[353,208],[358,209],[362,209],[366,204],[368,197],[370,189],[370,181],[370,176],[370,171],[369,167],[368,164],[367,162],[366,162],[365,162],[365,162],[365,162],[366,162],[371,162],[379,162],[389,162],[399,161],[413,154],[421,146],[425,142]]; context.beginPath(); curve.lineStart(); for (const p of stroke) curve.point(...p); curve.lineEnd(); context.stroke(); canvas.value = stroke; stroke = null; canvas.ontouchstart = canvas.onmousedown = event => { stroke = canvas.value = []; canvas.onmousemove(event); }; canvas.ontouchend = canvas.onmouseup = () => { stroke = null; }; canvas.ontouchmove = canvas.onmousemove = event => { if (stroke === null) return; event.preventDefault(); stroke.push([event.layerX, event.layerY]); context.clearRect(0, 0, width, height); context.beginPath(); curve.lineStart(); for (const p of stroke) curve.point(...p); curve.lineEnd(); context.stroke(); canvas.dispatchEvent(new CustomEvent("input")); }; return canvas; }33:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1599107463959.458,"size":545534}] 2f:{"title":"Introdução aos Views","cells":[{"id":0,"value":"md`# Introdução aos Views\n\n\nNo Observable, *view* é um elemento com interface ao usuário que controla diretamente um *value* no notebook. Um view consiste em duas partes:\n\n* Um *view* é normalmente um elemento DOM interativo.\n* Um *value* é qualquer valor JavaScript.\n\nPor exemplo, uma visualização pode ser um range input HTML cujo valor é um número:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof x = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`Um view pode ser um text input cujo valor é uma string:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof menssagem = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"menssagem","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"md` Um view pode ser um menu dropdown com conjuto de opções para seleção `","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof cor = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\nViews não estão somente limitados a elemetos HTML! Um view pode ter qualquer representação visual que você desejar e qualquer valor. Por exemplo, um view pode ser um mapa que permite que você específique qualquer ponto na Terra:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"point","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`Um view pode ser uma canvas em branco para um usuário desenhar um rabisco:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"stroke","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`\nCaso você queira que o usuário controle um valor que em seu notebooke, represente esse valor como um view. Ao fazer isso, você não precisará gerenciar event listeners e estados mutáveis (mutable state)- você pode simplesmente referir-se ao value e sempre que o usuário alterá-lo seu código será executado automaticamente. Por exemplo, você escolheu a cor ${cor} como sua cor no menu acima; altere-a e observe a atualização da célula.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`\nO valor de um view é exposto com *elemento*.value. Por exemplo, aqui definirei um view estático (cujo valor nunca muda) para exemplo ilustrativo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof silly = {\n const element = html`

Um view exemplo simples

`;\n element.value = \"Eu sou um valor attribuído ao elemento.\";\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"silly","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`O operador \\`viewof\\` é um atalho para definir o view e seu valor na mesma célula. Você pode defini-los em células separadas se preferir: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewExplicito = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"valorExplicito = Generators.input(viewExplicito)","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`\nAssim como você pode fazer referência a *viewExplicito* de outra célula, você também pode fazer referência ao view definido por viewof de outra célula. Por exemplo, o view *x* definido na acima no notebook é um range input:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"viewof x.type","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`\nPara acionar a reavaliação de quaisquer células que fazem referência ao valor de um view, ele deve emitir um evento (CustomEvent) *input*. Aqui está outro view simples que conta cliques como exemplo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof count = {\n const element = html`

🤪

`;\n element.value = 0;\n element.onclick = () => {\n ++element.value;\n element.style.transition = \"none\";\n element.style.transform = `scale(1.5) rotate(${Math.random() * 90 -\n 45}deg)`;\n element.dispatchEvent(new CustomEvent(\"input\"));\n requestAnimationFrame(() => {\n element.style.transition = \"transform 250ms ease\";\n element.style.transform = \"inherit\";\n });\n };\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"count","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`\nComo você deve ter adivinhado, o motivo pelo qual os elementos de input HTML funcionam por padrão como views, é que eles têm uma propriedade value e emitem eventos *input* quando você interage com eles. (Há uma pequena lógica extra para lidar com idiossincrasias; veja mais detalhes em [Generators.input](https://github.com/observablehq/stdlib/blob/master/src/generators/input.js). Um view não precisa ser um elemento DOM; ele só precisa suportar a [interface EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget). Para um exemplo de um view sem elemento, consulte o notebook [Views sincronizadas](/@mbostock/synchronized-views).)\n\nDa próxima vez que você estiver precisando de um event listener ou um estado global dinâmico (mutating global state), tente usar um view. Agora você está pensando com dataflow.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---\n\n## Leitura Adicional\n\n[Introduction to Generators](/@observablehq/introduction-to-generators)\n
[Synchronized Views](/@mbostock/synchronized-views)\n
[Views are Mutable Values](/@mbostock/views-are-mutable-values)\n
[Mutating Views](/@mbostock/mutating-views)\n
[Multi-Value Inputs](/@mbostock/multi-value-inputs)\n
[Wait Until Button](/@mbostock/wait-until-button)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3-geo@1\", \"d3-shape@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}