30:Tb62,html`Styles `31:T67d,Animations = html` Animations`32:[] 2e:{"title":"Sphere Surface","cells":[{"id":0,"value":"md`# Sphere Surface`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":236,"value":"VIEW = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":241,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"d3.select(`#${VIEW.id}`).attr('class', controls)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"yStep = 360 / yRounds","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"xStep = 360 / xRounds","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"\ncontainer = d3.select(VIEW).select('.container');","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":749,"value":"getColor = () =>\n turboColorScheme[Math.floor(Math.random() * turboColorScheme.length)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"frontFacing = [\"half\",\"eye\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"el = document.createElement('div');\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"transformProp = support(\n \"transform WebkitTransform MozTransform OTransform msTransform\".split(\" \")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":534,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import { radio, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`## TOUCHES`","pinned":true,"hidden":false,"mode":"ojs"},{"id":953,"value":"mutable four_finger_tickle = [...d3.range(4).map(x => null)]","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}