30:T44f,vis9 = { let svgNode = DOM.svg(500,300); let svg = d3.select(svgNode); let centerA = { x: 150, y : 130 }; let centerB = { x: 350, y : 130 }; let r = 8; let nodes = d3.range(A+B).map((d) => { let cluster = d < A ? 0 : 1; return { cluster : cluster, x:250, y:150, color : (cluster?colorB:colorA), focus : (cluster?centerB:centerA) }; }); svg.selectAll("circle").data(nodes).enter() .append("circle") .attr ("r", r) .style("fill", d => d.color); let circles = svg.selectAll("circle"); let simulation = d3.forceSimulation(nodes) .force ("x", d3.forceX().x(d => d.focus.x).strength(0.1)) .force ("y", d3.forceY().y(d => d.focus.y).strength(0.1)) .force ("collide", d3.forceCollide(r+2)) .nodes(nodes) .on("tick", () => { circles .attr("cx", d => d.x) .attr("cy", d => d.y) }); svg.append("text").attr("x",centerA.x).attr("y",280).style("text-anchor","middle").text(A); svg.append("text").attr("x",centerB.x).attr("y",280).style("text-anchor","middle").text(B); return svgNode; }31:T49c,vis8 = { let y1 = 80*A/100; let y2 = 80*B/100; let path1Mask = `` let ball1 = ``; let path1 = `` let path2Mask = `` ; let ball2 = ``; let path2 = `` return html`` }32:[] 2e:{"title":"37-75","cells":[{"id":0,"value":"md`# 37-75\n\nExercício de codificação visual.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof A = slider ({title: \"A\", min:1, max:100, step:1, value: 37, description: \"valor da primeira variável\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof B = slider ({title: \"B\", min:1, max:100, step:1, value: 75, description: \"valor da segunda variável\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof colorA = color({\n value: \"#0000ff\",\n title: \"Cor para A\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof colorB = color({\n value: \"#ff0000\",\n title: \"Cor para B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"vis1 = html`${A}\n${B}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"vis2 = html`\n

${A}

${B}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"vis3 = html`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"vis4 = html`\n\n

\n${A}\n${B}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"vis5 = {\n let ang = 360*A/(A+B);\n let [cx,cy] = [150,150];\n let r = 120;\n let {start:p, end:q, largeArcFlag:f} = arc (cx,cy,r,0,ang);\n let path1 = ``;\n ({start:p, end:q, largeArcFlag:f} = arc (cx,cy,r,ang,360));\n let path2 = ``;\n ({start:p} = arc(cx,cy,r/2,0,ang/2));\n let text1 = `${A}`;\n ({start:p} = arc(cx,cy,r/2,ang,ang+(360-ang)/2));\n let text2 = `${B}`;\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"vis6 = html`

${A}

${B}

\n\n\n

${A}	${\"🍊\".repeat(A)}
${B}	${\"🍎\".repeat(B)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"vis7 = {\n let ang = 360*A/(A+B);\n let [cx,cy] = [150,150];\n let r = 120;\n let {start:p, end:q, largeArcFlag:f} = arc (cx,cy,r,5,ang-5);\n let path1 = ``;\n ({start:p} = arc(cx,cy,r-24,5,ang-5));\n let text1 = `${A}`;\n ({start:p, end:q, largeArcFlag:f} = arc (cx,cy,r,ang+5,360-5));\n let path2 = ``;\n ({start:p} = arc(cx,cy,r-24,ang+5,360-5));\n let text2 = `${B}`;\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Estilos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`## Bibliotecas e funções úteis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"emojis = \"🍊🍎\" // http://unicode.org/emoji/charts/full-emoji-list.html","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"arc = {\n /* Vide https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle */\n function polarToCartesian(centerX, centerY, radius, angleInDegrees) {\n var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;\n\n return {\n x: centerX + (radius * Math.cos(angleInRadians)),\n y: centerY + (radius * Math.sin(angleInRadians))\n };\n }\n\n function describeArc(x, y, radius, startAngle, endAngle){\n\n var start = polarToCartesian(x, y, radius, endAngle);\n var end = polarToCartesian(x, y, radius, startAngle);\n var largeArcFlag = endAngle - startAngle <= 180 ? \"0\" : \"1\";\n return {start:start, end:end, largeArcFlag:largeArcFlag };\n \n }\n return describeArc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { slider, color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}