{
const svg = d3.create("svg")
.attr('width', width)
.attr('height', 50)
let lineGenerator = d3.line()
while (true) {
svg.selectAll('.link')
.data(randomStraightLineData(), d => d.id)
.join(
enter => enter.append('path')
.attr('class', 'link')
.attr('d', d => lineGenerator([d.sourcePoint, d.targetPoint]))
.attr('stroke-width', '1px')
.attr('stroke', 'black'),
update => update.call(update => {
return update.transition(200)
.attr('d', d => lineGenerator([d.sourcePoint, d.targetPoint]))
}
)
)
yield svg.node()
await Promises.tick(1000)
}
}
{
const svg = d3.create("svg")
.attr('width', 200)
.attr('height', 200)
let straight = false
while (true) {
straight = !straight
svg.selectAll('.link')
.data(randomCurveData(straight), d => d.id)
.join(
enter => enter.append('path')
.attr('class', 'link')
.attr('d', d => d3.line().curve(d3.curveBasis)([d.sourcePoint, d.controlPoint, d.targetPoint]))
.attr('fill', 'none')
.attr('stroke-width', '1px')
.attr('stroke', 'black'),
update => update.call(async update => {
// console.log('updated')
update.transition(400)
.attr('d', d =>
d3.line()
.curve(d3.curveBasis)([d.sourcePoint,
d.controlPoint,
d.targetPoint]))
}
)
)
yield svg.node()
await Promises.tick(2000)
}
}
function randomCurveData(straight) {
let sourcePoint = [50, 50]
let targetPoint = [150, 150]
let controlPoint
if (straight) {
controlPoint = [(sourcePoint[0] + targetPoint[0]) / 2,
(sourcePoint[1] + targetPoint[1]) / 2]
} else {
controlPoint = [50, 150]
}
return [{sourcePoint: sourcePoint,
controlPoint: controlPoint,
targetPoint: targetPoint,
id: 1}]
}
function randomStraightLineData() {
return [{sourcePoint: [Math.random() * 1000, Math.random() * 50],
targetPoint: [Math.random() * 1000, Math.random() * 50],
id: 1}]
}
d3 = require("d3@6")
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.
