Published
Edited
Jun 15, 2020
Importers
data = (await require('vega-datasets'))['movies.json']()
heatMap = {
const chart = await vegalite({
mark: {type: "rect"},
data: {name: "values", values: transform(data) },
encoding: {
x: {
field: "col",
type: "nominal",
axis: { labelAngle: 0, title: null, orient: "top"},
sort: Object.keys(data[0])
},
y: { field: "row", type: "nominal", axis: null},
color: { field: "value", type: "nominal", sort: ["Not Missing", "Missing"], legend: {title: null, orient: "top"}}
},
width: {step: 100},
height: {step: 1}
})
return html`<div style="overflow: auto; height: ${height}px">${chart}</div>`
}
notNull = (value) => {
if (value) {
return "Not Missing"
} else if (value === 0) {
return "Not Missing"
} else {
return "Missing"
}
}
transform = (data) => {
const heatMap = []
for (let i = 0; i < data.length; i++) {
for (const prop in data[i]) {
heatMap.push({
row: i,
col: prop,
value: notNull(data[i][prop])
})
}
}
return heatMap
}
height = 400
width = 800
vegalite = require("@observablehq/vega-lite")
html`
<style>
.container {
width: ${width}px;
height: ${height}px;
overflow: auto;
}
</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.
