Designer. Geek. Beer addict. Data queen.
container = html `<div style="height:400px"></div>`
data = FileAttachment("votes-by-county.json").json()
viewof year = Inputs.range([2000, 2016], {label: "Year", step: 4})
COLORS = {
return {
democrat: [43, 131, 186],
republican: [215, 25, 28],
neutral: [255, 255, 191]
}
}
layer = new PieScatterLayer({
data,
// ScatterplotLayer props
getPosition: d => [d.longitude, d.latitude],
getRadius: d => Math.sqrt(d[year].total),
getFillColor: d => d[year].dem > d[year].rep ? COLORS.democrat : COLORS.republican,
radiusScale: 20,
radiusMinPixels: 1,
// Custom layer props
getBreakdown: d => [
d[year].dem / d[year].total,
d[year].rep / d[year].total
],
colors: [COLORS.democrat, COLORS.republican, COLORS.neutral],
updateTriggers: {
getRadius: [year],
getBreakdown: [year],
getFillColor: [year]
}
})
deckgl.setProps({ layers: [layer] })
defaultProps = {
return {
getBreakdown: {type: 'accessor', value: [0, 0]},
colors: [[255, 0, 0], [0, 255, 0], [0, 0, 255]]
}
}
PieScatterLayer = {
class PieScatterLayer extends deck.ScatterplotLayer {
static defaultProps = defaultProps
static layerName = 'PieScatterLayer' + Date.now()
initializeState() {
super.initializeState()
this.getAttributeManager().addInstanced({
instanceBreakdown: {
size: 2,
accessor: 'getBreakdown'
}
})
}
getShaders() {
return {
...super.getShaders(),
inject: {
'vs:#decl': `
attribute vec2 instanceBreakdown;
varying vec2 vBrackets;
`,
'vs:#main-end': `
vBrackets = vec2(instanceBreakdown.x, instanceBreakdown.x + instanceBreakdown.y);
`,
'fs:#decl': `
uniform vec3 color0;
uniform vec3 color1;
uniform vec3 color2;
varying vec2 vBrackets;
`,
'fs:DECKGL_FILTER_COLOR': `
vec2 uv = geometry.uv;
float r = atan(uv.y, uv.x) / 3.1415927 / 2.0 + 0.5;
if (r <= vBrackets.x) {
color.rgb = color0;
} else if (r <= vBrackets.y) {
color.rgb = color1;
} else {
color.rgb = color2;
}
`
}
}
}
draw(opts) {
const {colors} = this.props
opts.uniforms.color0 = colors[0].map(x => x / 255)
opts.uniforms.color1 = colors[1].map(x => x / 255)
opts.uniforms.color2 = colors[2].map(x => x / 255)
super.draw(opts)
}
}
return PieScatterLayer
}
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.
