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>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.