Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Public
Edited
May 1, 2023
12 forks
Importers
153 stars
slide`Hello, *world*!`
slide.js`
// This is a JavaScript code snippet.
function foo() {
return 42;
}
`
slide.img`https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg`
slide`You can use LaTeX, too: ${tex.block`
f(\textcolor{hotpink}{x}) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi \textcolor{hotpink}{x}}
\,d\xi
`}`
slide`And it’s reactive!
${new Date(now).toLocaleString()}`
slide = {
if (!slide_style.parentNode) document.head.append(slide_style);
function slide() {
const content = md.apply(this, arguments);
if (content.firstChild?.tagName === "P" && content.firstChild.textContent === "%note") {
content.firstChild.remove();
return content;
}
const container = document.createElement("div");
container.className = "slide";
container.appendChild(content);
return container;
}
function code(strings) {
const container = document.createElement("div");
const pre = container.appendChild(document.createElement("pre"));
const code = pre.appendChild(document.createElement("code"));
let string = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) string += arguments[i] + "" + strings[i];
code.textContent = string.trim();
container.className = "slide slide--code";
return container;
}
slide.code = code;
slide.js = function() {
const container = code.apply(this, arguments);
const content = container.firstChild.firstChild;
content.className = "js hljs javascript";
hl.highlightBlock(content);
return container;
};
slide.img = function(strings) {
const img = new Image;
let string = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) string += arguments[i] + "" + strings[i];
img.src = string.trim();
img.className = "slide slide--img";
return img;
};
return slide;
}
<style>
.slide {
width: calc(100% + 28px);
margin: 0 -14px;
padding: 10%;
box-sizing: border-box;
background: #333;
color: #eee;
min-height: 65vw;
font-size: 5vw;
line-height: 1.15;
display: flex;
align-items: center;
}
.slide a {
color: hotpink;
}
.slide p,
.slide pre,
.slide img {
max-width: 100%;
}
.slide--img {
max-width: none;
padding: 0;
}
.slide blockquote,
.slide ol,
.slide ul {
max-width: none;
}
.slide > * {
width: 100%;
}
.slide code {
font-size: 80%;
}
.slide--code pre,
.slide--code code {
font-size: 2.3vw;
}
.slide--code {
color: rgb(27, 30, 35);
background: rgb(247, 247, 249);
border-bottom: solid 1px white;
}
</style>
hl = require("@observablehq/highlight.js@1.0.0/highlight.min.js")
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.
