30:T75f,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }31:[] 2e:{"title":"D3 Point on Globe with Input Sliders","cells":[{"id":1,"value":"md`# D3 Point on Globe with Input Sliders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`Quick 'learning by doing' exercise, inspired by a recent tutorial series by [Mila Frerich](https://beta.observablehq.com/@milafrerichs).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`This notebook innovates slightly on Mila's example by using Jeremy's input sliders.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"map = {\n const context = this ? this.getContext(\"2d\") : DOM.context2d(width, width);\n const path = d3.geoPath(projection, context);\n context.clearRect(0, 0, width, width);\n context.beginPath(), path(graticule), context.strokeStyle = \"#ccc\", context.stroke();\n context.beginPath(), path(land), context.fillStyle = '#868', context.fill();\n context.beginPath(), path({type: \"Sphere\"}), context.strokeStyle = \"#333\", context.stroke();\n context.fillStyle = 'orange';\n let circles = point.features;\n circles.forEach(d => {context.beginPath(), path(d); context.fill()});\n path.pointRadius(null);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof longitude = slider({\n min: 0, \n max: 360, \n step: 1, \n value: 0, \n title: \"Longitude\", \n description: \"Slider to control longitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof projection_adjustment = slider({\n min: 0, \n max: 360, \n step: 1, \n value: 320, \n title: \"Projection\", \n description: \"Slider to control projection\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"longitude_orig = -20","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoOrthographic()\n .rotate([longitude, projection_adjustment])\n .translate([width / 2, width / 2])\n .fitExtent([[5, 5], [width - 5, width - 5]], {type: \"Sphere\"})\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"point = ({\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[13.295001983642578,52.49438282599467]}} ]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3-fetch@1\", \"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}