here to learn
// Here's an example CSS style element that makes outlined "source" text easier to read
sourceStyle = html`<style>
.source {
margin: 0px;
cursor: pointer;
border:2px currentColor solid;
border-radius:7px;
display:inline-block;
padding:7px
}
.source[data-commentonstatus="Show"] {
border:1px currentColor dashed;
}
.source p {
margin: 0px;
padding: 0px;
}
.source pre {
margin: 0px;
padding: 0px;
}
</style>`
// Here's an example CSS style element that makes outlined "fancy" text harder to read
fancyStyle = html`<style>
.fancyComment {
color: green;
}
.fancy {
margin: 0px;
cursor: pointer;
border:2px red dotted;
border-radius:7px;
display:inline-block;
padding:7px
}
.fancy[data-commentonstatus="Show"] {
border:4px purple groove;
}
.fancy p {
color: orange;
margin: 0px;
padding: 0px;
}
.fancy pre {
color: blue;
margin: 0px;
padding: 0px;
}
</style>`
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.
