Published
Edited
Apr 21, 2020
md`# Untitled`
{
var margin = {top: 30, right: 30, bottom: 30, left: 30};
const width = 800;
const height = 400;
//Create scale
var xScale = d3.scaleLinear()
.domain([-1.5, 1.5])
.range([-width/2, width/2]);
//Create SVG
var svg = d3.select(DOM.svg(width, height))
const g = svg
.append("g")
.style("filter", "url(#gooey)") //Set the filter on the container svg
.attr("transform", "translate(" + (width/2 + margin.left) + "," +(height/2 + margin.top) + ")");
//SVG filter for the gooey effect
//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooey');
filter.append('feGaussianBlur')
.attr('in','SourceGraphic')
.attr('stdDeviation','10')
.attr('result','blur');
filter.append('feColorMatrix')
.attr('in','blur')
.attr('mode','matrix')
.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7')
.attr('result','gooey');
filter.append('feComposite')
.attr('in','SourceGraphic')
.attr('in2','gooey')
.attr('operator','atop');
//Append circle at center
g.append("circle")
.attr("class", "centerCircle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 40)
.style("fill", "#81BC00");
//Create the circles that will move out and in the center circle
var steps = 15;
g.selectAll(".flyCircle")
.data(d3.range(steps).map(function(num) {return (num/steps)*(2*Math.PI); }))
.enter().append("circle")
.attr("class", "flyCircle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 15)
.style("fill", "#81BC00");
updateCircles(svg,xScale,steps)
yield svg.node();
}
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.
