30:[] 2e:{"title":"Prime Factors 2","cells":[{"id":0,"value":"md`# Prime Factors 2\n\nHexbin code from https://observablehq.com/@d3/hexbin and https://observablehq.com/@d3/hexbin-area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof maxValue = slider({\n min: 0, \n max: 50000, \n step: 1, \n value: 20000, \n title: \"Maximum Test Value\", \n description: \"test up to this many values\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.1)\n .selectAll(\"path\")\n .data(bins)\n .join(\"path\")\n .attr(\"d\", hexbin.hexagon())\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .attr(\"fill\", d => color(d.length));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"legend({\n color: color,\n title: \"Count of first two factors as {log(x),y} position\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof radius = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px radius`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n //.attr(\"fill\", \"#ddd\")\n .attr(\"stroke\", \"black\")\n .selectAll(\"path\")\n .data(bins)\n .enter().append(shape)\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .call(shape === \"path\"\n ? path => path.attr(\"d\", d => hexbin.hexagon(r(d.length))).attr('fill', d => color(d.length))\n : circle => circle.attr(\"r\", d => r(d.length)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof shape = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"{\n const p = vl.markPoint()\n .data(data2)\n .encode(\n vl.x().fieldQ(\"0\")\n .scale({ type: 'log' }), \n vl.y().fieldQ(\"1\"),\n vl.color().fieldO('2'),\n vl.size().fieldQ('1'),\n vl.shape().fieldO('3'),\n vl.tooltip(['0', '1', '2', '3'])\n )\nreturn vl.layer(p)\n .width(width-100).height((width-100)/2)\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"{\n const p = vl.markLine()\n .data(data2)\n .encode(\n vl.x().fieldQ(\"0\")\n .scale({ type: 'log' }), \n vl.y().fieldQ(\"1\"),\n vl.color().fieldQ('2'),\n vl.tooltip(['0', '1', '2', '3'])\n )\n \n const p2 = vl.markCircle()\n .data(data2)\n .encode(\n vl.x().fieldQ(\"0\")\n .scale({ type: 'log' }), \n vl.y().fieldQ(\"1\"),\n vl.color().fieldQ('2'),\n vl.tooltip(['0', '1', '2', '3'])\n )\n \n return vl.layer(p, p2)\n .width(width-100).height((width-100)/2)\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n const p = vl.markArea()\n .data(data2)\n .encode(\n vl.x().fieldQ(\"0\")\n .scale({ type: 'log' }), \n vl.y().fieldQ(\"1\"),\n vl.color().fieldQ('2'),\n vl.tooltip(['0', '1', '2', '3'])\n )\nreturn vl.layer(p)\n .width(width-100).height((width-100)/2)\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"r = d3.scaleSqrt()\n .domain([0, d3.max(bins, d => d.length)])\n .range([0, hexbin.radius() * Math.SQRT2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"color = d3.scaleSequential(d3.interpolateBuPu)\n .domain([0, d3.max(bins, d => d.length) / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"hexbin = d3.hexbin()\n .x(d => x(d['0']))\n .y(d => y(d['1']))\n .radius(radius * width / 954)\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"bins = hexbin(data2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"x = d3.scaleLog()\n .domain(d3.extent(data2, d => d['0']))\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"y = d3.scaleLog()\n .domain(d3.extent(data, d => d['1']))\n .rangeRound([height - margin.bottom - radius, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \"\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data['0']))","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", 4)\n .attr(\"y\", margin.top)\n .attr(\"dy\", \".71em\")\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .text(data['1']))","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"height = width/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.range(2, maxValue).map(i => factors(i))","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"data2 = {\n const d = d3.range(2, maxValue).map(i => factors(i))\n const maxLength = d.map(d => d.length).reduce((p,c) => Math.max(p,c), -Infinity)\n const filled = d.map(n => [...n, ...d3.range(maxLength - n.length).map(i => 0)])\n return filled.map(d => { \n const o = {}\n d.forEach((a,i) => o[i] = a)\n return o\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"// from https://observablehq.com/@mbostock/prime-factors\nfactors = (n) => {\n const f = [];\n if (!n) return f;\n let i = 2, x = n;\n while (x % 4 === 0) f.push(4), x /= 4; // Special four layout.\n loop: while (x > 1) {\n for (let j = Math.sqrt(x); i <= j; ++i) {\n if (x % i === 0) {\n f.push(i), x /= i;\n continue loop;\n }\n }\n f.push(x), x = 1;\n }\n return f.sort((a, b) => b - a); // Optimize me?\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}