Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Jul 28, 2020
23 stars
height = 400
view = new AutoLayout
.View({constraints: AutoLayout.VisualFormat.parse(input.split(/\n|\r\n/g), {extended: true})})
.setSize(width, height)
function preview(view) {
return html`<div style="position: relative; width: ${view.width}px; height: ${view.height}px;">
${Object.entries(view.subViews).map(([name, view]) => presubview(view, name))}
</div>`;
}
function presubview(view, textContent) {
return Object.assign(document.createElement("div"), {
textContent,
style: `
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font: 12px var(--sans-serif);
border-radius: 4px;
border: solid 1px #777;
box-sizing: border-box;
top: ${view.top}px;
left: ${view.left}px;
width: ${view.width}px;
height: ${view.height}px;
background: rgba(0,0,0,0.12);
`
});
}
AutoLayout = require("autolayout@0.7")
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.
