Data visualization/Interactive media and full-stack data science web app developer.
Published
Edited
Apr 4, 2022
2 forks
6 stars
{
const dom = html`<div style="padding:12px;"></div>`;
const shadow = dom.shadowRoot || dom.attachShadow({ mode: "open" });
const update_step_number = (d) => (mutable step_number = d);
const Steps = antd.Steps;
const Step = Steps.Step;
React.render(
htm`<div style="font-family: 'Trebuchet MS'">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.19.1/antd.compact.min.css"/>
<${Steps} current=${step_number} onChange=${update_step_number}>
<${Step} title="Finished" description="This is a description." />
<${Step} title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<${Step} title="Waiting" description="This is a description." />
</>
</>`,
shadow
);
return dom;
}
requires = require.alias({
htm: "https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js",
preact: "https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/preact.umd.js",
"preact/hooks":
"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/hooks.umd.js",
react: "https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js",
"react-dom": "https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js",
antd: "https://cdnjs.cloudflare.com/ajax/libs/antd/4.19.1/antd.min.js"
})
React = requires("react")
htm = requires("htm").then((d) => d.bind(React.createElement))
antd = requires("antd")
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.
