30:[] 2e:{"title":"","cells":[{"id":18,"value":"d3 = require('d3@v4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`In some ways [A-Frame](https://aframe.io/) is like a 3D version of SVG, \nit uses custom elements to provide a declarative markup syntax for 3D primitives.\nThis makes it perfect for using with [d3.js](http://d3js.org)! \n\nThis page uses d3 to lay out some generated data with a [force simulation](https://github.com/d3/d3-force) \nand then renders the layout using the \\`enter/update/exit\\` pattern on A-Frame primitives.\n\nRather than setup the scene with an \\`

\n \n \n \n \n

`\n\n var scene = d3.select(div).select(\"a-scene\")\n var cbs = scene.selectAll(\"a-box.data\").data(nodes)\n cbs.exit().remove()\n var cbsE = cbs.enter().append(\"a-box\").classed(\"data\", true)\n cbs = cbsE.merge(cbs)\n cbs\n .attr(\"position\", function(d) { \n return [d.x/100, d.y/100, -3].join(\" \") \n })\n .attr(\"rotation\", function(d) { \n return [0, 0, d.ry].join(\" \") \n })\n .attr(\"width\", 0.25)\n .attr(\"height\", 0.25)\n .attr(\"depth\", 1.25)\n .attr(\"color\", function(d) { return d.color })\n\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`We can play with some parameters of our data and watch the scene update just as we would with SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof angleOffset = {\n var div = html`

Rotation Angle:

`\n var range = DOM.range(0, 360, 1)\n div.appendChild(range)\n //var val = Generators.input(range)\n d3.select(range).on(\"input\", function() {\n div.value = +this.value;\n div.dispatchEvent(new CustomEvent(\"input\"));\n })\n div.value = +range.value;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof radius = {\n var div = html`

Radius:

`\n var range = DOM.range(15, 50, 0.5)\n div.appendChild(range)\n d3.select(range).on(\"input\", function() {\n div.value = +this.value;\n div.dispatchEvent(new CustomEvent(\"input\"));\n })\n div.value = +range.value;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof restart = {\n var button = DOM.input(\"button\")\n button.value = \"restart simulation\"\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`The data used to render the boxes that's stored in \\`nodes\\` is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"nodes","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`The relevant d3 code for rendering the boxes is as follows:\n\\`\\`\\`\n var scene = d3.select(\"a-scene\")\n var cbs = scene.selectAll(\"a-box.data\").data(nodes)\n cbs.exit().remove()\n var cbsE = cbs.enter().append(\"a-box\").classed(\"data\", true)\n cbs = cbsE.merge(cbs)\n cbs\n .attr(\"position\", function(d) { \n return [d.x/10, d.y/10, -3].join(\" \") \n })\n .attr(\"rotation\", function(d) { \n return [0, 0, d.ry].join(\" \") \n })\n .attr(\"width\", 0.25)\n .attr(\"height\", 0.25)\n .attr(\"depth\", 1.25)\n .attr(\"color\", function(d) { return d.color })\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"function phyllotaxis(i, radius, cx, cy) {\n var r = radius * Math.sqrt(i), a = theta * i;\n return {\n x: cx + r * Math.cos(a),\n y: cy + r * Math.sin(a)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"theta = Math.PI * (3 - Math.sqrt(5)) + angleOffset/360 * 0.03","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}