31:T2591,mapSingleCurvedLeftRight = { const svg = d3.select(DOM.svg(width, height)) const mapGroup = svg.append("g") .attr("transform", `translate(${width/2}, ${height/2})`) const leftGroupLines = mapGroup .selectAll(".connection-group") .data(dataOrdered.left) .enter().append("g") .attr("transform", (d, i) => { const separation = (180 - (breakAngle * 2)) / (dataOrdered.left.length - 1) const isEven = dataOrdered.left.length % 2 let angle = 0 if (i % 2 === 0) angle = 180 + (separation * (i / 2)) + (separation / 2) else angle = 180 - separation * (i / 2) if (isEven === 1) angle = angle - (separation / 2) return `rotate(${angle})` }) const rightGroupLines = mapGroup .selectAll(".connection-group") .data(dataOrdered.right) .enter().append("g") .attr("transform", (d, i) => { const separation = (180 - (breakAngle * 2)) / (dataOrdered.right.length - 1) const isEven = dataOrdered.right.length % 2 let angle = 0 if (i % 2 === 0) angle = (separation * (i / 2)) + (separation / 2) else angle = -separation * (i / 2) if (isEven === 1) angle = angle - (separation / 2) return `rotate(${angle})` }) const leftGroupDashes = mapGroup .selectAll(".connection-group") .data(dataOrdered.left) .enter().append("g") .attr("transform", (d, i) => { const separation = (180 - (breakAngle * 2)) / (dataOrdered.left.length - 1) const isEven = dataOrdered.left.length % 2 let angle = 0 if (i % 2 === 0) angle = 180 + (separation * (i / 2)) + (separation / 2) else angle = 180 - separation * (i / 2) if (isEven === 1) angle = angle - (separation / 2) return `rotate(${angle})` }) const rightGroupDashes = mapGroup .selectAll(".connection-group") .data(dataOrdered.right) .enter().append("g") .attr("transform", (d, i) => { const separation = (180 - (breakAngle * 2)) / (dataOrdered.right.length - 1) const isEven = dataOrdered.right.length % 2 let angle = 0 if (i % 2 === 0) angle = (separation * (i / 2)) + (separation / 2) else angle = -separation * (i / 2) if (isEven === 1) angle = angle - (separation / 2) return `rotate(${angle})` }) const receivedConnectionsLeft = leftGroupLines.append("path") .attr("class", "connection-line") .datum(d => [{"x": 0, "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", function(d, i) { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `M${d[0].x} ${d[0].y} Q${d[1].x * controlPointX} ${d[1].y + curveScale(groupAngle - 180)} ${d[1].x} ${d[1].y}` }) .style("stroke-width", d => `${d[0].received_bytes}px`) const receivedConnectionsLeftDashes = leftGroupDashes.append("path") .attr("class", "connection-line-dash") .datum(d => [{"x": 0, "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", function(d, i) { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `M${d[0].x} ${d[0].y} Q${d[1].x * controlPointX} ${d[1].y + curveScale(groupAngle - 180)} ${d[1].x} ${d[1].y}` }) .style("stroke-width", 4)// d => `${dotScale(d[0].received_bytes)}px`) const sentConnectionsRight = rightGroupLines.append("path") .attr("class", "connection-line") .datum(d => [{"x": 0, "y": 0, "sent_bytes": d.sent_bytes}, {"x": mapRadius, "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", function(d, i) { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `M${d[0].x} ${d[0].y} Q${d[1].x * controlPointX} ${d[1].y + curveScale(groupAngle)} ${d[1].x} ${d[1].y}` }) .style("stroke-width", d => d[0].sent_bytes) const sentConnectionsRightDashes = rightGroupDashes.append("path") .attr("class", "connection-line-dash") .datum(d => [{"x": 0, "y": 0, "sent_bytes": d.sent_bytes}, {"x": mapRadius, "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", function(d, i) { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `M${d[0].x} ${d[0].y} Q${d[1].x * controlPointX} ${d[1].y + curveScale(groupAngle)} ${d[1].x} ${d[1].y}` }) .style("stroke-width", 4) // d => `${dotScale(d[0].sent_bytes)}px`) for (let t = 0; t < 2; t++) { leftGroupDashes.append("text") .attr("class", t === 0 ? "link-label-back" : "link-label") .attr("x", 0) .attr("y", 4) .attr("transform", function (d, i) { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle const pos = getQuadraticPos(linkLabelPos, 0, 0, mapRadius * controlPointX, curveScale(groupAngle - 180), mapRadius, 0) const angle = getQuadraticAngle(linkLabelPos, 0, 0, mapRadius * controlPointX, curveScale(groupAngle - 180), mapRadius, 0) return `translate(${pos.x}, ${pos.y}) rotate(${180 + angle})` }) .text(d => `${d3.format(".2")(d.received_bytes)} GB`) .style("opacity", mapRadius > 240 ? 1 : 0) .style("text-anchor", "middle") rightGroupDashes.append("text") .attr("class", t === 0 ? "link-label-back" : "link-label") .attr("x", 0) .attr("y", 4) .attr("transform", function () { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle const pos = getQuadraticPos(linkLabelPos, 0, 0, mapRadius * controlPointX, curveScale(groupAngle), mapRadius, 0) const angle = getQuadraticAngle(linkLabelPos, 0, 0, mapRadius * controlPointX, curveScale(groupAngle), mapRadius, 0) return `translate(${pos.x}, ${pos.y}) rotate(${angle})` }) .text(d => `${d3.format(".2")(d.sent_bytes)} GB`) .style("opacity", mapRadius > 240 ? 1 : 0) .style("text-anchor", "middle") } const arrowsLeft = leftGroupDashes.append("path") .attr("class", "arrow") .attr("d", arrowPath) .attr("transform", function () { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle const pos = getQuadraticPos(linkLabelPos * 0.91, 0, 0, mapRadius * controlPointX, curveScale(groupAngle - 180), mapRadius, 0) const angle = getQuadraticAngle(linkLabelPos * 0.91, 0, 0, mapRadius * controlPointX, curveScale(groupAngle - 180), mapRadius, 0) return `translate(${pos.x}, ${pos.y}) rotate(${angle - 180})` }) .style("display", d => d.received_bytes === 0 ? "none" : "block") const arrowsRight = rightGroupDashes.append("path") .attr("class", "arrow") .attr("d", arrowPath) .attr("transform", function () { const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle const pos = getQuadraticPos(linkLabelPos * 1.09, 0, 0, mapRadius * controlPointX, curveScale(groupAngle), mapRadius, 0) const angle = getQuadraticAngle(linkLabelPos * 1.09, 0, 0, mapRadius * controlPointX, curveScale(groupAngle), mapRadius, 0) return `translate(${pos.x}, ${pos.y}) rotate(${angle})` }) .style("display", d => d.received_bytes === 0 ? "none" : "block") const nodeLabelsLeft = leftGroupLines.append("text") .attr("class", "node-label") .attr("x", 0) .attr("y", 0) .attr("transform", function (d, i) { const xPos = mapRadius + nodeScale(d.size) const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `translate(${xPos + 9},0) rotate(${360 - groupAngle})` }) .text(d => d.name) .style("text-anchor", "end") .style("opacity", mapRadius > 240 ? 1 : 0) const nodeLabelsRight = rightGroupLines.append("text") .attr("class", "node-label") .attr("x", 0) .attr("y", 0) .attr("transform", function (d, i) { const xPos = mapRadius + nodeScale(d.size) const groupAngle = d3.select(this)._groups[0][0].parentElement.transform.baseVal[0].angle return `translate(${xPos + 9},0) rotate(${-groupAngle})` }) .text(d => d.name) .style("opacity", mapRadius > 240 ? 1 : 0) // animating dash connection lines receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`) .style("stroke-dashoffset", d => time / ( (51 - dashSpeed) / d[0].received_bytes)) sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`) .style("stroke-dashoffset", (d) => -time / ( (51 - dashSpeed) / d[0].sent_bytes)) // Unsed animation options // receivedConnectionsLeftDashes.style("stroke-dasharray", d => `1 ${d[0].received_bytes * dashGap}`) // receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${dashGap}`) // .style("stroke-dashoffset", (d) => (now - 1561872000000) / ((1000 - dashSpeed) / d[0].received_bytes)) // sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${dashGap}`) // .style("stroke-dashoffset", (d) => (1561872000000 - now) / ((1000 - dashSpeed) / d[0].sent_bytes)) drawConnectedNodes(leftGroupDashes) drawConnectedNodes(rightGroupDashes) drawMainNode(mapGroup) drawMainNodeLabel(mapGroup) applyGlobalStyles(svg) return svg.node() }32:T500,function applyGlobalStyles(e) { e.selectAll(".connection-line") .style("stroke-linecap", "round") .style("stroke", connectionColor) .style("opacity", mapRadius > 90 ? 1 : 0) .style("fill", "none") e.selectAll(".connection-line-dash") .style("stroke-linecap", "round") .style("stroke", dashColor) .style("opacity", mapRadius > 90 ? 1 : 0) .style("fill", "none") e.selectAll(".arrow") .style("fill", "#777777") .style("opacity", mapRadius > 90 ? 1 : 0) .style("stroke", "none") e.selectAll(".circle") .style("stroke", circleStrokeColor) .style("fill", "white") .style("stroke-width", "1px") e.selectAll(".node-label") .style("font-family", "sans-serif") /*.style("font-size", "0.7em")*/ .style("font-size", "11px") e.selectAll(".link-label") .style("font-family", "sans-serif") .style("font-weight", 800) /* .style("font-size", "0.6em")*/ .style("font-size", "10px") .style("fill", circleStrokeColor) e.selectAll(".link-label-back") .style("font-family", "sans-serif") .style("font-weight", 800) /*.style("font-size", "0.6em")*/ .style("font-size", "10px") .style("fill", "white") .style("stroke", "white") .style("stroke-width", 3) }33:[] 2f:{"title":"Radial Layout Left & Right Curved","cells":[{"id":0,"value":"md`# Radial Layout Left & Right Curved`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"viewof circleStrokeColor = {\n const form = html`\n \n `;\n \n form.oninput = () => {\n form.value = form.inputVal.value;\n form.outputVal.value = form.inputVal.value;\n };\n \n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2409,"value":"viewof linkLabelPos = makeSliderWithValue(\"linkLabelPos\", 0, 1, 0.01, 0.75, \"ratio\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"viewof controlPointYMax = makeSliderWithValue(\"controlPointYMax\", 10, 300, 1, 140, \"px\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2223,"value":"viewof controlPointX = makeSliderWithValue(\"controlPointX\", 0, 1, 0.01, 0.5, \"ratio\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"viewof dashSpeed = makeSliderWithValue(\"dashSpeed\", 1, 50, 0.2, 40, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"viewof maxNodeRadius = makeSliderWithValue(\"maxNodeRadius\", 0, 50, 0.25, 22, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"viewof breakAngle = makeSliderWithValue(\"breakAngle\", 0, 90, 1, 26, \"degrees\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"viewof nodeCount = makeSliderWithValue(\"nodeCount\", 1, 100, 1, 30, \"nodes\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"viewof mainNodeRadius = makeSliderWithValue(\"mainNodeRadius\", 10, 200, 1, 30, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"viewof mapRadius = makeSliderWithValue(\"mapRadius\", 10, height / 2, 1, (height / 2) - 50, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"// viewof dashGap = makeSliderWithValue(\"dashGap\", 1, 200, 0.5, 30, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"viewof connectionColor = {\n const form = html`\n \n `;\n \n form.oninput = () => {\n form.value = form.inputVal.value;\n form.outputVal.value = form.inputVal.value;\n };\n \n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"viewof dashColor = {\n const form = html`\n \n `;\n \n form.oninput = () => {\n form.value = form.inputVal.value;\n form.outputVal.value = form.inputVal.value;\n };\n \n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2367,"value":"// source: http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html\nfunction getQuadraticPos(t, sx, sy, cp1x, cp1y, ex, ey) {\n return {\n x: (1-t) * (1-t) * sx + 2 * (1-t) * t * cp1x + t * t * ex,\n y: (1-t) * (1-t) * sy + 2 * (1-t) * t * cp1y + t * t * ey\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2370,"value":"// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html\nfunction getQuadraticAngle(t, sx, sy, cp1x, cp1y, ex, ey) {\n let dx = 2*(1-t)*(cp1x-sx) + 2*t*(ex-cp1x)\n let dy = 2*(1-t)*(cp1y-sy) + 2*t*(ey-cp1y)\n let radians = -Math.atan2(dx, dy) + 0.5*Math.PI\n \n return radians * (180/Math.PI)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"dotScale = d3.scaleLinear()\n .domain([4, 7])\n .range([1.5, 4])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"curveScale = d3.scaleLinear()\n .domain([-90, 90])\n .range([controlPointYMax, -controlPointYMax])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"wing = 90\n\n// viewof wing = makeSliderWithValue(\"wing\", -90, 90, 1, 45, \"degrees\")\n\n// wing = {\n// let change = 0\n// do {\n// change = Math.cos(mutable count++ / 18) * 85\n// yield change\n// }\n// while (animating)\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"function drawConnectedNodes(group) {\n return group.append(\"circle\")\n .attr(\"class\", \"circle connected-circle\")\n .attr(\"cx\", mapRadius)\n .attr(\"cy\", 0)\n .attr(\"r\", d => nodeScale(d.size))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"function drawNodeLabels(group) {\n return group.selectAll(\".service-label\")\n .data(data)\n .enter().append(\"text\")\n .attr(\"class\", \"service-label\")\n .attr(\"x\", (d, i) => Math.cos((i / nodeCount) * (Math.PI * 2)) * mapRadius)\n .attr(\"y\", (d, i) => Math.sin((i / nodeCount) * (Math.PI * 2)) * mapRadius)\n .attr(\"dx\", (d, i) => isLeftHalf(i) ? (-d.size - 3) : (d.size + 3))\n .style(\"text-anchor\", (d, i) => isLeftHalf(i) ? \"end\" : \"start\")\n .text(d => d.name)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"function drawMainNode(group) {\n return group.append(\"circle\")\n .attr(\"class\", \"service-circle-main circle\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"r\", mainNodeRadius)\n .style(\"fill\", \"white\")\n .style(\"stroke\", circleStrokeColor)\n .style(\"stroke-width\", 2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"function drawMainNodeLabel(group) {\n return group.append(\"text\")\n .attr(\"class\", \"main-service-label\")\n .attr(\"x\", 0)\n .attr(\"y\", mainNodeRadius + 26)\n .style(\"text-anchor\", \"middle\")\n .text(\"main_name\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"12px\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"function arrowOffset(size) {\n return (arrowScale(size) * arrowLengthMultiplier) + 10\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"function arrowPath(d) {\n return `M0,-3L7,0L0,3`\n \n // const a = arrowScale(d.sent_bytes)\n // return `M0,-${a}L${a * arrowLengthMultiplier},0L0,${a}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"nodeScale = d3.scaleLinear()\n .domain([10, 30])\n .range([8, maxNodeRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"arrowScale = d3.scaleLinear()\n .domain([0, 4])\n .range([1.5, 3]) // [1.5, 4]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"mapRadiusScale = d3.scaleLinear()\n .domain([-90, 90])\n .range([0, (height / 2) - 30])","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"line = d3.line()\n .x(d => d.x)\n .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"function calcWingPos(d, i) {\n const wingInRadians = wing * (Math.PI / 180)\n const angle = wingInRadians - ((Math.PI + (wingInRadians * 2)) * (i / (nodeCount)))\n const xPos = Math.cos(angle) * (mapRadius + nodeScale(d.size) + 8);\n const yPos = Math.sin(angle) * (mapRadius + nodeScale(d.size) + 8);\n \n return {x: xPos, y: yPos} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"function isLeftHalf(i) {\n const a = (i / nodeCount) * (Math.PI * 2)\n return (a > (Math.PI / 2)) && (a < (Math.PI * 1.5))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"arrowLengthMultiplier = 2.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"offset = ({\n \"internal\": mainNodeRadius + 15,\n \"external\": 8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"dataOrdered = {\n let left = data.map(d => {\n if (d.received_bytes > d.sent_bytes) return d\n else return\n })\n \n let right = data.map(d => {\n if (d.sent_bytes >= d.received_bytes) return d\n else return\n })\n \n left = left.filter(function (e) {\n return e != null\n })\n \n right = right.filter(function (e) {\n return e != null\n })\n \n left.sort((a, b) => {\n return b.received_bytes - a.received_bytes\n })\n \n right.sort((a, b) => {\n return b.sent_bytes - a.sent_bytes\n })\n \n return {\"left\": left, \"right\": right}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"dataSorted = {\n return data.sort((a, b) => {\n return b.received_bytes - a.received_bytes\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"data = d3.range(nodeCount).map((d, i) => ({\n \"name\": `name_of_node_${i}`,\n \"size\": d3.randomUniform(10, 30)(),\n \"received_bytes\": Math.floor(d3.randomUniform(0, 36)()) % 36 === 0 ? 0 : d3.randomUniform(0.5, 8)(),\n \"sent_bytes\": Math.floor(d3.randomUniform(0, 28)()) % 28 === 0 ? 0 : d3.randomUniform(0.5, 7)(),\n \"retransmits\": Math.floor(d3.randomUniform(0, 5)())\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"time = {\n let i = 10000\n while (true) {\n yield ++i\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import {makeSliderWithValue} from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}