2c:null 2d:["$","title",null,{"children":"Radial Layout Left & Right Working | Kemper Smith | Observable"}] 32:T1937,mapSingleArrowsLeftRight = { 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) // const angle = - (180 - (breakAngle * 2)) * (i / (dataOrdered.left.length - 1)) - (90 + breakAngle) 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) // const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle) 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) // const angle = - (180 - (breakAngle * 2)) * (i / (dataOrdered.left.length - 1)) - (90 + breakAngle) 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) // const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle) 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", line) .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", line) .style("stroke-width", 4)// d => `${dotScale(d[0].received_bytes)}px`) // const receivedArrowsLeft = leftGroupDashes.append("path") // .attr("class", "arrow") // .attr("d", arrowPathReceived) // .attr("transform", (d, i) => ` // scale(-1, 1) // translate(${-mapRadius / 2},0) // `) // .style("display", d => d.received_bytes === 0 ? "none" : "block") 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", line) .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", line) .style("stroke-width", 4) // d => `${dotScale(d[0].sent_bytes)}px`) // const sentArrowsRight = rightGroupDashes.append("path") // .attr("class", "arrow") // .attr("d", arrowPathSent) // .attr("transform", (d, i) => `translate(${mapRadius / 2}, 0)`) // .style("display", d => d.sent_bytes === 0 ? "none" : "block") // const connectedNodeLabels = mapGroup.selectAll(".service-label") // .data(data) // .enter().append("text") // .attr("class", "service-label") // .attr("x", (d, i) => calcWingPos(d, i).x) // .attr("y", (d, i) => calcWingPos(d, i).y) // .style("text-anchor", (d, i) => { // if (calcWingPos(d, i).x >= -1 && calcWingPos(d, i).x <= 1) return "middle" // else if (calcWingPos(d, i).x < -1) return "end" // else return "start" // }) // .text(d => d.name) // .style("opacity", mapRadius > 240 ? 1 : 0) // animating dash connection lines // USE THIS ONE receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`) .style("stroke-dashoffset", d => (now - 1561663344232) / ((1000 - dashSpeed) / d[0].received_bytes)) // receivedConnectionsLeftDashes.style("stroke-dasharray", d => `1 ${d[0].received_bytes * dashGap}`) // receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${dashGap}`) // .style("stroke-dashoffset", (d) => (now - 1561663344232) / ((1000 - dashSpeed) / d[0].received_bytes)) // USE THIS ONE sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`) .style("stroke-dashoffset", (d) => (1561663344232 - now) / ((1000 - dashSpeed) / d[0].sent_bytes)) // sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${dashGap}`) // .style("stroke-dashoffset", (d) => (1561663344232 - now) / ((1000 - dashSpeed) / d[0].sent_bytes)) drawConnectedNodes(leftGroupDashes) drawConnectedNodes(rightGroupDashes) drawMainNode(mapGroup) drawMainNodeLabel(mapGroup) applyGlobalStyles(svg) return svg.node() }33:T1351,mapDoubleSidedArrowsLeftRight = { const svg = d3.select(DOM.svg(width, height)) const mapGroup = svg.append("g") .attr("transform", `translate(${width/2}, ${height/2})`) const leftGroup = mapGroup .selectAll(".connection-group") .data(dataOrdered.left) .enter().append("g") .attr("transform", (d, i) => { // const angle = - 180 * (i / (dataOrdered.left.length - 1)) + 90 const angle = - (180 - (breakAngle * 2)) * (i / (dataOrdered.left.length - 1)) - (90 + breakAngle) return `rotate(${angle})` }) const rightGroup = mapGroup .selectAll(".connection-group") .data(dataOrdered.right) .enter().append("g") .attr("transform", (d, i) => { const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle) return `rotate(${angle})` }) const midpointLeft = 100 / linkMidpoint const midpointRight = 100 / linkMidpoint // (100 - linkMidpoint) const sentConnectionsLeft = leftGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": offset.internal - 6, "y": 0, "sent_bytes": d.sent_bytes}, {"x": (mapRadius / midpointLeft) - arrowOffset(d.sent_bytes), "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", line) .style("stroke-width", d => d[0].sent_bytes) const receivedConnectionsLeft = leftGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": (mapRadius / midpointLeft) + arrowOffset(d.received_bytes), "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius - nodeScale(d.size) - offset.external, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", line) .style("stroke-width", d => `${d[0].received_bytes}px`) const sentArrowsLeft = leftGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => `translate(${(mapRadius / midpointLeft) - arrowOffset(d.sent_bytes)}, 0)`) .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrowsLeft = leftGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => ` scale(-1, 1) translate(${-((mapRadius / midpointLeft) + arrowOffset(d.received_bytes))},0) `) .style("display", d => d.received_bytes === 0 ? "none" : "block") const sentConnectionsRight = rightGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": offset.internal - 6, "y": 0, "sent_bytes": d.sent_bytes}, {"x": (mapRadius / midpointRight) - arrowOffset(d.sent_bytes), "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", line) .style("stroke-width", d => d[0].sent_bytes) const receivedConnectionsRight = rightGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": (mapRadius / midpointRight) + arrowOffset(d.received_bytes), "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius - nodeScale(d.size) - offset.external, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", line) .style("stroke-width", d => `${d[0].received_bytes}px`) const sentArrowsRight = rightGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => `translate(${(mapRadius / midpointRight) - arrowOffset(d.sent_bytes)}, 0)`) .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrowsRight = rightGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => ` scale(-1, 1) translate(${-((mapRadius / midpointRight) + arrowOffset(d.received_bytes))},0) `) .style("display", d => d.received_bytes === 0 ? "none" : "block") // const connectedNodeLabels = mapGroup.selectAll(".service-label") // .data(data) // .enter().append("text") // .attr("class", "service-label") // .attr("x", (d, i) => calcWingPos(d, i).x) // .attr("y", (d, i) => calcWingPos(d, i).y) // .style("text-anchor", (d, i) => { // if (calcWingPos(d, i).x >= -1 && calcWingPos(d, i).x <= 1) return "middle" // else if (calcWingPos(d, i).x < -1) return "end" // else return "start" // }) // .text(d => d.name) // .style("opacity", mapRadius > 240 ? 1 : 0) // animating dash connection lines // sentConnections.style("stroke-dasharray", d => `1 ${d[0].sent_bytes * 2}`) // .style("stroke-dashoffset", (d) => (1560137400000 - now) / (100 / d[0].sent_bytes)) // receivedConnections.style("stroke-dasharray", d => `1 ${d[0].received_bytes * 2}`) // .style("stroke-dashoffset", (d) => (now - 1560137400000) / (100 / d[0].received_bytes)) drawConnectedNodes(leftGroup) drawConnectedNodes(rightGroup) drawMainNode(mapGroup) drawMainNodeLabel(mapGroup) applyGlobalStyles(svg) return svg.node() }34:Tba9,mapDoubleSidedArrowsSorted = { const svg = d3.select(DOM.svg(width, height)) const mapGroup = svg.append("g") .attr("transform", `translate(${width/2}, ${height/2})`) const connectionGroup = mapGroup .selectAll(".connection-group") .data(dataSorted) .enter().append("g") .attr("transform", (d, i) => { const angle = 360 * (i / (dataSorted.length)) - 90 return `rotate(${angle})` }) const midpoint = 100 / linkMidpoint const sentConnections = connectionGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": offset.internal - 6, "y": 0, "sent_bytes": d.sent_bytes}, {"x": (mapRadius / midpoint) - arrowOffset(d.sent_bytes), "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", line) .style("stroke-width", d => d[0].sent_bytes) const receivedConnections = connectionGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": (mapRadius / midpoint) + arrowOffset(d.received_bytes), "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius - nodeScale(d.size) - offset.external, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", line) .style("stroke-width", d => `${d[0].received_bytes}px`) const sentArrows = connectionGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => `translate(${(mapRadius / midpoint) - arrowOffset(d.sent_bytes)}, 0)`) .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrows = connectionGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => ` scale(-1, 1) translate(${-((mapRadius / midpoint) + arrowOffset(d.received_bytes))},0) `) .style("display", d => d.received_bytes === 0 ? "none" : "block") const connectedNodeLabels = mapGroup.selectAll(".service-label") .data(data) .enter().append("text") .attr("class", "service-label") .attr("x", (d, i) => calcWingPos(d, i).x) .attr("y", (d, i) => calcWingPos(d, i).y) .style("text-anchor", (d, i) => { if (calcWingPos(d, i).x >= -1 && calcWingPos(d, i).x <= 1) return "middle" else if (calcWingPos(d, i).x < -1) return "end" else return "start" }) .text(d => d.name) .style("opacity", mapRadius > 240 ? 1 : 0) // animating dash connection lines // sentConnections.style("stroke-dasharray", d => `1 ${d[0].sent_bytes * 2}`) // .style("stroke-dashoffset", (d) => (1560137400000 - now) / (100 / d[0].sent_bytes)) // receivedConnections.style("stroke-dasharray", d => `1 ${d[0].received_bytes * 2}`) // .style("stroke-dashoffset", (d) => (now - 1560137400000) / (100 / d[0].received_bytes)) drawConnectedNodes(connectionGroup) drawConnectedNodes(connectionGroup) drawMainNode(mapGroup) drawMainNodeLabel(mapGroup) applyGlobalStyles(svg) return svg.node() }35:Tcf5,mapDoubleSidedArrowsVariableMidpoint = { const svg = d3.select(DOM.svg(width, height)) const mapGroup = svg.append("g") .attr("transform", `translate(${width/2}, ${height/2})`) const connectionGroup = mapGroup .selectAll(".connection-group") .data(dataSorted) .enter().append("g") .attr("transform", (d, i) => { const angle = 360 * (i / (dataSorted.length)) - 90 return `rotate(${angle})` }) function calcMidpoint(direction, d) { const total = d.received_bytes + d.sent_bytes if (direction === "received") return 1 - (d.received_bytes / total) else return d.sent_bytes / total } const sentConnections = connectionGroup.append("path") .attr("class", "connection-line") .datum(d => { return [{"x": offset.internal - 6, "y": 0, "sent_bytes": d.sent_bytes}, {"x": (mapRadius * calcMidpoint("sent", d)) - arrowOffset(d.sent_bytes), "y": 0, "sent_bytes": d.sent_bytes}] }) .attr("d", line) .style("stroke-width", d => d[0].sent_bytes) const receivedConnections = connectionGroup.append("path") .attr("class", "connection-line") .datum(d => { return [{"x": (mapRadius * calcMidpoint("received", d)) + arrowOffset(d.received_bytes), "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius - nodeScale(d.size) - offset.external, "y": 0, "received_bytes": d.received_bytes}] }) .attr("d", line) .style("stroke-width", d => `${d[0].received_bytes}px`) const sentArrows = connectionGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => { return `translate(${(mapRadius * calcMidpoint("sent", d)) - arrowOffset(d.sent_bytes)}, 0)` }) .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrows = connectionGroup.append("path") .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => { return ` scale(-1, 1) translate(${-((mapRadius * calcMidpoint("received", d)) + arrowOffset(d.received_bytes))},0) ` }) .style("display", d => d.received_bytes === 0 ? "none" : "block") const connectedNodeLabels = mapGroup.selectAll(".service-label") .data(data) .enter().append("text") .attr("class", "service-label") .attr("x", (d, i) => calcWingPos(d, i).x) .attr("y", (d, i) => calcWingPos(d, i).y) .style("text-anchor", (d, i) => { if (calcWingPos(d, i).x >= -1 && calcWingPos(d, i).x <= 1) return "middle" else if (calcWingPos(d, i).x < -1) return "end" else return "start" }) .text(d => d.name) .style("opacity", mapRadius > 240 ? 1 : 0) // animating dash connection lines // sentConnections.style("stroke-dasharray", d => `1 ${d[0].sent_bytes * 2}`) // .style("stroke-dashoffset", (d) => (1560137400000 - now) / (100 / d[0].sent_bytes)) // receivedConnections.style("stroke-dasharray", d => `1 ${d[0].received_bytes * 2}`) // .style("stroke-dashoffset", (d) => (now - 1560137400000) / (100 / d[0].received_bytes)) drawConnectedNodes(connectionGroup) drawConnectedNodes(connectionGroup) drawMainNode(mapGroup) drawMainNodeLabel(mapGroup) applyGlobalStyles(svg) return svg.node() }36:Tf1a,mapDoubleSidedArrowsLeftRightLargeCenter = { const svg = d3.select(DOM.svg(width, height)) const mapGroup = svg.append("g") .attr("transform", `translate(${width/2}, ${height/2})`) const leftGroup = mapGroup .selectAll(".connection-group") .data(dataOrdered.left) .enter().append("g") .attr("transform", (d, i) => { const angle = - (180 - (breakAngle * 2)) * (i / (dataOrdered.left.length - 1)) - (90 + breakAngle) return `rotate(${angle})` }) const rightGroup = mapGroup .selectAll(".connection-group") .data(dataOrdered.right) .enter().append("g") .attr("transform", (d, i) => { const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle) return `rotate(${angle})` }) const midpointLeft = 100 / linkMidpoint const midpointRight = 100 / linkMidpoint const receivedConnectionsLeft = leftGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": offset.internal - 6, "y": 0, "received_bytes": d.received_bytes}, {"x": mapRadius - nodeScale(d.size) - offset.external, "y": 0, "received_bytes": d.received_bytes}]) .attr("d", line) .style("stroke-width", d => `${d[0].received_bytes}px`) const sentArrowsLeft = leftGroup.append("path") // .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => `translate(${(mapRadius / midpointLeft) - arrowOffset(d.sent_bytes)}, 0)`) .style("fill", "#824822") .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrowsLeft = leftGroup.append("path") // .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => ` scale(-1, 1) translate(${-((mapRadius / midpointLeft) + arrowOffset(d.received_bytes))},0) `) .style("fill", "#824822") .style("display", d => d.received_bytes === 0 ? "none" : "block") const sentConnectionsRight = rightGroup.append("path") .attr("class", "connection-line") .datum(d => [{"x": offset.internal - 6, "y": 0, "sent_bytes": d.sent_bytes}, {"x": mapRadius - offset.external - nodeScale(d.size), "y": 0, "sent_bytes": d.sent_bytes}]) .attr("d", line) .style("stroke-width", d => d[0].sent_bytes) const sentArrowsRight = rightGroup.append("path") // .attr("class", "arrow") .attr("d", arrowPathSent) .attr("transform", (d, i) => `translate(${(mapRadius / midpointRight) - arrowOffset(d.sent_bytes)}, 0)`) .style("fill", "#824822") .style("display", d => d.sent_bytes === 0 ? "none" : "block") const receivedArrowsRight = rightGroup.append("path") // .attr("class", "arrow") .attr("d", arrowPathReceived) .attr("transform", (d, i) => ` scale(-1, 1) translate(${-((mapRadius / midpointRight) + arrowOffset(d.received_bytes))},0) `) .style("fill", "#824822") .style("display", d => d.received_bytes === 0 ? "none" : "block") drawConnectedNodes(leftGroup) drawConnectedNodes(rightGroup) mapGroup.append("circle") .attr("class", "service-circle-main") .attr("cx", 0) .attr("cy", 0) .attr("r", mainNodeRadius) .style("fill", "#fafafa") // .style("stroke", circleStrokeColor) .style("stroke-width", 2) mapGroup.append("circle") .attr("class", "service-circle-main circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 30) .style("fill", "white") .style("stroke", circleStrokeColor) .style("stroke-width", 2) mapGroup.append("text") .attr("class", "main-service-label") .attr("x", 0) .attr("y", 30 + 26) .style("text-anchor", "middle") .text("main_name") .style("font-family", "sans-serif") .style("font-size", "0.75em") applyGlobalStyles(svg) return svg.node() }37:[] 30:{"id":"06232eea53d22e37","slug":"radial-layout-left-right-working","title":"Radial Layout Left & Right Working","thumbnail":"294ed5abebb884dd51aa6faa1a4089630fb1ebd72ba3bf968b5aed0834bb5011","access_level":"public","create_time":"$D2019-06-24T14:14:31.973Z","update_time":"$D2019-06-28T21:36:29.115Z","view_time":null,"first_public_time":"$D2019-06-28T17:05:55.996Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"167a7adedc130581","login":"kemper","name":"Kemper Smith","avatar_url":"https://avatars-next.observableusercontent.com/62a102a58152b7c85d17d4ea9f040c01bd0cb0ae2ebc8b040d43e51a729deee3","tier":"starter_2024","bio":"data viz"},"version":2124,"publish_version":2124,"role":null,"authored":false,"authors":[{"type":"individual","id":"d015eb85d8c25b2e","login":"kemper","name":"Kemper Smith","avatar_url":"https://avatars-next.observableusercontent.com/62a102a58152b7c85d17d4ea9f040c01bd0cb0ae2ebc8b040d43e51a729deee3","tier":null,"bio":"data viz"}],"members":[{"type":"individual","id":"d015eb85d8c25b2e","login":"kemper","name":"Kemper Smith","avatar_url":"https://avatars-next.observableusercontent.com/62a102a58152b7c85d17d4ea9f040c01bd0cb0ae2ebc8b040d43e51a729deee3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Radial Layout Left & Right Working","cells":[{"id":0,"value":"md`# Radial Layout Left & Right Working`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"viewof mapRadius = makeSliderWithValue(\"mapRadius\", 10, height / 2, 1, (height / 2) - 100, \"pixels\")\n\n// mapRadius = mapRadiusScale(wing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof nodeCount = makeSliderWithValue(\"nodeCount\", 1, 100, 1, 30, \"nodes\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"viewof breakAngle = makeSliderWithValue(\"breakAngle\", 0, 90, 1, 26, \"degrees\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"viewof linkMidpoint = makeSliderWithValue(\"linkMidpoint\", 20, 80, 0.5, 55, \"%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"viewof mainNodeRadius = makeSliderWithValue(\"mainNodeRadius\", 10, 200, 1, 30, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"viewof maxNodeRadius = makeSliderWithValue(\"maxNodeRadius\", 0, 50, 0.25, 26, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"viewof dashSpeed = makeSliderWithValue(\"dashSpeed\", 600, 980, 1, 890, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"// viewof dashGap = makeSliderWithValue(\"dashGap\", 1, 200, 0.5, 30, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof connectionColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"viewof dashColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1956,"value":"viewof circleStrokeColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1921,"value":"dotScale = d3.scaleLinear()\n .domain([4, 7])\n .range([1.5, 4])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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\", \"0.75em\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"function arrowOffset(size) {\n return (arrowScale(size) * arrowLengthMultiplier) + 10\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"function arrowPathSent(d) {\n const a = arrowScale(d.sent_bytes)\n return `M0,-${a}L${a * arrowLengthMultiplier},0L0,${a}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"function arrowPathReceived(d) {\n const a = arrowScale(d.received_bytes)\n return `M0,-${a}L${a * arrowLengthMultiplier},0L0,${a}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"nodeScale = d3.scaleLinear()\n .domain([10, 30])\n .range([8, maxNodeRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"arrowScale = d3.scaleLinear()\n .domain([0, 4])\n .range([1.5, 3]) // [1.5, 4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"mapRadiusScale = d3.scaleLinear()\n .domain([-90, 90])\n .range([0, (height / 2) - 30])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"line = d3.line()\n .x(d => d.x)\n .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"function applyGlobalStyles(e) {\n e.selectAll(\".connection-line\")\n .style(\"stroke-linecap\", \"round\")\n .style(\"stroke\", connectionColor)\n .style(\"opacity\", mapRadius > 90 ? 1 : 0)\n \n e.selectAll(\".connection-line-dash\")\n .style(\"stroke-linecap\", \"round\")\n .style(\"stroke\", dashColor)\n .style(\"opacity\", mapRadius > 90 ? 1 : 0)\n \n e.selectAll(\".arrow\")\n .style(\"fill\", dashColor)\n .style(\"opacity\", mapRadius > 90 ? 1 : 0)\n \n e.selectAll(\".circle\")\n .style(\"stroke\", circleStrokeColor)\n .style(\"fill\", \"white\")\n .style(\"stroke-width\", \"1px\")\n \n e.selectAll(\".service-label\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"0.7em\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"offset = ({\n \"internal\": mainNodeRadius + 15,\n \"external\": 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"arrowLengthMultiplier = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {makeSliderWithValue} from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"// viewof arrowSize = makeSliderWithValue(\"arrowSize\", 1, 20, 0.1, 3, \"pixels\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"