Interactive data visualization
Public
Edited
Jan 17, 2023
Importers
previewFrame({
width: 500,
height: 500,
render(ctx) {
({...line, stroke: 'red'}).draw(ctx);
({...rect}).draw(ctx);
({...filledRect, rect: [200, 300, 100, 100]}).draw(ctx);
({...circle}).draw(ctx);
({...filledCircle, center: [100, 200]}).draw(ctx);
({...arrow}).draw(ctx);
({...text}).draw(ctx);
},
}, 200)
line = ({
source: [0, 0],
target: [100, 100],
lineCap: 'butt',
lineWidth: 10,
stroke: 'black',
opacity: 1,
draw(ctx) {
ctx.beginPath();
ctx.moveTo(...this.source);
ctx.lineTo(...this.target);
fillAndStroke(ctx, this);
},
})
arrow = ({
source: [200, 200],
target: [400, 400],
lineCap: 'butt',
lineWidth: 10,
stroke: 'black',
opacity: 1,
lineWidth: 10,
triangleHeight: 50,
triangleRatio: 0.4,
triangleInRatio: 0.25,
draw(ctx) {
ctx.globalAlpha = this.opacity;
drawArrow(
this.source,
this.target,
ctx,
this,
);
},
})
rect = ({
rect: [300, 200, 100, 100],
lineJoin: 'miter',
lineWidth: 10,
stroke: 'black',
opacity: 1,
fill: null,
draw(ctx) {
ctx.beginPath();
ctx.rect(...this.rect);
fillAndStroke(ctx, this);
},
})
filledRect = ({
...rect,
fill: 'black',
stroke: null,
})
circle = ({
center: [200, 100],
radius: 50,
lineWidth: 10,
stroke: 'black',
opacity: 1,
fill: null,
draw(ctx) {
ctx.beginPath();
ctx.arc(...this.center, this.radius, 0, 2 * Math.PI);
fillAndStroke(ctx, this);
},
})
filledCircle = ({
...circle,
fill: 'black',
stroke: null,
})
text = ({
center: [400, 100],
text: '123',
family: 'monospace',
size: 120,
style: '',
weight: '',
align: 'center',
baseline: 'center',
lineWidth: 1,
lineJoin: 'butt',
fill: 'black',
stroke: null,
opacity: 1,
draw(ctx) {
ctx.textAlign = this.align;
ctx.textBaseline = this.baseline;
ctx.font = `${this.style} ${this.weight} ${this.size}px ${this.family}`;
if (this.stroke) {
ctx.strokeStyle = this.stroke;
ctx.lineWidth = this.lineWidth;
ctx.lineJoin = this.lineJoin;
ctx.strokeText(this.text, ...this.center);
}
if (this.fill) {
ctx.fillStyle = this.fill;
ctx.fillText(this.text, ...this.center);
}
}
})
function fillAndStroke(ctx, {
fill,
stroke,
lineWidth,
lineJoin,
lineCap,
opacity,
}) {
if (typeof opacity !== 'undefined') {
if (!opacity) return;
ctx.globalAlpha = opacity;
}
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.lineCap = lineCap;
ctx.lineJoin = lineJoin;
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.stroke();
}
}
objs = ({
line,
rect,
filledRect,
circle,
filledCircle,
arrow,
text,
})
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.
