Public
Edited
May 2, 2024
Importers
Plot.lineY(aapl, {
x: "Date",
y: "Close",
stroke: "var(--theme-foreground-focus)"
}).plot()
<div class="red">I am red text.</div>
<div class="warning" label="⚠️ Danger ⚠️">No lifeguard on duty. Swim at your own risk!</div>
<div class="grid grid-cols-4">
<div class="card"><h1>A</h1></div>
<div class="card"><h1>B</h1></div>
<div class="card"><h1>C</h1></div>
<div class="card"><h1>D</h1></div>
</div>
<div class="grid grid-cols-2">
<div class="card"><h1>A</h1>1 × 1</div>
<div class="card grid-rowspan-2"><h1>B</h1>1 × 2</div>
<div class="card"><h1>C</h1>1 × 1</div>
<div class="card grid-colspan-2"><h1>D</h1>2 × 1</div>
</div>
<div class="grid grid-cols-2">
<div class="card">Call me Ishmael.</div>
<div class="card">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</div>
<div class="card">It is a way I have of driving off the spleen and regulating the circulation.</div>
</div>
<style>
:root {
--syntax-keyword: #d73a49;
--syntax-entity: #6f42c1;
--syntax-constant: #005cc5;
--syntax-string: #032f62;
--syntax-variable: #e36209;
--syntax-comment: var(--theme-foreground-muted);
--syntax-entity-tag: #22863a;
--syntax-storage-modifier-import: #24292e;
--syntax-markup-heading: #005cc5;
--syntax-markup-list: #735c0f;
--syntax-markup-italic: #24292e;
--syntax-markup-bold: #24292e;
--syntax-markup-inserted: #22863a;
--syntax-markup-inserted-background: #f0fff4;
--syntax-markup-deleted: #b31d28;
--syntax-markup-deleted-background: #ffeef0;
--theme-foreground: #1b1e23;
--theme-foreground-focus: #3b5fc0;
--theme-background-a: #ffffff;
--theme-background-b: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-a));
--theme-background: var(--theme-background-a);
--theme-background-alt: var(--theme-background-b);
--theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-a));
--theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-a));
--theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-a));
--theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-a));
--theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-a));
--theme-blue: #4269d0;
--theme-green: #3ca951;
--theme-red: #ff725c;
--theme-yellow: #efb118;
--font-big: 700 32px/1 var(--sans-serif);
--font-small: 14px var(--sans-serif);
color-scheme: light;
}
.card {
background: var(--theme-background-alt);
border: solid 1px var(--theme-foreground-faintest);
border-radius: 0.75rem;
padding: 1rem;
margin: 1rem 0;
font: 14px var(--sans-serif);
}
.grid>.card,
.card figure {
margin: 0;
}
.card h2,
.card h3 {
font-size: inherit;
}
.card h2 {
font-weight: 500;
font-size: 15px;
}
.card h3 {
font-weight: 400;
color: var(--theme-foreground-muted);
}
.card h2~svg,
.card h3~svg,
.card h2~p,
.card h3~p {
margin-top: 1rem;
}
.observablehq-root {
container-type: inline-size;
}
.grid {
margin: 1rem 0;
display: grid;
gap: 1rem;
/* grid-auto-rows: 1fr; */
}
.grid svg {
overflow: visible;
}
.grid figure {
margin: 0;
}
.grid>*>p:first-child {
margin-top: 0;
}
.grid>*>p:last-child {
margin-bottom: 0;
}
@container (min-width: 640px) {
.grid-cols-2,
.grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-2 .grid-colspan-2,
.grid-cols-2 .grid-colspan-3,
.grid-cols-2 .grid-colspan-4,
.grid-cols-4 .grid-colspan-2,
.grid-cols-4 .grid-colspan-3,
.grid-cols-4 .grid-colspan-4 {
grid-column: span 2;
}
}
@container (min-width: 720px) {
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-3 .grid-colspan-2 {
grid-column: span 2;
}
.grid-cols-3 .grid-colspan-3 {
grid-column: span 3;
}
}
@container (min-width: 1080px) {
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-4 .grid-colspan-3 {
grid-column: span 3;
}
.grid-cols-4 .grid-colspan-4 {
grid-column: span 4;
}
}
.grid-rowspan-2 {
grid-row: span 2;
}
.grid-rowspan-3 {
grid-row: span 3;
}
.grid-rowspan-4 {
grid-row: span 4;
}
.note,
.tip,
.warning,
.caution {
border-left: solid 1px;
border-radius: 0 4px 4px 0;
padding: 1rem 2rem;
margin: 1rem 0;
box-sizing: border-box;
max-width: 640px;
}
.note::before,
.tip::before,
.warning::before,
.caution::before {
display: block;
margin-bottom: 1rem;
font-weight: 700;
}
.note {
border-left-color: var(--theme-foreground-fainter);
background-color: var(--theme-background-alt);
}
.note::before {
content: "Note";
color: var(--theme-foreground-muted);
}
.tip {
border-left-color: var(--theme-green);
background-color: color-mix(in srgb, var(--theme-green), var(--theme-background) 90%);
}
.tip::before {
content: "Tip";
color: var(--theme-green);
}
.warning {
border-left-color: var(--theme-yellow);
background-color: color-mix(in srgb, var(--theme-yellow), var(--theme-background) 90%);
}
.warning::before {
content: "Warning";
color: var(--theme-yellow);
}
.caution {
border-left-color: var(--theme-red);
background-color: color-mix(in srgb, var(--theme-red), var(--theme-background) 90%);
}
.caution::before {
content: "Caution";
color: var(--theme-red);
}
.note[label]::before,
.tip[label]::before,
.warning[label]::before,
.caution[label]::before {
content: attr(label);
}
.note> :first-child,
.tip> :first-child,
.warning> :first-child,
.caution> :first-child {
margin-top: 0;
}
.note> :last-child,
.tip> :last-child,
.warning> :last-child,
.caution> :last-child {
margin-bottom: 0;
}
.big {
font: var(--font-big);
}
.small {
font: var(--font-small);
}
.red {
color: var(--theme-red);
}
.yellow {
color: var(--theme-yellow);
}
.green {
color: var(--theme-green);
}
.blue {
color: var(--theme-blue);
}
.muted {
color: var(--theme-foreground-muted);
}
</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.
