Published
Edited
Feb 28, 2021
{
const node = DOM.svg(
width ,
height
);
const svg = d3.select(node);
// defs
svg
.append('defs')
.append ('filter')
.attr('id','f1')
.attr('x','0')
.attr('y','0')
.attr('width','120%')
.attr('height','120%');
svg.select('filter')
.append('feOffset')
.attr('dx',10)
.attr('dy',10);
svg.select('filter')
.append('feGaussianBlur')
.attr('stdDeviation','2');
svg
.append('rect')
.attr('x',20)
.attr('y',20)
.attr('width',120)
.attr('height',100)
.attr('filter','url(#f1)');
svg
.append('rect')
.attr('x',28)
.attr('y',28)
.attr('width',120)
.attr('height',100)
.attr('ry',4)
.attr('fill','blue');
/* svg code: <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> */
return node;
}
height = 300
width = 800
d3 = require("d3@5")
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.
