html`
<style>
.container{
height: 95%;
background: white;
padding: 10px;
display:grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(12,1fr);
}
.cell{
background-color: skyblue;
border: 1px black solid;
text-align: center;
}
.item1{
grid-column-start:1;
grid-column-end:2;
grid-row-start:1;
grid-row-end:12;
}
.item2{
grid-column-start:2;
grid-column-end:3;
grid-row-start:1;
grid-row-end:4;
}
.item3{
grid-column-start:2;
grid-column-end:3;
grid-row-start:5;
grid-row-end:8;
}
.item4{
grid-column-start:2;
grid-column-end:3;
grid-row-start:9;
grid-row-end:12;
}
.item5{
grid-column-start:1;
grid-column-end:2;
grid-row-start:12;
grid-row-end:13;
}
.item6{
grid-column-start:2;
grid-column-end:3;
grid-row-start:4;
grid-row-end:5;
}
.item7{
grid-column-start:2;
grid-column-end:3;
grid-row-start:8;
grid-row-end:9;
}
.item8{
grid-column-start:2;
grid-column-end:3;
grid-row-start:12;
grid-row-end:13;
}
.mysvg{
height:100%;
width:100%;
}
</style>
`
slider1 = Range()
slider2 = Range()
slider3 = Range()
slider4 = Range()
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.
