Custom display / visualization?

[alexalemi]

I feel like I might be missing something, but is there a way to generate custom visualizations for my own javascript classes?

I'm looking for something like the custom viewers in clerk notebooks or the custom rich display hooks like _repr_html_ for jupyter notebooks.

I have my own javascript classes, and I'd like to create custom visualizations for them inside Observable Framework, how do I do that?

[Fil]

If you want to visualize anything in framework, you can display() it — and it will call the default inspector, which knows how to display arrays, strings, (nested) objects, images, DOM elements etc. If you need a custom visualization, you can create a function that returns something more useful (maybe an interactive chart).

For example, if you want to visualize a graph with nodes and links, you could use a function that returns an arc diagram, then call display(arcDiagram(graph)) — https://observablehq.observablehq.cloud/pangea/plot/arc-diagram

I'm not sure this answers your question, though?

[mbostock]

To add, you can combine the built-in display with libraries that generate DOM content, such as D3, Observable Plot, Observable Inputs, Hypertext Literal, and React. You can also generate your own DOM content using the standard DOM API.