File size: 3,802 Bytes
e46072f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
---
theme: alt
toc: false
---
<style>
.hero {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--sans-serif);
margin: 4rem 0 8rem;
text-wrap: balance;
text-align: center;
}
.hero h1 {
margin: 2rem 0;
max-width: none;
font-size: 14vw;
font-weight: 900;
line-height: 1;
background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero h2 {
margin: 0;
max-width: 34em;
font-size: 20px;
font-style: initial;
font-weight: 500;
line-height: 1.5;
color: var(--theme-foreground-muted);
}
@media (min-width: 640px) {
.hero h1 {
font-size: 90px;
}
}
</style>
<div class="hero">
<h1>Hello, Observable Framework</h1>
<h2>Welcome to your new project! Edit <code style="font-size: 90%;">docs/index.md</code> to change this page.</h2>
<a href="https://observablehq.com/framework/getting-started" target="_blank">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
</div>
<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
<div class="card">${
resize((width) => Plot.plot({
title: "Your awesomeness over time 🚀",
subtitle: "Up and to the right!",
width,
y: {grid: true, label: "Awesomeness"},
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
]
}))
}</div>
<div class="card">${
resize((width) => Plot.plot({
title: "How big are penguins, anyway? 🐧",
width,
grid: true,
x: {label: "Body mass (g)"},
y: {label: "Flipper length (mm)"},
color: {legend: true},
marks: [
Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
]
}))
}</div>
</div>
---
## Next steps
Here are some ideas of things you could try…
<div class="grid grid-cols-4">
<div class="card">
Chart your own data using <a href="https://observablehq.com/framework/lib/plot"><code>Plot</code></a> and <a href="https://observablehq.com/framework/javascript/files"><code>FileAttachment</code></a>. Make it responsive using <a href="https://observablehq.com/framework/javascript/display#responsive-display"><code>resize</code></a>.
</div>
<div class="card">
Create a <a href="https://observablehq.com/framework/routing">new page</a> by adding a Markdown file (<code>whatever.md</code>) to the <code>docs</code> folder.
</div>
<div class="card">
Add a drop-down menu using <a href="https://observablehq.com/framework/javascript/inputs"><code>Inputs.select</code></a> and use it to filter the data shown in a chart.
</div>
<div class="card">
Write a <a href="https://observablehq.com/framework/loaders">data loader</a> that queries a local database or API, generating a data snapshot on build.
</div>
<div class="card">
Import a <a href="https://observablehq.com/framework/javascript/imports">recommended library</a> from npm, such as <a href="https://observablehq.com/framework/lib/leaflet">Leaflet</a>, <a href="https://observablehq.com/framework/lib/dot">GraphViz</a>, <a href="https://observablehq.com/framework/lib/tex">TeX</a>, or <a href="https://observablehq.com/framework/lib/duckdb">DuckDB</a>.
</div>
<div class="card">
Ask for help, or share your work or ideas, on the <a href="https://talk.observablehq.com/">Observable forum</a>.
</div>
<div class="card">
Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
</div>
</div>
|