2d:null 2e:["$","title",null,{"children":"The xxx^xxx-spindle | Andreas Plesch | Observable"}] 33:Ta2d,// Generates the spindle with branches -n through n function* spindle(n) { let height = 0.8 * d3.min([width, window.screen.height]); let container = d3 .create('div') .style('width', width.toString() + 'px') .style('height', height.toString() + 'px'); let scene = container .append('x3d') .attr('width', width.toString() + 'px') .attr('height', height.toString() + 'px') .append('scene'); scene .append("viewpoint") .attr("centerOfRotation", "0 0 0") .attr("position", "9.57023 4.32838 9.53848") .attr("orientation", "-0.28794 0.94292 0.16732 0.83483"); // Allow rotation with no zoom scene .append("NavigationInfo") .attr("type", "turntable") .attr('speed', '0'); let yaxis_transform = scene .append('transform') .attr('translation', '0 0 0') .attr('DEF', 'axis'); let yaxis_shape = yaxis_transform.append('shape'); yaxis_shape .append('appearance') .append('material') .attr('diffuseColor', '0 0 0') .attr('transparency', 0.2); yaxis_shape .append('cylinder') .attr('radius', 0.01) .attr('subdivision', '32') .attr('height', '8'); let xaxis_transform = scene .append('transform') .attr('rotation', '0,0,1,1.570796') .attr('translation', '-2,0,0') .attr('scale', '1 1.8 1') .append('transform') .attr('USE', 'axis'); let zaxis_transform = scene .append('transform') .attr('rotation', '1,0,0,1.570796') .attr('scale', '1 1.3 1') .append('transform') .attr('USE', 'axis'); let bundle = scene.append('Group').attr('id', 'the_bundle'); for (let k = -n; k <= n; k++) { let bundle_shape = bundle.append('Shape'); bundle_shape .attr('thread', k.toString()) .append("appearance") .append('material') .attr('transparency', 1 - 1 / math.pow(T, math.abs(3 * k))); let bundle_lineset = bundle_shape.append('IndexedLineSet'); let this_coord_string = spindle_string(k); bundle_lineset.attr( "coordIndex", d3.range(this_coord_string.match(/,/g).length) ); bundle_lineset.append('Coordinate').attr('point', this_coord_string); } let principle_points = d3.range(-4, 2, 0.02).map(function(x) { let value = x2x(x, 0); let vre = value.re; if (math.abs(vre) < 0.001) { vre = 0.0; } let vim = value.im; if (math.abs(vim) < 0.001) { vim = 0.0; } return [2 * x, vre, vim]; }); scene.append(() => create_tube(principle_points, 0.025, { diffuseColor: '0 0 0' }).node() ); yield container.node(); x3dom.reload(); }34:[] 31:{"id":"cd120cd5f5048982","slug":"the-xxx-xxx-spindle","title":"The xxx^xxx-spindle","thumbnail":"53282e1839f2e00682cc7e9f4e05cda5940f8666a6f80debd7be5758f7aac5d7","access_level":"public","create_time":"$D2019-11-30T20:24:22.900Z","update_time":"$D2019-11-30T23:01:35.249Z","view_time":null,"first_public_time":"$D2019-11-30T21:05:28.566Z","has_unpublished_edits":null,"fork":{"id":"7f8bd6944f866971","slug":"the-xxx-xxx-spindle","title":"The xxx^xxx-spindle","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":834,"publish_version":834,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"The xxx^xxx-spindle","cells":[{"id":0,"value":"md`# The ${tex`x^x`}-spindle\n\nThe 3D graph of real ${tex`x`} vs the real and imaginary parts of ${tex`x^x = e^{x\\log(x)}`} for various branches of the complex logarithm.\n\nBased on the 1996 paper \"[The ${tex`x^x`}-Spindle](https://www.jstor.org/stable/2691469)\". \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"xx_spindle = spindle(N)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof n = slider({\n min: 0,\n max: N,\n step: 1,\n value: N,\n title: \"Number of threads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"// Defining the branches of x^x\nfunction x2x(x, k) {\n if (math.abs(x) < 0.000001) {\n return math.complex(1, 0);\n } else {\n var z = math.complex(x);\n var twoPiI = math.complex(0, 1).mul(2 * math.pi);\n return math.exp(z.mul(z.log().add(twoPiI.mul(k))));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"// The X3Dom string defining the kth spindle.\nfunction spindle_string(k) {\n var result = '';\n d3.range(-4, 2, 0.001).map(function(x) {\n result = result + (2 * x).toString() + ' ';\n var value = x2x(x, k);\n var vre = value.re;\n if (math.abs(vre) < 0.001) {\n vre = 0.0;\n }\n var vim = value.im;\n if (math.abs(vim) < 0.001) {\n vim = 0.0;\n }\n result = result + vre.toString() + ' ' + vim.toString() + ', ';\n });\n result = result.slice(0, -2);\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`We never actually remove or add threads, we just set their transparency as follows. Note that we select from ${html`xx_spindle`} by id. Per [Tom's advice on re-selecting elments](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells#re-selecting-elments), this might not be ideal. I'd love to use a \n\n bundle.selectAll((d,i) => something clever)\n\nidiom, but X3Dom doesn't seem to play well with that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"n_spindles = {\n const spindles = d3.select(xx_spindle).select('#the_bundle').node().querySelectorAll('Shape');\n spindles.forEach( shape => {\n const thread = shape.getAttribute('thread') * 1.0;\n const transparency = Math.abs(thread) > n ?\n 1 :\n 1 - math.pow(T, -math.abs(3 * thread));\n //if (thread > n || thread < -n) { transparency = 1; }\n shape.querySelector('material').setAttribute('transparency', transparency);\n })\n return spindles\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":" {\n// for (let k = -n; k <= n; k++) {\n// d3.select(xx_spindle)\n// .select(\"[thread='\" + k.toString() +\"']\")\n// .select('material')\n// .attr('transparency', 1 - 1 / math.pow(T, math.abs(3 * k)));\n// }\n// for (let k = n + 1; k <= N; k++) {\n// d3.select(xx_spindle)\n// .select(\"[thread='\" + k.toString() +\"']\")\n// .select('material')\n// .attr('transparency', 1);\n// }\n// for (let k = -N; k <= -(n + 1); k++) {\n// d3.select(xx_spindle)\n// .select(\"[thread='\" + k.toString() +\"']\")\n// .select('material')\n// .attr('transparency', 1);\n// }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`## A couple of globals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"// There will be 2*N+1 of branches or threads\nN = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"// Multiplicative factor by which the transparency of higher order branches are dimmed\nT = 1.06","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`## Imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"math = require('mathjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// x3dom is tricky. The require debugger suggests the following:\n// https://observablehq.com/@tmcw/module-require-debugger\nx3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"import { create_tube } from '@mcmcclur/space-curves-and-tubes'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"// Supress the annoying dashed box that appears around X3Dom display.\nhtml``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"