Published
Edited
Oct 31, 2019
1 fork
63 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg = {
//Set-up the SVG
const svg = d3.select(DOM.svg(2*hexRadius, 2*hexRadius + 20))
//Create a group within the SVG and move its center
const g = svg.append("g")
.attr("transform", `translate(${hexRadius},${hexRadius + 10})`)
////////////////////////////////////////////////////////////
/////////////// Create gradients and filters ///////////////
////////////////////////////////////////////////////////////
const defs = g.append("defs")
//Create a hexagonal clipping path
//To make sure no part of the inner circle is ever visible outside of the hexagon
clipToHexagon(defs)
//Sets up the example gradients and filters
//More as backup for you to cheat and peek at the code
//Try to create them yourself first!
setupPredefinedGradientsAndFilters(defs)
///////////////////////////////////////////////////////////
////// Add your code changes here primarily | Part 1 //////
///////////////////////////////////////////////////////////
//Note: you can apply both a filter AND a gradient at the same time!
//But you can only have one gradient (and similarily, one filter) active at the same time
//Note 2: Check out https://gka.github.io/palettes/ if you want to create your own gradient palettes
//Create your gradients or filters......

///////////////////////////////////////////////////////////
////////////////////// END | Part 1 //////////////////////
///////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
/////////////////////// 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()
}
Insert cell
Insert cell
Insert cell
//Create a rainbow linear gradient behind the hexagon that the circles seem to move across
createGradientRainbow = function(defs) {
let gradient = defs.append("linearGradient")
.attr("id", "gradient-demo-rainbow")
.attr("gradientUnits", "userSpaceOnUse") //Don't use the bounding box of each separate circle
//Try commenting the "gradientUnits line above and setting x1 to 0 and x2 to 1 (1 then means 100%)
.attr("x1", -hexWidth/2)
.attr("x2", hexWidth/2)
.attr("y1", 0)
.attr("y2", 0)
//Create a color stop for each color in the color array
//And use the index/location to calculate the % location along the gradient's "directional arrow"
gradient.selectAll("stop")
.data(colors)
.enter().append("stop")
.attr("offset", (_,i) => `${i/(colors.length-1) * 100}%`)
.attr("stop-color", d => d)
}//function createGradientRainbow
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more