import { chart } from "@d3/line-chart"
chart
chart
inspectElement(chart)
animation = svg`<svg width="${width}" height="20">
<g transform="translate(${width / 2}, 10)">
<circle r="10" cx="${Math.round((width / 2) * Math.sin(now / 1000))}" />
</g>
</svg>`
inspectElement(animation, { open: true })
inspectElement(animation.querySelector("circle"))
mutatingAnimation = {
const node = svg`<svg width="${width}" height="20">
<g transform="translate(${width / 2}, 10)">
<circle r="10" cx="0" />
</g>
</svg>`;
d3.timer(
(t) =>
void d3
.select(node)
.select("circle")
.attr("cx", (width / 2) * Math.sin(t / 1000))
);
return node;
}
inspectElement(mutatingAnimation, { open: true })
function inspectElement(node, { open = false, showData = true } = {}) {
// Composes attributes like `width="200" height="100"`
const attrs = Array.from(node.attributes).map(
({ name, value }) =>
htl.html` ${name}${
value ? htl.html`=<span class="hljs-string">"${value}"</span>` : ""
}`
);
// If D3 has bound data to the __data__ property, show it
const data =
showData && node.__data__ !== undefined
? htl.html` <span class="hljs-comment">${inspectData(
node.__data__
)}</span>`
: "";
// Opening tag, like `<svg width="200" height="100"/>`;
// I currently don’t show any closing tag `</svg>`
const tag = htl.html`<span class="hljs-name">
<${node.tagName.toLowerCase()} ${attrs}>${data}
</span>`;
// If the node has children, use a <details> element;
// put this node in the <summary> and recursively
// put the children below so they can be expanded.
return node.children.length
? htl.html`
<details style=${styles} open=${open}>
<summary style=${{ cursor: "pointer" }}>${tag}</summary>
<div style=${indent}>
${Array.from(node.children).map((node) =>
inspectElement(node, { open })
)}
</div>
</div>`
: htl.html`
<div style=${{ ...styles, ...indent }}>
${tag}
</div>`;
}
function inspectData(data, { maxLength = 100 } = {}) {
if (data?.length) {
return `Array(${data.length}) [${data[0] ? inspectData(data[0]) : ""}${
data[1] ? ", …" : ""
}]`;
} else if (typeof data === "object") {
return JSON.stringify(data).slice(0, maxLength);
} else {
return String(data).slice(0, maxLength);
}
}
styles = ({
font: "var(--monospace-font)"
})
indent = ({ marginLeft: "14px" })
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.
