Published unlisted
Edited
Nov 20, 2020
md`# How can I change the axis titles freely in Vega-Lite, without changing the key of the data`
// require D3 library
d3 = require('d3');
import {vl} from '@vega/vega-lite-api'
mat = FileAttachment("practice.csv")
data = d3.csvParse(await mat.text());
viewof splom = vl.markCircle({opacity: 0.5, size: 15})
.data(data)
.encode(
vl.x().fieldQ(vl.repeat("row")).scale({ zero: false }),
vl.y().fieldQ(vl.repeat("column")).scale({ zero: false }),
vl.color().fieldN("type").scale({ scheme: "set2" })
)
.width(Math.max(width / 4 - 80, 100))
.height(Math.max(width / 4 - 80, 100))
.repeat({
row: ["A", "B", "C"],
column: ["C", "B", "A"]
})
.render()
viewof marginalHistograms_1 = {
const x = vl.x().fieldQ("A").scale({ zero: false });
const y = vl.y().fieldQ("B").scale({ zero: false });
const color = vl.color().fieldN("type").scale({ scheme: "set2" });
const scatter = vl.markCircle({opacity: 0.5, size: 15})
.encode(x, y, color);
const right = vl.markBar()
.encode(
y.axis(null),
vl.x().count(),
color
)
.width(50);
const top = vl.markBar()
.encode(
x.axis(null),
vl.y().count(),
color
)
.height(50);
return vl.vconcat(top, vl.hconcat(scatter, right))
.data(data)
.config({ concat: { spacing: 0 } })
.render();
}
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.
