pv = FileAttachment("protovis.js")
.text()
.then(d => eval(`(function() { ${d}; return pv; })()`))
{
new pv.Panel()
.width(150)
.height(150)
.anchor("center")
.add(pv.Label)
.text("Hello, protovis!")
.root.render();
return last();
}
{
/* Sizing and spacing parameters. */
var h = 20,
ch = 24,
cw = 11;
/* Bertin's order, grouping metrics by seasonal pattern. */
var order = [18, 17, 19, 7, 10, 3, 11, 12, 15, 13, 0, 1, 6, 8, 9, 16, 5, 2, 4, 14];
/* Compute the mean per metric. */
var type = pv.nest(hotel).key(d => d.type),
means = type.rollup(values => pv.mean(values, d => d.count));
/* The root panel. */
var vis = new pv.Panel().width(520).height(520);
/* A panel per series, with a bar chart and label. */
vis
.add(pv.Panel)
.data(pv.permute(type.entries(), order))
.top(function() {
return ch * (this.index + 1);
})
.height(h)
.add(pv.Label)
.font("13px Georgia")
.left(cw * 24 + 8)
.bottom(0)
.text((x, d) => d.key)
.add(pv.Bar)
.def("y", d => pv.Scale.linear(0, pv.max(d.values, d => d.count)))
.data(d => pv.repeat(d.values))
.left(function() {
return cw * this.index;
})
.bottom(0)
.width(cw)
.height(function(d) {
return this.y()(d.count) * h;
})
.strokeStyle("#000")
.lineWidth(1)
.antialias(false)
.fillStyle(d => (d.count > means[d.type] ? "#000" : null));
/* Month labels. */
vis
.add(pv.Label)
.data(pv.repeat("JFMAMJJASOND".split("")))
.top(function() {
return this.index % 6 > 2 ? 16 : 14;
})
.left(function() {
return cw * (this.index + .5);
})
.textAlign("center")
.font("bold 15px Arial");
vis.render();
return last();
}
// protovis attaches an SVG element to the DOM. Find and return it.
// (not foolproof but good enough for a vintage notebook)
function last() {
return html`${[...document.body.querySelectorAll("svg")].pop()}`;
}
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.
