Freelancing Data Visualization Designer & Artist
Published
Edited
Oct 31, 2019
1 fork
63 stars
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()
}
//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
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.
