svg = {
const svg = d3.select(DOM.svg(2*hexRadius, 2*hexRadius + 20))
const g = svg.append("g")
.attr("transform", `translate(${hexRadius},${hexRadius + 10})`)
const defs = g.append("defs")
clipToHexagon(defs)
setupPredefinedGradientsAndFilters(defs)
////////////////////////////////////////////////////////////
/////////////////////// Draw circles ///////////////////////
////////////////////////////////////////////////////////////
//Create a group to place all the circles in
const circleGroup = g.append("g")
.attr("class", "circle-group")
.attr("clip-path", "url(#clip") //clip it to a hexagonal shape
.style("clip-path", "url(#clip)") //make it work in safari
//Add the circles and set their sizes
const circlesSVG = circleGroup.selectAll(".circle")
.data(circles)
.enter().append("circle")
.attr("class", "circle")
.attr("cx", d => d.newX)
.attr("cy", d => d.newY)
.attr("r", d => d.r)
//Ignore this, this tries to hide what you should recreate yourself below ;)
applyGradients(circlesSVG)
applyFilters(circleGroup, circlesSVG)
applyColorBlends(circleGroup, circlesSVG)
//Place a stroked hexagon on top
strokeHexagon(g)
///////////////////////////////////////////////////////////
////// Add your code changes here primarily | Part 2 //////
///////////////////////////////////////////////////////////
//Tip: something for the color blend needs to be added here
//and one filter needs to applied here instead of to the circlesSVG
circleGroup
//Apply any gradients as fills
//Or filters here
//Or even a color blend effect
circlesSVG
//.style("fill", "url(#gradient-rainbow)") //as an example of how to apply a gradient by its ID
//////////////////////////////////////////////////////////
////////////////////// END | Part 2 //////////////////////
//////////////////////////////////////////////////////////
///////// Ignore the rest /////////
//Stop the circles just to be sure
//This is more an artifact of making this in Observable, then any good coding style
stopCircles(circlesSVG)
updateCircleLocations(circles)
circlesSVG
.data(circles)
.attr("cx", d => d.newX)
.attr("cy", d => d.newY)
//Move the circles within the hexagon
if(play) moveCircles(circlesSVG)
yield svg.node()
}