Published
Edited
Oct 19, 2020
{
const AVATAR_SIZE = 256,
BORDER_WIDTH = 1,
LABEL_SIZE = 140
let svg = d3.create("svg")
.attr("width", AVATAR_SIZE)
.attr("height", AVATAR_SIZE)
svg.append("circle")
.attr("cx", AVATAR_SIZE/2)
.attr("cy", AVATAR_SIZE/2)
.attr("r", (AVATAR_SIZE - BORDER_WIDTH)/2)
.attr("fill", "orange")
.attr("opacity", 0.25)
.attr("stroke", "steelblue")
.attr("stroke-width", BORDER_WIDTH)
svg.append("text")
.text("VS")
.attr("x", AVATAR_SIZE/2)
.attr("y", AVATAR_SIZE/2 + 45)
.attr("text-anchor", "middle")
.attr("font-family", "Comic Sans MS") // Papyrus
.attr("font-size", LABEL_SIZE)
return svg.node()
}
{
// Inspired by auto-generated https://reviews.llvm.org avatar.
const AVATAR_SIZE = 256,
BORDER_WIDTH = 30,
LABEL_SIZE = 190
let svg = d3.create("svg")
.attr("width", AVATAR_SIZE)
.attr("height", AVATAR_SIZE)
svg.append("rect")
.attr("width", AVATAR_SIZE)
.attr("height", AVATAR_SIZE)
.attr("rx", 20)
.attr("fill", "#9AA27A")
.attr("stroke", "#3C3F2F")
.attr("stroke-width", BORDER_WIDTH)
svg.append("text")
.text("V")
.attr("x", AVATAR_SIZE/2)
.attr("y", AVATAR_SIZE/2 + 65)
.attr("text-anchor", "middle")
.attr("fill", "#F5F6F2")
.attr("font-family", "Optima Bold")
.attr("font-size", LABEL_SIZE)
return svg.node()
}
d3 = require("d3@6")
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.
