draw = layer => {
layer
.selectAll('rect')
.data(data)
.join('rect')
.attr('data-date', d => d.month)
.attr('data-attr', attr)
.attr('data-value', d => d[attr])
.attr('fill', d => color(d[attr]))
.attr('x', d => x(d.month))
.attr('width', x.bandwidth())
.attr('height', `${pezHeight}px`);
}
color = d3.scaleSequential(
d3.extent(data, d => d[attr]),
d3.interpolateSpectral
)
x = d3
.scaleBand()
.range([0, chartWidth])
.domain(data.map(d => d.month))
.padding(pezPadding)
d3.interpolateReds
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.
