Published
Edited
Feb 23, 2018
2 stars
data=[
{ name: "one", data: [1,2,3] },
{ name: "two", data: [2,3,4] }
]
{
const svg=d3.select(DOM.svg(500,500));
const layer1 = svg.selectAll('g.layer1')
.data(data)
.enter()
.append('g')
.classed('layer1', true);
//here using layer1 to manipulate viz element
const layer2 = layer1.selectAll('g.layer2')
.data((d,i,j)=> {
let num = d3.entries(j)[i].key
return d.data.map((d)=> [d,num])
})
.enter()
.append('g')
.classed('layer2', true);
//here using layer2 to manipulate viz element
layer2.append('rect')
.attr('x', (d,i)=>{
return i*60
})
.attr('y', (d,i)=> d[1]*60)
.attr('width', 50)
.attr('height', 50)
.attr('fill', 'blue');
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.
