The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Libraries
Edited
Oct 10, 2023
8 forks
Importers
242 stars
4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
currentUser // to demo, a fake value is shown here
Insert cell
Insert cell
Insert cell
client = DatabaseClient("Baby Names")
Insert cell
Insert cell
names = client.query(
`SELECT name, gender, year, SUM(number) AS number
FROM names
WHERE year > ?
GROUP BY name, gender, year`,
[1920]
)
Insert cell
Insert cell
Insert cell
Insert cell
client.queryRow(
`SELECT MIN(year) AS year
FROM names
WHERE name = ?`,
["Loki"]
)
Insert cell
Insert cell
year = 1950
Insert cell
client.sql`SELECT name, gender, year, SUM(number) AS number
FROM names
WHERE year > ${year}
GROUP BY name, gender, year`
Insert cell
Insert cell
client.explain(
`SELECT MIN(year) AS year
FROM names
WHERE name = ?`,
["Loki"]
)
Insert cell
Insert cell
table = client.describe("names")
Insert cell
Insert cell
table.value
Insert cell
Insert cell
client.describe()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const context = DOM.context2d(width, 33);
context.fillText("Hello, I am a canvas!", 0, 20);
return context.canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const clip = DOM.uid("clip");
return svg`<svg width="128" height="128" viewBox="0 0 640 640">
<defs>
<clipPath id="${clip.id}">
<circle cx="320" cy="320" r="320"></circle>
</clipPath>
</defs>
<image
clip-path="${clip}"
width="640" height="640"
preserveAspectRatio="xMidYMin slice"
xlink:href="${await FileAttachment("image@1.png").url()}"
></image>
</svg>`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
workbook = FileAttachment("Laser_Report_2020.xlsx").xlsx()
Insert cell
Insert cell
Insert cell
dogZip = FileAttachment("Dog_Photos.zip").zip()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dot`digraph { event -> consequence; }`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<h3>Hello, world!`
Insert cell
Insert cell
Insert cell
html`Hello, <b>world</b>!`
Insert cell
Insert cell
html`<div>Hello, <b>world</b>!</div>`
Insert cell
Insert cell
html`I like ${tex`\KaTeX`} for math.`
Insert cell
Insert cell
html`<table>
<tbody>${["zero", "one", "two"].map((name, i) => html`<tr>
<td>${name}</td><td>${i}</td>
</tr>`)}</tbody>
</table>`
Insert cell
Insert cell
html`<span style="background:yellow;">
Use a &lt;span&gt; element to set the background color.
</span>`
Insert cell
html`<input type=range min=0 max=10 step=1>`
Insert cell
html`<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### Hello, world!`
Insert cell
Insert cell
Insert cell
md`My *favorite* number is ${tex`\tau`}.`
Insert cell
Insert cell
elements = [
{symbol: "Co", name: "Cobalt", number: 27},
{symbol: "Cu", name: "Copper", number: 29},
{symbol: "Sn", name: "Tin", number: 50},
{symbol: "Pb", name: "Lead", number: 82}
]
Insert cell
To create a table from the previous array of data, you would use the following Markdown code:
Insert cell
md`
| Name | Symbol | Atomic number |
|-----------|-------------|---------------|${elements.map(e => `
| ${e.name} | ${e.symbol} | ${e.number} |`)}
`
Insert cell
Insert cell
Insert cell
now // Returns the current value of Date.now.
Insert cell
Insert cell
md`The current time is: ${new Date(now).toISOString()}`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width=16 height=16>
<circle cx=8 cy=8 r=4></circle>
</svg>`
Insert cell
Insert cell
svg`
<circle cx=8 cy=4 r=4></circle>
<circle cx=8 cy=8 r=4></circle>
`
Insert cell
Insert cell
svg`<g>
<circle cx=8 cy=4 r=4></circle>
<circle cx=8 cy=8 r=4></circle>
</g>`
Insert cell
Insert cell
Insert cell
svg`<svg width=${width} height=27>
<text y=22>Hello, I am an SVG image!</text>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
tex`E = mc^2`
Insert cell
tex`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`
Insert cell
Insert cell
Insert cell
tex.block`E = mc^2`
Insert cell
tex.block`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`
Insert cell
Insert cell
Insert cell
tex.options({displayMode: true})`E = mc^2`
Insert cell
Insert cell
function fadeIn(element, visibility) {
element.style.color = "transparent";
element.style.willChange = "color";
element.style.transition = "color 2.5s linear";
visibility().then(() => (element.style.color = "inherit"));
return element;
}
Insert cell
Insert cell
fadeIn(md`The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world...`, visibility)
Insert cell
Insert cell
Insert cell
Insert cell
width //Resize the browser window to half-size to see the value change.
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more