2d:null 2e:["$","title",null,{"children":"D3 Point on Globe with Input Sliders | Aaron Kyle Dennis | Observable"}] 33: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; }34:[] 31:{"id":"15f99abfc18fb62c","slug":"d3-point-on-globe","title":"D3 Point on Globe with Input Sliders","thumbnail":"31a54edbd6b04e279f3f17bf36f00ad8b2ae174ee423fe15adde58ea881688e8","access_level":"public","create_time":"$D2018-11-20T00:56:21.785Z","update_time":"$D2018-11-20T21:39:14.658Z","view_time":null,"first_public_time":"$D2018-11-20T01:05:23.987Z","has_unpublished_edits":null,"fork":{"id":"6c70834ebb5d0bb8","slug":"d3-where-i-come-from/2","title":"D3 Where I come from","owner":{"id":"079ea4d30f896e6d","login":"milafrerichs","name":"Mila Frerichs"}},"stars":4,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":182,"publish_version":182,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"63becdb427ae4c93","slug":"learning-by-doing","title":"Learning By Doing","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`This notebook innovates slightly on Mila's example by using Jeremy's input sliders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"longitude_orig = -20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"point = ({\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[13.295001983642578,52.49438282599467]}} ]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-fetch@1\", \"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"