chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const setValues = (sel, field = 'start') =>
sel
.attr("cx", d => d[field][0])
.attr("cy", d => d[field][1])
.attr("r", d => d[field][2])
.attr('stroke-width', d => d[field][3])
.attr('stroke', d => d[field][4])
.attr("fill", d => d[field][5])
const team = svg
.selectAll("circle.team")
.data(teams)
.join("circle")
.attr('class', 'elem team')
.call(setValues, 'start');
const stepVertical = ([x0, y0, x1, y1]) => `M${x0},${y0}V${(y0 + y1) / 2}H${x1}V${y1}`
const link = svg
.selectAll("path.link")
.data(links)
.join("path")
.attr('class', 'elem link')
.attr('stroke', '#000000')
.attr('stroke-width', 3)
.attr('d', (d) => stepVertical([d.start[0], d.start[1], d.finish[0], d.finish[1]]));
const role = svg
.selectAll("circle.role")
.data(roles)
.join("circle")
.attr('class', 'elem role')
.call(setValues, 'start');
const animate = (sel, field = 'start') => {
const t = selection.transition().duration(2000);
sel
.transition(t)
.call(setValues, field)
.on('end', () => sel.call(animate, field === 'start' ? 'finish' : 'start'))
}
const selection = svg.selectAll(".elem");
selection.call(animate);
return svg.node();
}
width = 600
height = 400
roles = [
{start: [300, 100, 45, 4, '#083C52', '#0099FF'], finish: [100, 200, 45, 4, '#083C52', '#0099FF']},
{start: [100, 300, 45, 4, '#083C52', '#0099FF'], finish: [500, 200, 45, 4, '#083C52', '#0099FF']},
{start: [300, 300, 45, 4, '#083C52', '#0099FF'], finish: [275, 250, 45, 4, '#083C52', '#0099FF']},
{start: [500, 300, 45, 4, '#083C52', '#0099FF'], finish: [275, 150, 45, 4, '#083C52', '#0099FF']},
]
teams = [
{start: [275, 200, 110, 0, 'transparent', '#FFFFFF'], finish: [275, 200, 110, 3, '#000000', 'transparent']},
{start: [220, 200, 180, 0, 'transparent', '#FFFFFF'], finish: [220, 200, 180, 3, '#000000', 'transparent']},
{start: [500, 200, 70, 0, 'transparent', '#FFFFFF'], finish: [500, 200, 70, 3, '#000000', 'transparent']},
]
links = [
{start: [300, 140, 0, 3,'#000000','transparent'], finish: [100, 260, 0, 0, 'transparent', 'transparent']},
{start: [300, 140, 0, 3,'#000000','transparent'], finish: [300, 260, 0, 0, 'transparent', 'transparent']},
{start: [300, 140, 0, 3,'#000000','transparent'], finish: [500, 260, 0, 0, 'transparent', 'transparent']},
]
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.
