how to get that nice look & feel of Observable's data drill-downs?

Without violating the Terms of Service

The look and feel of the Website and Service is copyright © Observable, Inc. All rights reserved. You may not duplicate, copy, or reuse any portion of the HTML/CSS, Javascript, or visual design elements or concepts without express written permission from Observable.

Is there an easy, open-source template for colorizing my data elements?

Using the Observable Embed tool, I am rendering out a data element… and it’s super ugly and hard to read.

I’d really like to make it a bit more beautiful, like on Observable–without re-inventing the wheel:

Does anyone know of a pre-built CSS template for this? And does the Observable team have any plans to release some sort of community CSS that could be coupled with generate notebook outputs for these sorts of elements?

1 Like

Not all the styling that makes Observable notebooks pretty is close-sourced, the stylesheets for the Observable Inspector is open sourced, which you can include with this link tag:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css">

This will make some cells, like inspectors for arrays, look like what you see on observablehq.com. But, the styling that is closed-sourced are things like table styles, markdown text, fonts, and some other miscellaneous elements, and there doesn’t seem to be a 3rd party solution for that. For better markdown stylesheets, you could use something like https://github.com/sindresorhus/github-markdown-css , but itll look much different than a typical Observable notebook

3 Likes

Thanks for pointing this out! I suppose I got worried about using this after reading a recent thread, but since it comes bundled with the downloads I should assume it’s OK to use?

Yup! The code for that stylesheet is open sourced as a part of @observablehq/inspector in style.css, and has an ISC license.

1 Like

Thanks again!! My embedded data are looking so much better!

embeded-example-data-pretty

1 Like