Unlisted
Edited
Oct 24, 2024
Plot.plot({
inset: 6,
width: 928,
height: 628,
grid: false,
marginBottom: 100,
x: { label: null, tickRotate: 90 },
y: { label: "BLEU", grid: true, },
color: {
legend: true,
//scheme: "turbo",
domain: colors.domain(),
range: colors.range(),
},
marks: [
Plot.rectY(
data,
Plot.stackY(
Plot.binX(
{ y: "count", },
{
x: "BLEU",
y: "system_id",
fill: "system_id",
tip: true,
})
)
),
]
});
Plot.plot({
inset: 6,
width: 928,
height: 628,
grid: false,
marginBottom: 100,
x: { label: null, tickRotate: 90 },
y: { label: "BLEU", grid: true, },
color: {
legend: true,
//scheme: "turbo",
domain: colors.domain(),
range: colors.range(),
},
marks: [
Plot.rectY(
data,
Plot.stackY(
Plot.binX(
{ y: "count", },
{
x: "BLEU",
y: "system_id",
fill: "system_id",
tip: true,
}),
// NOTE: the following is what's different from the previous chart
{
fill: "system_id",
order: colors.domain(),
}
)
),
]
});
Plot.plot({
inset: 6,
width: 928,
height: 628,
grid: false,
marginBottom: 100,
x: { label: null, tickRotate: 90 },
y: { label: "BLEU", grid: true, },
color: {
legend: true,
//scheme: "turbo",
domain: colors.domain(),
range: colors.range(),
},
marks: [
Plot.rectY(
data,
Plot.stackY(
Plot.binX(
{ y: "count", },
{
x: "BLEU",
y: "system_id",
fill: "system_id",
order: colors.domain(),
tip: true,
}),
)
),
]
});
data = FileAttachment("figure1.matrix.en-de.BLEU.json").json()
COLOR_COOL = d3.interpolateRgb("#00FFFF", "#FF00FF");
COLOR_WARM = d3.interpolateRgb("#E4FF7A", "#FC7F00");
partition = (all_system_id, fn) =>
// Partition the systems into cool and warm colors.
all_system_id.reduce(
(acc, val, i, arr) => {
acc[fn(val, i, arr) ? 0 : 1].add(val);
return acc;
},
[new Set(), new Set()]
);
// "A", " B (50k)", "M*"
cool_re = /^.(\*| \(.*\))?$/;
all_system_id = Array.from(
new Set(
data.map(d => d.system_id)
));
a = partition(all_system_id, system_id => cool_re.test(system_id));
cool_systems = a[0];
warm_systems = a[1];
colors = d3.scaleOrdinal(
// We have to rebuild the all system_id array or else the colors are weird.
Array.from(cool_systems.keys()).concat(Array.from(warm_systems.keys())),
new Array(
...d3.range(cool_systems.size).map(v => COLOR_COOL(v / (cool_systems.size - 1.))),
...d3.range(warm_systems.size).map(v => COLOR_WARM(v / (warm_systems.size - 1.))),
),
);
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.
