Published
Edited
Dec 8, 2019
Insert cell
Insert cell
w = 25
Insert cell
h = 6
Insert cell
part2 = vl
.markSquare({ size: width })
.data([...data].reverse())
.encode(
vl
.y()
.fieldQ('r')
.scale({ reverse: true })
.axis(null),
vl
.x()
.fieldQ('c')
.axis(null),
vl
.color()
.fieldO('p')
.scale({ range: ['white', 'red', 'blue'] })
.legend(false),
vl
.opacity()
.fieldQ('p')
.scale({ domain: [0, 1, 2], range: [1, 1, 0] })
.legend(false)
)
.width(width)
.height((width / w) * h)
.autosize('fit')
.render()
Insert cell
part1 = counts(1).get(layer) * counts(2).get(layer)
Insert cell
counts = v => d3.rollup(data.filter(p => p.p === v), d => d.length, d => d.l)
Insert cell
layer = [...counts(0).entries()].sort((a, b) => a[1] - b[1])[0][0]
Insert cell
Insert cell
d3 = require('d3-array@2', 'd3-selection@1')
Insert cell
import { vl } from '@vega/vega-lite-api'
Insert cell
Insert cell

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.
Learn more