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:[] 2f:{"title":"Introduction to Views","cells":[{"id":0,"value":"md`# Introduction to Views\n\nIn Observable, a *view* is a user interface element that directly controls a *value* in the notebook. A view consists of two parts:\n\n* The *view*, which is typically an interactive DOM element.\n* The *value*, which is any JavaScript value.\n\nFor example, a view could be an HTML range input whose value is a number:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"domOnly = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"domOnly","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"slider_value = md `## slider + value`","pinned":true,"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":"textInput_value = md`A view could be a text input whose value is a string:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof message = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"message","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"dropdown_menu_value = md`A view could be a dropdown menu to choose from a set of options:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof color = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"color","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"map_point_value = md`But views **aren’t limited to built-in HTML input types**! A view can have **any visual representation you desire, and any value**, too. For example, a view could be a map that lets you specify any point on Earth:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"point","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"drawing_value = md`A view could be a blank canvas for the user to draw a squiggle:`","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":"structure_viewof = md`**If there is some value that you would like the user to control in your notebook, then usually the right way to represent that value is as a view.** By defining your interactive values using views, you don’t need to manage event listeners and mutable state—you can simply refer to dynamic values, and whenever these values change (for whatever reason), your code will be re-evaluated by the runtime. For example, you have chosen ${color} as your color in the menu above; change it and watch this cell update.\n\n**A view’s value is exposed as *element*.value**. For example, here I’ll define a static view (one whose value never changes), for the purposes of illustration:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof silly = {\n const element = html`

I am a silly view!

`;\n element.value = \"I am a silly value.\";\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"silly","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`The \\`viewof\\` operator is just shorthand for defining the view and its value in the same cell. You can define them as separate cells if you prefer:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"explicitView = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"explicitValue = Generators.input(explicitView)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"how_viewof_work = md`To trigger the re-evaluation of any cell that references a view’s value, the view must emit an *input* event. For example, here’s another silly view that counts how many times you click on it:`","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.dispatchEvent(new CustomEvent(\"input\"));\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`As you might have guessed, the reason that HTML input elements work by default as views is that **these elements have a value property and they emit *input* events when you interact with them**. (There is a little extra logic for dealing with idiosyncrasies; see the [Generators.input](https://github.com/observablehq/stdlib/blob/master/src/generators/input.js) source for details. And **a view doesn’t need to be a DOM element; it only needs to support the [EventTarget interface](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)**. For an example of a non-element view, see the [Synchronized Views](/@mbostock/synchronized-views) notebook.)\n\n**Next time you find yourself reaching for an event listener or mutating global state, try a view instead**. Now you’re thinking with dataflow.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---\n\n## Further Reading\n\n[Introduction to Generators](/@observablehq/introduction-to-generators)\n
[A Brief Introduction to Viewof](/@observablehq/a-brief-introduction-to-viewof)\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 = d3.json(await require.resolve(\"world-atlas@1/world/50m.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-fetch@1\", \"d3-geo@1\", \"d3-shape@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"stylesheet","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"import { stylesheet } from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}