Public
Edited
Aug 30, 2024
canvasStyles = html`<style>
.canvas-container {
display: grid;
grid-template-columns: 1.5fr 1.5fr 2fr 1.5fr 1.5fr;
grid-template-rows: auto auto auto auto;
gap: 10px;
padding: 20px;
background-color: #f9f9f9;
border: 2px solid #ddd;
font-family: Arial, sans-serif;
}
.canvas-item {
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.canvas-item h3 {
margin-top: 0;
font-size: 14px;
color: #333;
}
.span-2 {
grid-column: span 2;
}
.span-3 {
grid-column: span 3;
}
.span-5 {
grid-column: span 5;
}
.row-2 {
grid-row: span 2;
}
</style>`
document.head.appendChild(canvasStyles)
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.
