Plot.plot({
width: 500,
height: 420,
inset: 45,
color: { legend: true },
projection: ternary.projection,
marks: [
Plot.sphere(),
ternary.graticule({ strokeDasharray: "5 1.5" }),
// A blob for each group
Plot.density(
profiles,
ternary.normalize({
a: "designer",
b: "journalist",
c: "developer",
stroke: group,
bandwidth: 35,
thresholds: 2
})
),
Plot.dot(
profiles,
ternary.normalize({
a: "designer",
b: "journalist",
c: "developer",
fill: group,
stroke: "white",
r: 8,
channels: {
label: "name",
journalist: "journalist",
developer: "developer",
designer: "designer"
},
tip: true
})
),
ternary.tickLabels(d3.range(0.5, 1, 0.1), {
fill: "currentColor",
stroke: "white"
}),
ternary.labels(axes, { fontWeight: "bold" })
]
})
Plot.plot({
width: 300,
projection: { type: ternary.projection, inset: 1 },
marks: [
Plot.sphere(),
ternary.graticule(),
Plot.dot(profiles, {
x: (d) => d.designer / 100,
y: (d) => d.journalist / 100,
symbol: "triangle",
fill: group,
r: 5
})
]
})
Plot.plot({
width: 350,
projection: { type: ternary.projection, inset: 25 },
marks: [
Plot.sphere(),
ternary.graticule(),
ternary.tickLabels(),
ternary.labels(["Bob", "Cat", "C"])
]
})
projection = ({ width, height, angle = 0 }) => {
const sqrt3_2 = Math.sqrt(3) / 2;
let scale = 1;
let tx = 0;
let ty = 0;
const ca = Math.cos((angle * Math.PI) / 180);
const sa = Math.sin((angle * Math.PI) / 180);
const q = (x, y) => [x + y * 0.5, -y * sqrt3_2];
const p = (x, y) => {
[x, y] = q(x, y);
return [scale * (x * ca + y * sa) + tx, scale * (y * ca - x * sa) + ty];
};
const projection = d3.geoTransform({
point: function (x, y) {
this.stream.point(...p(x, y));
},
sphere: function () {
this.stream.polygonStart();
this.stream.lineStart();
this.stream.point(...p(0, 0));
this.stream.point(...p(0, 1));
this.stream.point(...p(1, 0));
this.stream.point(...p(0, 0));
this.stream.lineEnd();
this.stream.polygonEnd();
}
});
// Fit bounds (with angle!)
const [[x1, y1], [x2, y2]] = d3
.geoPath(projection)
.bounds({ type: "Sphere" });
const w = width / (x2 - x1);
const h = height / (y2 - y1);
scale = Math.min(w, h);
tx = w > scale ? width / 2 - (scale * (x2 + x1)) / 2 : -x1 * scale;
ty = w < scale ? height / 2 - (scale * (y2 + y1)) / 2 : -y1 * scale;
return projection;
}
normalize = ({ a, b, c, ...options } = {}) => {
if (a == null) throw new Error("missing channel a");
if (b == null) throw new Error("missing channel b");
if (c == null) throw new Error("missing channel c");
const [X, setX] = Plot.column(a); // Using a hides x from the tip!
const [Y, setY] = Plot.column(b);
return Plot.transform({ x: X, y: Y, ...options }, (data, facets) => {
const A = Plot.valueof(data, a);
const B = Plot.valueof(data, b);
const C = Plot.valueof(data, c);
setX(A.map((d, i) => d / (A[i] + B[i] + C[i])));
setY(B.map((d, i) => d / (A[i] + B[i] + C[i])));
return { data, facets };
});
}
graticule = (options) =>
Plot.link(
d3.range(0.1, 1, 0.1).flatMap((d) => [
[d, 0, 0, d],
[d, 0, d, 1 - d],
[0, d, 1 - d, d]
]),
{
x1: "0",
y1: "1",
x2: "2",
y2: "3",
stroke: "#aaa",
strokeWidth: 0.5,
...options
}
)
tickLabels = (
data = d3.range(0.1, 1, 0.1),
{ tickFormat = ".0%", ...options } = {}
) => {
const text = d3.format(tickFormat);
return Plot.marks(
Plot.text(data, {
x: (d) => 1 - d,
y: 0,
text,
rotate: 60,
textAnchor: "start",
dx: 2,
dy: 5,
...options
}),
Plot.text(data, {
x: 0,
y: (d) => d,
text,
rotate: 0,
textAnchor: "end",
dx: -5,
dy: 0,
...options
}),
Plot.text(data, {
x: (d) => d,
y: (d) => 1 - d,
text,
textAnchor: "start",
rotate: -60,
dx: 2,
dy: -5,
...options
})
);
}
labels = (data, options) =>
Plot.text(data, {
x: (_, i) => [1.075, -0.025, -0.025][i],
y: (_, i) => [-0.05, 1.05, -0.05][i],
text: Plot.identity,
...options
})
ternary = ({
projection,
graticule,
normalize,
sphere: Plot.sphere,
tickLabels,
labels
})
axes = ["designer", "journalist", "developer"]
profiles = [
{ journalist: 75, developer: 25, designer: 0, name: "Alissa Combs" },
{ journalist: 70, developer: 10, designer: 20, name: "Sidney Gibson" },
{ journalist: 75, developer: 20, designer: 5, name: "Evan Guerrero" },
{ journalist: 5, developer: 60, designer: 35, name: "Marquise Walsh" },
{ journalist: 10, developer: 80, designer: 10, name: "Terry Mason" },
{ journalist: 10, developer: 90, designer: 0, name: "Megan Boyle" },
{ journalist: 20, developer: 70, designer: 10, name: "Aliana Cline" },
{ journalist: 10, developer: 20, designer: 70, name: "Esther Coffey" },
{ journalist: 15, developer: 5, designer: 80, name: "Giuliana Booker" },
{ journalist: 10, developer: 10, designer: 80, name: "Deandre Roy" },
{ journalist: 20, developer: 10, designer: 70, name: "Cruz Day" }
]
group = Object.assign((d) => d3.greatest(axes, (k) => d[k]), { label: "group" })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.