Public
Edited
Nov 2, 2022
// source: https://observablehq.com/@observablehq/vega-lite-chart-types
viewof heatmap = vl
.markRect()
.data(sampleData)
.encode(
vl.x().fieldN("col").axis({ title: false, labels: false }),
vl.y().fieldN("row").axis({ title: false, labels: false }),
vl
.color()
.fieldQ("val")
.scale({ scheme: "redyellowblue", domain: [0, 1] }),
vl.tooltip(["row", "col", "val"])
)
.width(1000)
.height(1000)
.render()
sampleData = {
var data = []
var rows = 100
var cols = 100
for( let i = 0; i < cols; i++){
var max = Math.random()
var min = Math.random() * 0.1
var val = min
for( let j = 0; j < rows; j++){
val = val + 0.0005
val = val > max ? max : val
data.push({'row': j, 'col': i, 'val': val})
}
}
return data
}
import { vl } from "@vega/vega-lite-api-v5"
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.
