chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-10, -10, 400, 400])
.style("font", "10px sans-serif")
.attr("text-anchor", "middle");
svg
.append("defs")
.append("path")
.attr(
"d",
`M 0 ${height / 2} A ${height / 2} ${height / 2} 0 0 1 ${width / 2} 0`
)
.attr("id", "titlePath");
svg
.append("text")
.append("textPath")
.attr("xlink:href", `${window.location.href}#titlePath`)
.text("2021 EMOJI USAGE FREQUENCIES")
.style("font-size", "14")
.attr("startOffset", 180);
svg
.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`)
.attr("y", "0.4em")
.text(d => d.data.Emoji)
.style("font-size", d => Math.sqrt(d.data.value) * fontScale + "px")
.style("font", "Noto Sans");
return svg.node();
}
width = 400
fontScale = 1 * width
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.
