frontend + d3
Published
Edited
Aug 7, 2019
1 fork
md`## data`
data = [
{id: 1, scoreHome: 1, scoreAway: 2, homeName: 'bangalang', awayName: 'coco' },
{id: 2, parentId: 1, scoreHome: 3, scoreAway: 4, homeName: 'dsjfklsdl', awayName: 'sedfefd' },
{id: 3, parentId: 1, scoreHome: 0, scoreAway: 1, homeName: 'coco', awayName: 'ejifdjikl'},
{id: 4, parentId: 2, scoreHome: 0, scoreAway: 0, homeName: 'caca', awayName: 'momo'},
]
stratify = d3.stratify()
.id(d => d.id)
.parentId(d => d.parentId);
root = stratify(data)
viewof margin = slider({min: 0, max: 200, value: 50})
viewof width = slider({min: 100, max: 800, value: 800})
viewof height = slider({min: 100, max: 800, value: 800})
viewof nodeWidth = slider({ min: 10, max: 300, value: 100})
viewof nodeHeight = slider({ min: 10, max: 300, value: 100})
tree = d3.tree().nodeSize([nodeWidth, nodeHeight])(root)
bracket = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
// .attr('viewBox', [0,0,width,height])
.style('background-color', 'lightgray');
const g = svg.append('g')
.attr('transform', `translate(${width / 2},${height / 2})`);
const node = g.selectAll('g')
.data(tree.descendants())
node.enter()
.append('g')
.attr('transform', d => `translate(${(width / 2 - margin) - d.y},${d.x})`)
.append('text')
.text(d => d.data.id)
node.exit().remove();
return svg.node();
}
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.
