DataViz, Dashboard, Observable Ambassador and Notion Certified
embed("https://observablehq.com/embed/@mbostock/u-s-population-by-state-1790-1990/2?cell=viewof+year&cell=chart")
embed = (url, {height = 400} = {}) => {
const iframe = html`<iframe width="100%" frameborder="0" src="${url}"></iframe>`;
// The Embedly protocol is to send the height as part of a stringified object.
// In this example, the resize message is the only message being sent; however,
// the checks are good practice, lest we try to interpret unrelated messages as
// resize events.
function onMessage(msg) {
let {data} = msg;
if (msg.source === iframe.contentWindow && typeof data === "string") {
try {
// Try to parse
data = JSON.parse(data);
} catch {
// The message wasn't valid JSON, so it must not be our resize event
return;
}
}
// Make sure it's the resize event
if (data.context === "iframe.resize") {
const {height} = data;
iframe.style.height = height + "px";
}
}
// Attach our listener for the message from the iframe
window.addEventListener("message", onMessage);
return iframe;
}
examples = new Map([
[
"the popularity of the letters in the alphabet",
"https://observablehq.com/embed/@d3/sortable-bar-chart?cell=viewof+order&cell=chart"
],
[
"a history of big brands",
"https://observablehq.com/embed/@d3/bar-chart-race?cell=chart"
],
[
"a game of cat and mouse",
"https://observablehq.com/embed/@mbostock/predator-and-prey?cell=timeLineChart"
],
[
"a maze of sorts",
"https://observablehq.com/embed/@mbostock/prims-algorithm-iv?cell=canvas"
],
[
"a map of U.S. state population growth",
"https://observablehq.com/embed/@mbostock/u-s-population-by-state-1790-1990/2?cell=viewof+year&cell=chart"
]
])
import {Radio} from "@observablehq/inputs"
import {Copier} from "@mbostock/copier"
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.
