Freelancing Data Visualization Designer & Artist
Published
Edited
Nov 5, 2020
6 stars
svg = {
const svg = d3.select(DOM.svg(400, 400))
////////////////////////////////////////////////////////////
///////////////// Create drop shadow filter ////////////////
////////////////////////////////////////////////////////////
const defs = svg.append("defs")
const filter = defs.append("filter").attr("id","shadow")
filter.append("feColorMatrix")
.attr("type", "matrix")
.attr("values", `0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ${shadow_opacity} 0`)
filter.append("feGaussianBlur")
.attr("stdDeviation",shadow_intensity)
.attr("result","coloredBlur")
const feMerge = filter.append("feMerge")
feMerge.append("feMergeNode").attr("in","coloredBlur")
feMerge.append("feMergeNode").attr("in","SourceGraphic")
////////////////////////////////////////////////////////////
/////////////////////// Draw circle ////////////////////////
////////////////////////////////////////////////////////////
svg.append("circle")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 100)
.style("fill", "white")
.style("filter", "url(#shadow)") //note that it's set as the FILTER style, not the FILL style
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.
