30:T13d4,SpherePaths = { let dim = 400; let view = html` `; yield view; return d3 .select('.sphereSVG') .selectAll('path') .style('opacity', 0.3) .attr('fill', 'url(#sphereGradient)'); }31:T5e7,HtmlStyles = { let styles = html`

HtmlStyles

`; yield styles; // //animation snippet // -webkit-animation-iteration-count: infinite; // -webkit-animation-name: roll; // -webkit-animation-duration: 2s; // -webkit-animation-timing-function: linear; // -webkit-animation-direction: alternate; // //transform snippet // -webkit-transform: rotateY(${rotateY}deg) rotateX(${rotateX}deg) rotateZ(${rotateZ}deg); }32:Td15,turboColorScheme = [ "#23171b", "#271a28", "#2b1c33", "#2f1e3f", "#32204a", "#362354", "#39255f", "#3b2768", "#3e2a72", "#402c7b", "#422f83", "#44318b", "#453493", "#46369b", "#4839a2", "#493ca8", "#493eaf", "#4a41b5", "#4a44bb", "#4b46c0", "#4b49c5", "#4b4cca", "#4b4ecf", "#4b51d3", "#4a54d7", "#4a56db", "#4959de", "#495ce2", "#485fe5", "#4761e7", "#4664ea", "#4567ec", "#446aee", "#446df0", "#426ff2", "#4172f3", "#4075f5", "#3f78f6", "#3e7af7", "#3d7df7", "#3c80f8", "#3a83f9", "#3985f9", "#3888f9", "#378bf9", "#368df9", "#3590f8", "#3393f8", "#3295f7", "#3198f7", "#309bf6", "#2f9df5", "#2ea0f4", "#2da2f3", "#2ca5f1", "#2ba7f0", "#2aaaef", "#2aaced", "#29afec", "#28b1ea", "#28b4e8", "#27b6e6", "#27b8e5", "#26bbe3", "#26bde1", "#26bfdf", "#25c1dc", "#25c3da", "#25c6d8", "#25c8d6", "#25cad3", "#25ccd1", "#25cecf", "#26d0cc", "#26d2ca", "#26d4c8", "#27d6c5", "#27d8c3", "#28d9c0", "#29dbbe", "#29ddbb", "#2adfb8", "#2be0b6", "#2ce2b3", "#2de3b1", "#2ee5ae", "#30e6ac", "#31e8a9", "#32e9a6", "#34eba4", "#35eca1", "#37ed9f", "#39ef9c", "#3af09a", "#3cf197", "#3ef295", "#40f392", "#42f490", "#44f58d", "#46f68b", "#48f788", "#4af786", "#4df884", "#4ff981", "#51fa7f", "#54fa7d", "#56fb7a", "#59fb78", "#5cfc76", "#5efc74", "#61fd71", "#64fd6f", "#66fd6d", "#69fd6b", "#6cfd69", "#6ffe67", "#72fe65", "#75fe63", "#78fe61", "#7bfe5f", "#7efd5d", "#81fd5c", "#84fd5a", "#87fd58", "#8afc56", "#8dfc55", "#90fb53", "#93fb51", "#96fa50", "#99fa4e", "#9cf94d", "#9ff84b", "#a2f84a", "#a6f748", "#a9f647", "#acf546", "#aff444", "#b2f343", "#b5f242", "#b8f141", "#bbf03f", "#beef3e", "#c1ed3d", "#c3ec3c", "#c6eb3b", "#c9e93a", "#cce839", "#cfe738", "#d1e537", "#d4e336", "#d7e235", "#d9e034", "#dcdf33", "#dedd32", "#e0db32", "#e3d931", "#e5d730", "#e7d52f", "#e9d42f", "#ecd22e", "#eed02d", "#f0ce2c", "#f1cb2c", "#f3c92b", "#f5c72b", "#f7c52a", "#f8c329", "#fac029", "#fbbe28", "#fdbc28", "#feb927", "#ffb727", "#ffb526", "#ffb226", "#ffb025", "#ffad25", "#ffab24", "#ffa824", "#ffa623", "#ffa323", "#ffa022", "#ff9e22", "#ff9b21", "#ff9921", "#ff9621", "#ff9320", "#ff9020", "#ff8e1f", "#ff8b1f", "#ff881e", "#ff851e", "#ff831d", "#ff801d", "#ff7d1d", "#ff7a1c", "#ff781c", "#ff751b", "#ff721b", "#ff6f1a", "#fd6c1a", "#fc6a19", "#fa6719", "#f96418", "#f76118", "#f65f18", "#f45c17", "#f25916", "#f05716", "#ee5415", "#ec5115", "#ea4f14", "#e84c14", "#e64913", "#e44713", "#e24412", "#df4212", "#dd3f11", "#da3d10", "#d83a10", "#d5380f", "#d3360f", "#d0330e", "#ce310d", "#cb2f0d", "#c92d0c", "#c62a0b", "#c3280b", "#c1260a", "#be2409", "#bb2309", "#b92108", "#b61f07", "#b41d07", "#b11b06", "#af1a05", "#ac1805", "#aa1704", "#a81604", "#a51403", "#a31302", "#a11202", "#9f1101", "#9d1000", "#9b0f00", "#9a0e00", "#980e00", "#960d00", "#950c00", "#940c00", "#930c00", "#920c00", "#910b00", "#910c00", "#900c00", "#900c00", "#900c00" ]33:[] 2e:{"title":"Sliced Sphere","cells":[{"id":0,"value":"md`# Sliced Sphere\n\n## \\`The Concept\\`\nImagine a ball. \n\nAny plane through its center will have an area of PI * r²\n\nLets take a center with radius 200px\n\nLets draw a circle 100px away from the center but parallel to this center circle. The cross section at that point will have an dia of ~___px;\n\nThe cross section at 196px away will have a dia of ~___px;\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"//scratch","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"Math.PI * Math.pow(200 - 196, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"//the dim of the circle at 100px from center is ~346px\nheight - Math.tan(100 / 200) * 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"(200 - 50) * (200 - 50) * Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1482,"value":"Math.sqrt(400 * 400 - Math.PI * (100 * 100))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1521,"value":"largestArea = Math.PI * 200 * 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1487,"value":"Math.sqrt(Math.PI * 200 * 200 - Math.PI * (50 * 50))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1577,"value":"Math.sqrt((200 - 100) * (200 - 100)) * Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":"tau = Math.PI * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1558,"value":"Math.sqrt(Math.PI * 200 * 200 - Math.PI * (196 * 196))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2106,"value":"//end workspace","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"md`---\n## Approach 1: SVG with Defined Paths\n\nSimple and easy.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"PathsSelection = d3\n .selectAll('svg path')\n .attr('stroke', 'black')\n .attr('stroke-width', '5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"md`---\n## APPROACH 2: HTML DIVs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"HtmlView = html`\n

\n${Circles}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof rotateX = slider({\n min: -179,\n max: 179,\n value: 26,\n step: 1,\n title: \"ROTATE-X(deg)\",\n description: 'slider that makes the ball tilt'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"Circles = data20.map(d => {\n return `

\n ${d.className}\n

`;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`---\n## APPROACH 2: Multi SVGs\n\nAfter spending many days and trying different ways, I wasn't able to do it in a single SVG.\n\nBut if we take multiple SVGs and then translate them all the same way that we did for the divs in the last section, we end up with something like this ....\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"SvgView = {\n let view = html`\n

\n${CirclesSVG}\n

`;\n\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"SvgStyles = html`SvgStyles`\n\n// ${data20\n// .map(d => {\n// return `svg .circle .${d.className}{\n// width: ${height - d.translateZ * 2}px;\n// height: ${height - d.translateZ * 2}px;\n// -webkit-transform: rotateX(${rotateX + 90}deg) translateZ(${\n// d.translateZ\n// }px);\n\n// }`;\n// })\n// .join('')}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2114,"value":"CirclesSVG = data50s.map(d => {\n return html``;\n})\n\n// fill=${\n// turboColorScheme[Math.floor(colorSampleIndex())]\n//}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"md`One benefit of having svg circles is that they can be created very interactively through strokes and dashes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"//Incomplete, here onwards...","pinned":true,"hidden":false,"mode":"ojs"},{"id":2111,"value":"md`---\n\n## Approach 3 - Interpolation of Circles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1647,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1632,"value":"topCircleInterpolation(0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"topCircleInterpolation(0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"{\n let svgRef = DOM.svg(width, height);\n\n let svg = d3\n .select(svgRef)\n .selectAll('circle')\n .data(data20)\n .join('circle')\n .attr('cx', 200)\n .attr('fill', 'black')\n .attr('cy', 200)\n .attr('r', (d, i) => topCircleInterpolation(i / data20.length));\n\n return svgRef;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1665,"value":"interpolatedCircles = d3\n .ticks(0, 1, 4)\n .map((d, i) => topCircleInterpolation(i / 5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1828,"value":"d3.ticks(0, -1, 4).map((d, i) => BottomCircleInterpolation(i / 5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1853,"value":"topCircleInterpolation = d3.interpolateString(\n ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"BottomCircleInterpolation = d3.interpolateString(\n ``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1056,"value":"// CirclesSVG = data20.map(d => {\n// let height = 400;\n// let width = 400;\n// let r = d.translateZ;\n// let side = r * Math.tan(r / 200);\n// //Math.sin(r / 200) * 200\n// return html``;\n// })\n// // fill=${\n// // turboColorScheme[Math.floor(colorSampleIndex())]\n// //}","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"viewof ColorMode = radio({\n options: [\n { label: 'Colorful', value: 'Colorful' },\n { label: 'Black', value: 'Black' }\n ],\n value: 'Colorful'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`## EventHandlers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"ActivateColorfulMode = {\n ColorMode;\n if (ColorMode === 'Colorful') {\n SVGpaths.each(function() {\n d3.select(this).attr(\n 'fill',\n turboColorScheme[Math.floor(colorSampleIndex())]\n );\n });\n\n SVGcircles.attr('opacity', 0.3).each(function() {\n d3.select(this).style(\n 'fill',\n turboColorScheme[Math.floor(colorSampleIndex())]\n );\n });\n\n divCircle.attr('opacity', 0.5).each(function() {\n d3.select(this).style(\n 'background-color',\n turboColorScheme[Math.floor(colorSampleIndex())]\n );\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"ActivateBlackMode = {\n if (ColorMode === 'Black') {\n SVGpaths.each(function() {\n d3.select(this).attr('fill', 'black');\n });\n\n divCircle.attr('opacity', 0.5).each(function() {\n d3.select(this).style('background-color', 'black');\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`## Selections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"SVGpaths = d3.select(SpherePaths).selectAll('path')","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"divCircle = d3.select(HtmlView).selectAll('.circle')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"SVGcircles = d3\n .select(SvgView)\n .selectAll('svg')\n .selectAll('circle')","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"data20 = d3.range(-200, 200.1, 400 / spellings.length).map((x, i) => {\n return { className: spellings[i], translateZ: x };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"data50s = d3.ticks(-200, 200, 40).map((x, i) => {\n return { className: spellings[i], translateZ: x };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"spellings = [\n 'one',\n 'two',\n 'three',\n 'four',\n 'five',\n 'six',\n 'seven',\n 'eight',\n 'nine',\n 'ten',\n 'eleven',\n 'twelve',\n 'thirteen',\n 'fourteen',\n 'fifteen',\n 'sixteen',\n 'seventeen',\n 'eighteen',\n 'nineteen',\n 'twenty'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"turboColorScheme[Math.floor(colorSampleIndex())]","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md` \n Colored Layers\n All colors from the \\`turboColorScheme\\` are randomly selected for each layer\n 255 options for \\`fauxSphere\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"md`## Fire Strokes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"colorSampleIndex = d3.randomUniform(0, turboColorScheme.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"SVGcircles.selectAll('.circle circle')\n .style('opacity', 0.5)\n .attr('stroke', 'black')\n .attr('stroke-width', 1)\n .transition()\n .duration(2000)\n .attr('stroke-dashoffset', function() {\n let length = this.getTotalLength();\n return 0;\n })\n .attr('stroke-dasharray', function() {\n let length = this.getTotalLength();\n return `${0} ${length}`;\n })\n .transition()\n .delay((d, i) => i * 160)\n .duration(3000)\n .on('start', function repeat() {\n d3.active(this)\n .attr('stroke-dasharray', function() {\n let length = this.getTotalLength();\n return `${0} ${length}`;\n })\n\n .transition()\n .duration(4000)\n .attr('stroke-dashoffset', function() {\n let length = this.getTotalLength();\n return length;\n })\n .transition()\n .duration(4000)\n .on('start', repeat);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3\n .select(SpherePaths)\n .selectAll('path')\n .attr('stroke', 'white')\n .attr('stroke-width', 2)\n .attr('stroke-dashoffset', function() {\n let length = this.getTotalLength();\n\n return length;\n })\n .attr('stroke-dasharray', function() {\n let length = this.getTotalLength();\n return `${length}, ${length}`;\n })\n .transition()\n .delay((d, i) => i * 100)\n .duration((d, i) => i * 100)\n .on(\"start\", function repeat() {\n d3.active(this)\n .style('opacity', Math.random())\n .attrTween('stroke-dashoffset', 0)\n .transition()\n .delay(2000)\n .on(\"end\", repeat);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"md`---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"import {radio, slider, checkbox } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"// html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"import { CSS } from '@stroked/utils'","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof useless_rotateY = slider({\n min: -180,\n max: 180,\n value: 0,\n step: 1,\n title: \"ROTATE-Y(deg)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof useless_rotateZ = slider({\n min: -180,\n max: 180,\n value: 0,\n step: 1,\n title: \"ROTATE-Z(deg)\"\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}