The Washington Post graphics team
Public
Edited
Mar 28, 2023
2 stars
{
const svg = d3.create("svg")
.datum(radius)
.style("overflow", "visible")
.attr("height", r => r * 2 + r / pi)
svg.append("polyline")
.attr("transform", r => `translate(${[100, r * 2]})`)
.attr("points", balloon)
.attr("fill", "steelblue")
.attr("stroke", "blue");
return svg.node();
}
balloon = radius => {
const points = 64,
startCutoff = 4,
endCutoff = points + 1 - startCutoff,
bezierOffset = -.3,
circle = geometric.polygonRegular(
points,
pi * radius ** 2
),
startCutoffPoint = circle[startCutoff],
endCutoffPoint = circle[endCutoff],
taperTo = [
(startCutoffPoint[0] + endCutoffPoint[0]) / 2,
circle[0][1] + radius / pi
];
return [
...swoopy.quad(taperTo, startCutoffPoint, bezierOffset),
...circle.filter((d, i) => i >= startCutoff && i <= endCutoff),
...swoopy.quad(endCutoffPoint, taperTo, bezierOffset)
]
}
// As a path
`M${balloon(radius).join("L")}`
geometric = require("geometric@2");
d3 = require("d3-selection@3");
swoopy = require("swoopy@0.0.3");
pi = Math.PI
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.
