Published
Edited
Jun 28, 2019
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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()
}
Insert cell
// viewof dashGap = makeSliderWithValue("dashGap", 1, 200, 0.5, 30, "pixels")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// viewof arrowSize = makeSliderWithValue("arrowSize", 1, 20, 0.1, 3, "pixels")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more