{
// lets first define our svg
const height = 300;
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
// Okay now that we have the two circles lets apply a filter to start to "blob" them together
// Start with defining a filter
const filter = svg.append('defs')
.append('filter')
.attr('id', 'blob-filter'); // Were going to use this identifier as a refence to apply the filter to the circle group lets do that
// First lets blur the colors
filter.append('feGaussianBlur')
.attr('stdDeviation', '10'); // lets play with this to get an idea. 10 seems okay
// Now lets try to blob these colors together
filter.append('feColorMatrix')
// Lets play around with these values to get an idea
.attr('values', `0 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 20 -10`); // Okay those settings seem fine.. let me know if you want a video going further into this color matrix
// Now lets draw two circles..
// We'll put these circles in a group first
const circleGroup = svg.append('g');
const leftCircle = circleGroup.append('circle')
.attr('cx', width / 2 - 50) // Lets move the circle to the left a little
.attr('cy', height / 2)
.attr('r', 100)
.attr('fill', 'salmon');
const rightCircle = circleGroup.append('circle')
.attr('cx', width / 2 + 50) // Lets move the circle to the right a little
.attr('cy', height / 2)
.attr('r', 50)
.attr('fill', 'orange');
circleGroup.style('filter', 'url(#blob-filter)'); // Alright we've applied the filter but it's empty lets make the filter
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.
