Freelancing Data Visualization Designer & Artist
Public
Edited
May 6, 2021
2 forks
29 stars
svg = {
const svg = d3.select(DOM.svg(400, 400))
////////////////////////////////////////////////////////////
////////////////// Create hatched patterns /////////////////
////////////////////////////////////////////////////////////
const defs = svg.append("defs")
//Create hatched pattern for pink pattern
const hatch_pattern_1 = defs
.append("pattern")
.attr("id", "hatch-1")
.attr("width", hatch_size)
.attr("height", hatch_size)
.attr("patternTransform", `rotate(${rotation})`)
.attr("patternUnits","userSpaceOnUse") //used to make the pattern independent of location of circle
//Add the actual pattern shape
hatch_pattern_1.append("rect")
.attr("width", hatch_size/2)
.attr("height", hatch_size)
.style("fill", "#ed0c87")
//Create hatched pattern for blue pattern
const hatch_pattern_2 = defs
.append("pattern")
.attr("id", "hatch-2")
.attr("width", hatch_size)
.attr("height", hatch_size)
.attr("patternTransform", `rotate(${rotation})`)
.attr("patternUnits","userSpaceOnUse") //used to make the pattern independent of location of circle
//Add the actual pattern shape
hatch_pattern_2.append("rect")
.attr("x", hatch_size/2) //notice this difference, which moves the blue pattern from the pink
.attr("width", hatch_size/2)
.attr("height", hatch_size)
.style("fill", "rgb(255,0,0)")
////////////////////////////////////////////////////////////
/////////////////////// Draw circles ///////////////////////
////////////////////////////////////////////////////////////
svg.append("circle")
.attr("cx", 150)
.attr("cy", 250)
.attr("r", 100)
.style("fill", "url(#hatch-1)") //pink
svg.append("circle")
.attr("cx", 250)
.attr("cy", 150)
.attr("r", 100)
.style("fill", "url(#hatch-2)") //blue
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.
