28:null 29:["$","title",null,{"children":"Sphere Surface | Ajay | Observable"}] 2e:Tb62,html`Styles `2f:T67d,Animations = html` Animations`30:[] 2c:{"id":"31a6c165816ae4a8","slug":"sphere-surface","title":"Sphere Surface","thumbnail":"699894704979598e76f3d1532d60a61c0366161c83cb970402409b4a27afb18a","access_level":"public","create_time":"$D2020-01-26T21:50:06.133Z","update_time":"$D2022-01-23T04:38:22.903Z","view_time":null,"first_public_time":"$D2020-01-27T18:13:15.484Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c4502285a4e37a76","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/849d25192620761ccd4197b7433f5fb9328fa64b2eae6f2efeda3ec38d44931b","tier":"starter_2024"},"version":1170,"publish_version":1170,"role":null,"authored":false,"authors":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null}],"members":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"19c3ddd2e97a30bd","slug":"ajay-works","title":".","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"type":"notebook","body":{"title":"Sphere Surface","cells":[{"id":0,"value":"md`# Sphere Surface`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof controls = radio({\n title: 'Select View',\n description: 'Please select your preferred visualization mode',\n options: [\n { label: 'Normal', value: \"normal\" },\n { label: 'Square', value: \"square\" },\n { label: 'Eye', value: \"eye\" },\n { label: 'Half', value: \"half\" },\n { label: 'Single', value: \"single\" },\n { label: 'Contact', value: \"contact\" },\n { label: 'Kaleidoscope', value: \"kaleidoscope\" }\n ],\n value: 'normal'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof xRounds = slider({\n title: \"Longitudes\",\n description: \"how many lines of longitude(degrees)?\",\n min: 1,\n max: 15,\n value: 1,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof yRounds = slider({\n title: \"Latitudes\",\n description: \"how many circles in a ring around the sphere\",\n min: 1,\n max: 47,\n value: 24,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"VIEW = html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof zTranslate = slider({\n min: 10,\n max: 400,\n value: 186,\n step: 1,\n title: \"size\",\n description: \"size of the sphere (radius)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"viewof viewportY = this ||\n Scrubber(\n frontFacing.includes(controls) ? d3.range(180, 360) : d3.range(-360, 360),\n {\n autoplay: true,\n loop: true,\n alternate: true\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"viewof viewportX = Scrubber(d3.range(0, 360), {\n autoplay: true,\n loop: true,\n alternate: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"d3\n .select(VIEW)\n .select(`.container`)\n .style('transform', `rotateX(${viewportX}deg) rotateY(${viewportY}deg)`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"d3.select(`#${VIEW.id}`).attr('class', controls)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"yStep = 360 / yRounds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"xStep = 360 / xRounds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"\ncontainer = d3.select(VIEW).select('.container');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"\nul = container\n .selectAll('ul')\n .data(d3.range(xRounds))\n .join('ul')\n .style(transformProp, (d, i) => `rotateX(${xStep * i}deg)`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"\nli = ul\n .selectAll(`li`)\n .data(d3.range(yRounds))\n .join('li')\n .style(\n transformProp,\n (d, j) => `rotateY(${yStep * j}deg) translateZ(${zTranslate}px)`\n )\n .style('background', getColor);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"getColor = () =>\n turboColorScheme[Math.floor(Math.random() * turboColorScheme.length)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"frontFacing = [\"half\",\"eye\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"el = document.createElement('div');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"transformProp = support(\n \"transform WebkitTransform MozTransform OTransform msTransform\".split(\" \")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function support(props) {\n for (var i = 0, l = props.length; i < l; i++) {\n if (typeof el.style[props[i]] !== \"undefined\") {\n return props[i];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"import { radio, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`## TOUCHES`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"mutable four_finger_tickle = [...d3.range(4).map(x => null)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"SVG = d3\n .select(DOM.svg(width, 400))\n .style('border', 'double black 3px')\n .on('touchmove', function() {\n d3.event.preventDefault();\n\n mutable four_finger_tickle = d3.touches(this);\n d3.select(this)\n .selectAll('.touch')\n .data(d3.touches(this))\n .join('circle')\n .attr('class', 'touch')\n .attr(\"r\", 10)\n .attr('cx', d => d[0])\n .attr('cy', d => d[1]);\n })\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"