// The curly bracket opens a 'block'
{
// Create an SVG element: width is a variable
// made available from the Observable standard lib.
let H = 1000;
const node = DOM.svg(width, H)
// Wrap the SVG element in a d3 object:
// it's pretty common when using d3.
const svg = d3.select(node)
svg.style('transform','scale(1,0.5773) rotate(-45deg)')
.style('background-color','#d4d4d4')
let g = svg.append('g').attr('transform', 'translate('+width/2+', '+H/2+')');
g.append('circle')
.attr('r',sliderValue)
.attr('fill','white')
.attr('stroke','red')
.attr('stroke-width', 1)
let circle = g.selectAll('circle')
.data(contours)
.enter()
.append('circle')
.attr('r',function(d){return d})
.attr('fill','white')
.attr('stroke','black')
.attr('stroke-width', 0.5)
.attr('transform', function(d,i){
return 'translate('+i+'0,-'+i+'0)'
})
// Finally, the block returns the SVG element, which is made
// available via the d3 `node` function.
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.
