Web developer and autodidact with an interest in creative coding.
Unlisted
Edited
May 27
Paused
1 star
<style>
.${scope} {
overflow: auto;
max-width: 100%;
font: 13px/1.5 var(--sans-serif);
}
.${scope} * {
box-sizing: border-box;
}
.${scope} ul {
list-style: none;
display: flex;
gap: 4px;
padding: 0;
max-width: none;
flex-direction: column;
}
.${scope} ul[data-depth="0"],
.${scope} ul[data-depth="1"] {
flex-direction: row;
}
.${scope} li {
border: 1px solid #aaa;
border-radius: 8px;
padding: 4px;
}
.${scope} summary {
cursor: pointer;
max-width: max-content;
display: flex;
gap: 4px;
margin-bottom: 4px;
position: relative;
}
.${scope} summary:before {
content: "▶";
position: absolute;
}
.${scope} details[open] > summary:before {
content: "▼";
}
.${scope}-name {
min-width: 200px;
max-width: 400px;
display: block;
padding-left: 14px;
padding-right: 7px;
}
${
d3.schemePastel1.map((c, i) => `.${scope} [data-depth="${i}"] > li { background: ${c} }`).join("\n")
}
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.
