Published
Edited
Feb 18, 2019
4 forks
{
const width=400;
const height = 400;
const svgNode = svg`<svg width=${width+200} height=${height+200}></svg>`
const svgSelection = d3.select(svgNode);
const line = d3.line()
.curve(d3.curveCatmullRom)
.x(d => d.x*width)
.y(d => d.y*height);
const g = svgSelection.append('g').attr('transform',`translate(${100},${100})`)
g.append('g')
.selectAll('path')
.data(links)
.enter()
.append('path')
.attr('d', ({ source, target, data }) =>
line([
{
x: source.x,
y: source.y
}
].concat(
data.points || [],
[ {
x: target.x,
y: target.y
}
])
))
.attr('fill','none')
.attr('stroke','black')
const nodes = g.append('g')
.selectAll('g')
.data(descendants)
.enter()
.append('g')
.attr('transform', ({x, y}) => `translate(${x*400}, ${y*400})`);
nodes.append('circle')
.attr('r',20)
.attr('fill','white')
.attr('stroke','black')
// Add text, which screws up measureement
nodes.append('text').text(d => d.id).attr('text-anchor','middle').attr('alignment-baseline','middle')
yield svgNode;
}
dag = d3.dratify()(grafo)
dagAfter = {
d3.sugiyama()
.layering(d3.layeringCoffmanGraham())
(dag);
return dag;
}
links = {
return dagAfter.links()
}
descendants = {
return dagAfter.descendants()
}
grafo = [
{
"id": "0",
"parentIds": ["8"]
},
{
"id": "1",
"parentIds": []
},
{
"id": "2",
"parentIds": []
},
{
"id": "3",
"parentIds": ["11"]
},
{
"id": "4",
"parentIds": ["12"]
},
{
"id": "5",
"parentIds": ["18"]
},
{
"id": "6",
"parentIds": ["9", "15", "17"]
},
{
"id": "7",
"parentIds": ["3", "17", "20", "21"]
},
{
"id": "8",
"parentIds": []
},
{
"id": "9",
"parentIds": ["4"]
},
{
"id": "10",
"parentIds": ["16", "21"]
},
{
"id": "11",
"parentIds": ["2"]
},
{
"id": "12",
"parentIds": ["21"]
},
{
"id": "13",
"parentIds": ["4", "12"]
},
{
"id": "14",
"parentIds": ["1", "8"]
},
{
"id": "15",
"parentIds": []
},
{
"id": "16",
"parentIds": ["0"]
},
{
"id": "17",
"parentIds": ["19"]
},
{
"id": "18",
"parentIds": ["9"]
},
{
"id": "19",
"parentIds": []
},
{
"id": "20",
"parentIds": ["13"]
},
{
"id": "21",
"parentIds": []
}
]
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.
