Information designer. Environment, science, tech & culture. Carbon-neutral. "Move quietly and plant things."
Published
Edited
Jun 18, 2018
1 star
// The width and height of the SVG are the same
width = 400
// Here are the positions and colours of the circles
circles = [[1/2, 1/3, "#ff0000"],[1/3, 2/3, "#00ff00"],[2/3, 2/3, "#0000ff"]]
svg1 = {
const svg = DOM.svg(width, 400)
// We're using D3 to plot the circles
d3.select(svg)
.selectAll("circle")
.data(circles)
.enter()
.append("circle")
.attr("cx", (number) => (number[0] * width))
.attr("cy", (number) => (number[1] * width))
.attr("r", width/4)
.attr("fill", (number) => number[2])
return svg
}
// The 90 on the end of the hex code reduces the opacity of the colour.
circles2 = [[1/2, 1/3, "#ff000090"],[1/3, 2/3, "#00ff0090"],[2/3, 2/3, "#0000ff90"]]
circles3 = [[1/2, 1/3, "#ff0000"],[1/3, 2/3, "#00ff00"],[2/3, 2/3, "#0000ff"]]
// This is the blend mode I've chosen for this example
style3 = "multiply"
svg3 = {
const svg = DOM.svg(width, height)
d3.select(svg)
.selectAll("circle")
.data(circles3)
.enter()
.append("circle")
.attr("cx", (number) => (number[0] * width))
.attr("cy", (number) => (number[1] * height))
.attr("r", width/4)
.attr("fill", (number) => number[2])
.style("mix-blend-mode", style3) // This line is new!
return svg
}
big_svg = {
const circleHeight = 200
const height = styles.length * circleHeight;
const svg = DOM.svg(width, height);
const circles4 = [[1/3, "#ff0000"],[1/2, "#00ff00"],[2/3, "#0000ff"]]
let yArray = Array.from(styles.keys()).map((y) => 100+(y*circleHeight))
let y = d3.scaleOrdinal().domain(styles).range(yArray);
let plotArray = []
for (let i = 0; i < styles.length; i++) {
for (let j = 0; j < circles2.length; j++) {
plotArray.push({"style": styles[i],
"x": 150 + circles4[j][0] * circleHeight,
"y": y(styles[i]),
"fill": circles4[j][1]
})
}
}
d3.select(svg)
.selectAll("text")
.data(plotArray)
.enter()
.append("text")
.text((item) => item.style)
.attr("x", "10")
.attr("y", (item) => item.y)
d3.select(svg)
.selectAll("circle")
.data(plotArray)
.enter()
.append("circle")
.attr("cx", (item) => item.x)
.attr("cy", (item) => item.y)
.attr("r", circleHeight/2 - 20)
.attr("fill", (item) => item.fill)
.style("mix-blend-mode", (item) => item.style)
return svg
}
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.
