Public
Edited
Apr 2, 2023
map_square = vegalite({
padding: 75,
width,
height: width * .625,
data: {
values: usGrid
},
encoding: {
x: {
field: "col",
type: "quantitative"
},
y: {
field: "row",
type: "quantitative",
scale: {
reverse: true, domain: [0.5, 7]
}
},
text: {
field: "code",
type: "nominal"
}
},
layer: [
{
mark: {
type: "square",
color: "#f5f5f5", stroke: 0.2,
stokeWidth: .5, size: 7000
}
},
{
mark: {
type: "text", color: "black", size: 12.5,
}
}
],
config: {
view: {
stroke: null
},
axis: {
grid: false, domain: false, labels: false,
ticks: false, title: false
}
}
})
map_circle = vegalite({
padding: 75,
width: 800,
height: 500,
data: {
values: usGrid
},
encoding: {
x: {
field: "col",
type: "quantitative"
},
y: {
field: "row",
type: "quantitative",
scale: {
reverse: true, domain: [0.5, 7]
}
},
text: {
field: "code",
type: "nominal"
}
},
layer: [
{
mark: {
type: "circle",
color: "#ffffff",
stroke: 1, size: 3000
}
},
{
mark: {
type: "text", color: "black", size: 12
}
}
],
config: {
view: {
stroke: null
},
axis: {
grid: false, domain: false, labels: false,
ticks: false, title: false
}
}
})
map_text = vegalite({
padding: 75,
width: 800,
height: 500,
data: {
values: usGrid
},
encoding: {
x: {
field: "col",
type: "quantitative"
},
y: {
field: "row",
type: "quantitative",
scale: {
reverse: true, domain: [0.5, 7]
}
},
text: {
field: "code",
type: "nominal"
}
},
layer: [
{
mark: {
type: "circle", size: 1
}
},
{
mark: {
type: "text", color: "black", size: 18
}
}
],
config: {
view: {
stroke: null
},
axis: {
grid: false, domain: false, labels: false,
ticks: false, title: false
}
}
})
vegalite = require("@observablehq/vega-lite")
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.
