Data visualization/Interactive media and full-stack data science web app developer.
Published
Edited
May 27, 2021
6 stars
viewof rating = {
shoelace;
var dom = html`
<sl-rating precision=".5" value="4.5"></sl-rating>`;
dom.value = 4.5;
dom.addEventListener("sl-change", e => {
dom.value = e.target.value;
dom.dispatchEvent(new CustomEvent("input"));
});
return dom;
}
rating
//zindex is messed up!? Fixed, Thanks Visnu! (when not using inline, add padding-bottom 400px)
viewof color = {
var dom = html`<sl-color-picker inline></sl-color-picker>`;
dom.addEventListener("sl-change", e => {
dom.value = e.target.value;
dom.dispatchEvent(new CustomEvent("input"));
});
return dom;
}
color
html`<sl-button>Button</sl-button>`
html`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.28/dist/themes/base.css">`
//`<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.28/dist/all.shoelace.js" </script>` //this script tag is still needed for this to work!? Not sure why... (icons break if not present) Update: this is bcos of the setBasepath, issue resolved :D
shoelace = {
var s = await import("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.28/dist/all.shoelace.js");
//for components that use icons.. add shoelace to the cell
s.setBasePath(
"https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.28/dist/"
);
return s;
}
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.
