Data visualization/Interactive media and full-stack data science web app developer.
{
const dom = html`<div style="padding:12px;"></div>`;
const { FluentProvider, teamsLightTheme, Persona } = f9bundle;
ReactDOM.createRoot(dom).render(
htm`<div>
<${FluentProvider} theme=${teamsLightTheme}>
<${Persona}
name="Alok Pepakayala"
secondaryText="Available"
presence=${{ status: "available" }}
avatar=${{
image: {
src: "https://avatars.observableusercontent.com/avatar/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9"
}
}}
/>
</>
</>`
);
return dom;
}
{
const dom = html`<div style="padding:12px;"></div>`;
const { FluentProvider, teamsLightTheme, Spinner } = f9bundle;
ReactDOM.createRoot(dom).render(
htm`<${FluentProvider} theme=${teamsLightTheme}>
<${Spinner} size="small" label="Spinner Example"/>
</>`
);
return dom;
}
{
//Note: dropdown scrolls to top of the page, unresolved.
const dom = html`<div style="padding:12px 12px 100px 12px;"></div>`;
const {
FluentProvider,
teamsLightTheme,
Menu,
MenuItem,
MenuList,
MenuPopover,
MenuTrigger,
SplitButton
} = f9bundle;
ReactDOM.createRoot(dom).render(
htm`<${FluentProvider} theme=${teamsLightTheme}>
<${Menu} positioning="below-end">
<${MenuTrigger} disableButtonEnhancement>
${(triggerProps) =>
htm`<${SplitButton}
menuButton=${triggerProps}
primaryActionButton=${{ onClick: () => {} }}>
Split Button Example
</>`}
</>
<${MenuPopover}>
<${MenuList}>
<${MenuItem}>Item a</>
<${MenuItem}>Item b</>
</>
</>
</>
</>`
);
return dom;
}
bundle = require(await FileAttachment("bundle@1.js").url()).then((d) => {
//UMD Bundle created using Rollup
return {
f9bundle: window["f9bundle"],
React: window["React"],
ReactDOM: window["ReactDOM"]
};
})
React = bundle.React
ReactDOM = bundle.ReactDOM
htm = require("https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js").then(
(d) => d.bind(React.createElement)
)
f9bundle = bundle.f9bundle
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.
