map = vegalite({
padding: 50,
width: 800,
height: 500,
data: {
values: grid
},
encoding: {
x: {
field: "col",
type: "quantitative"
},
y: {
field: "row",
type: "quantitative",
scale: {
reverse: true,
domain: [0.5, 5.5]
}
},
text: {
field: "name",
type: "nominal"
}
},
layer: [
{
mark: {
type: "square",
color: "#494F59",
size: 9000
}
},
{
mark: {
type: "text",
color: "white",
size: 12.5
}
}
],
config: {
font: "Ubuntu Condensed",
view: {
stroke: null
},
axis: {
grid: false,
domain: false,
labels: false,
ticks: false,
title: false
}
}
})
html`
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<style>
canvas.marks {
font-family: 'Ubuntu Condensed', sans-serif;
}
</style>
`
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.
