demo = {
const root = d3.select(DOM.svg(W, H))
root
.append('g')
.attr('class', 'plots')
const rand = d3.randomNormal()
const dataset = d3.range(8).map(function(n) {
return d3.range(30).map(_ => parseInt(rand() * 100) / 100 + n * 0.1).sort(d3.ascending)
})
const stats = dataset.map(function(d) {return d3.boxplotStats(d);})
const vertical = options.indexOf('vertical') !== -1
const colors = d3.schemeCategory10
const scale = d3.scaleLinear()
.domain([-4, +4])
.range(vertical ? [H - M.T - M.B, M.T] : [M.L, W - M.L - M.R])
const band = d3.scaleBand()
.domain(d3.range(stats.length))
.range(vertical ? [M.L, W - M.L - M.R] : [M.T, H - M.T - M.B])
.paddingInner(options.includes('minimalStyle') ? 0 : 0.3)
.paddingOuter(options.includes('minimalStyle') ? 2 : 0.2)
const plot = d3.boxplot()
.scale(scale)
.jitter(jitter)
.opacity(opacity)
.showInnerDots(options.includes('showInnerDots'))
.symbol(options.includes('useSymbolTick') ? d3.boxplotSymbolTick : d3.boxplotSymbolDot)
.bandwidth(band.bandwidth())
.boxwidth(options.includes('minimalStyle') ? 6 : band.bandwidth())
.vertical(vertical)
.key(d => d)
root.select('g.plots')
.attr('transform', 'translate(' + [M.L, M.T] + ')')
.selectAll('.plot').data(stats)
.join('g')
.attr('class', 'plot')
.attr('transform', (_, i) => `translate(${vertical ? [band(i), 0] : [0, band(i)]})`)
.attr('color', (_, i) => options.includes('color') ? colors[i / 2|0] : '#000')
.call(plot)
return root.node()
}
{
const w = 300, h = 20, root = d3.select(DOM.svg(w, h))
const data = [1, 3, 3.4, 3.5, 3.6, 5, 6]
const stats = d3.boxplotStats(data)
const x = d3.scaleLinear()
.domain(d3.extent(data))
.range([10, w - 10])
const boxplot = d3.boxplot()
.jitter(0)
.showInnerDots(false)
.scale(x)
root.datum(stats).call(boxplot)
return root.node()
}
{
const data = [
{x: 5, y: 7},
{x: 1, y: 3},
{x: 2, y: 1},
{x: 4, y: 6},
{x: 3, y: 4}
]
data.sort(function(a, b) {return d3.ascending(a.x, b.x);})
return d3.boxplotStats(data, function(d) {return d.x;})
}
d3 = ({
...await require("d3@5"),
...await require('d3-boxplot@1.0.0')
})
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.
