colR = d3.scaleLinear([0, 0.4, 1], ["#377eb8", "#ffff33", "#e41a1c"])
colorFunction = (cell) => {
const v = cell.revind;
let t = (v - 1200) / (3700 - 1200);
t = t > 1 ? 1 : t < 0 ? 0 : t;
return colR(t);
}
styleColor = [
new g.ShapeColorSizeStyle({
color: colorFunction,
blendOperation: (z) => (z < 20 ? "multiply" : "source-over")
}),
strokeStyle
]
styleColorSize = [
new g.ShapeColorSizeStyle({
size: (cell, r, z, max) => r * scale(cell.ind / max),
viewScale: (cells) => d3.max(cells, (cell) => +cell.ind),
color: colorFunction,
blendOperation: (z) => (z < 20 ? "multiply" : "source-over")
})
]
styleColorAlpha = [
new g.ShapeColorSizeStyle({
viewScale: (cells) => d3.max(cells, (cell) => +cell.ind),
color: (cell, r, z, max) => {
const v = cell.revind;
let t = (v - 1200) / (3700 - 1200);
t = t > 1 ? 1 : t < 0 ? 0 : t;
const color = d3.color(colR(t));
color.opacity = scale(cell.ind / max);
return color;
},
blendOperation: (zf) => (zf < 20 ? "multiply" : "source-over")
}),
strokeStyle
]
scale = g.powerScale(stretch)
(map.layers = [backgroundLayer1, backgroundLayer2, gridLayer, labelLayer])
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.
