I used

yarn observable convert

on the Introduction to Views notebook, and made some changes. I still can't successfully add red dots to where my mouse is on the map...Am I using

view

wrong in Observable Framework? Here is the my code and its result. --Solved--

Hi folks - I'm running into an issue with deckgl and maplibre in framework... we pull in deckgl via

import {Deck} from 'npm:<http://deck.gl|deck.gl>';

but to get the mapboxgl overlay (in which we put the maplibre map) we need an extension lib

import {MapboxOverlay} from 'npm:<http://deck.gl/mapbox';|deck.gl/mapbox';>

which throws

unable to fetch: <https://cdn.jsdelivr.net/npm/deck.gl@9.0.19/mapbox/+esm>

Is there a way to use env vars (from

.env

file) in a page?

Page Transition issue*:* I was playing with Barba.js in Observable Framework last night and had a couple questions: 1. When deployed locally, there is this immediate render of all DOM elements right before actual page transition starts, resulting in a flash when you enter a new page. BUT this is gone when deployed to Observable!?(you know what, it still happens sometimes on the web. I just can't seem to recreate it consistently.). See here for code and rendered result. 2. I manage to solve issue 1 by (hardcoding) add

data-barba="wrapper"

to

<div id="observablehq-center" >

(a higher level container) in

barba-demo.html

inside dist folder. See here for code and rendered result. 3. I have to click twice to go to the

index

page 4. The leave animation does not play. (I also attached a

demo.html

file to show the transition I want to achieve, and this vanilla html+js file is running smoothly) This might not be something Observable Framework made to do, and I believe some of the issues might be related to barba.js, but I would really appreciate a fresh perspective🫣

How can I change the default width of the main content so that plots can also grow to that width when using resize(width => …)? I’ve experimented changing the styles and making the main content container a little wider (I find it too narrow for writing a blog post for example) but the plots don’t grow to the new width specified in the styles. The rest of the content does.

I tried deploying my framework project on a couple of different static site hosts, and 2 out of 3 didn't work. I'm now trying to figure out the details of why.

Loading arrow-files into arquero I spent quite some time trying to figure out how to load an arrow file into arquero. I would suggest to include an example of that into the Observable Framework documentation. Here is what I ended up with:

export async function getDataArquero() {
  return FileAttachment("../data/datafile.arrow")
    .arrayBuffer()
    .then((buffer) => aq.fromArrow(buffer));
}

• The traditional

aq.loadArrow(url)

will not work with observable framework. • I also got problems with using

FileAttachment(file).arrow()

. Seems that the arrow file format was not accepted.

Has anyone got a workaround to get intellisense when developing JS in Framework

.md

pages? I understand the vscode extension issue is open, but I guess there might be workarounds through other extensions that put different languages in fenced code blocks? (I'll even consider other editors!)

Wondering if anyone has figured out a way to render a bunch of charts at build time and then ship the compiled charts without with WASM DuckDB + extra request to parquet files. I.e: I know charts under

<http://domain.com/static|domain.com/static>

are static and all data is known at buildtime, I want to make loading that as fast as possible.

How do I fix a circular definition in the observable framework? The fix in the notebook is.

Data Loader Help I could use some guidance translating some wrangling work into a data loader. Say I have a CSV that needs manipulation to generate some lovely JSON. In Observable, I would do something like in this notebook: • read file attachment • parse/format • return, can use as JSON How could I translate this work into a data loader? For example, can I still use

FileAttachment

or do I need to read in the file another way? All, the best, thanks!

Does anyone have a working python example as a data-loader that outputs to an arrow IPC file (or a parquet file)? I found this example of writing a data-loader in javascript that outputs to an arrow IPC file. I've messed around with this but will admit that I spinning a bit now:

table = pa.Table.from_pandas(df)

sink = pa.BufferOutputStream()
with pa.ipc.new_file(sink, table.schema) as writer:
    writer.write_table(table)

sys.stdout.buffer.write(sink.getvalue().to_pybytes())

Hi all, I am hoping to get some help with SQL in Observable Framework... I have been running in circles for a couple days now on this issue: 1. I am using .md frontmatter to specify .csv files as part of a database. 2. I am able to successfully query these files using a SQL codeblock, which leads me to believe that #1 works 3. When I try to query the same files using JS, I receive an error,

RuntimeError: Catalog Error: Table with name [table name] does not exist!

I'm not sure what I'm doing wrong here, but I assume it has to do with #3? Hoping to be able to pass this data to plot, so I can visualize some interesting patterns. For reference, I am using this eCommerce dataset from Kaggle. https://www.kaggle.com/datasets/olistbr/brazilian-ecommerce Originally I was using the SQLite file, but that doesn't play nice with Github and I don't want to host the file myself.

Custom Cards I’m wondering how I’d go about creating a custom card for a page, say with a forest green background and white coloring for things like Plot axes. I think this falls under custom styling, so I would have to make a custom stylesheet that extends Observable styles, then make a new card class. But I’m getting confused about how to accomplish this. Does anyone have an example of how to do custom cards? Thanks!

Apologies for a goofy question re: projects / deploying. Two of our team ended up starting from the same codebase, which had been created per the tutorial. Our work diverged but we’re still one project on the Observable site. We want two projects instead. I see there’s a

deploy.json

but the docs say this is generated by

npm run build

… so how / where would I make one of our projects show up as a different project without losing anything? My guess is

npm init @observablehq

but want to make sure that’s non-destructive?

Understanding

npm run build

and its output. During the build process, I get a summary of the size of each page’s output, such as this (project built from the hello-framework example with one added page):

┌ (4 pages)                     Page      Imports        Files
├── example-dashboard          11 kB       568 kB       738 kB
├── example-report             13 kB       564 kB        24 kB
├── index                      11 kB       567 kB       130 kB
└── tsip-poc-dashboard         22 kB     1.109 MB     1.399 MB

This is something under 2Mb of “built stuff” …. When I look in the /dist directory and see what’s out there, the total size is ~49Mb, which is comes mostly from the ~47Mb

_npm

directory … of which @duckdb is ~41Mb. I’m trying to get my head around “page size / page load time” in the sense that I am familiar with in static site generators like Hugo — the “under 2Mb” seems reasonable for a group of highly interactive HTML pages with a dose of locally-loaded data (most of the total); but the 49Mb of output in /dist seems way off … with

_npm

being the root cause … trying to get my head around this.

Hey, hey I'm trying to make a custom React component that I will later use from the Observable Framework dashboards. I've tested the component in the next.js app, but when I put

```jsx
import { Button } from 'basic-component';

jsx
display(<Button label="Click me" />);
```

into the

index.md

file in the Observable framework, I get the errors:

SyntaxError: The requested module '../react@18.3.1/index.js' does not provide an export named 'default'
RuntimeError: The requested module '../react@18.3.1/index.js' does not provide an export named 'default'

The observable project is just a simple output of

npm init @observablehq

(so 1.9.0) with

npm install <mailto:git+git@github.com|git+git@github.com>:Appsilon/iu-basic-component.git

and my idea was to use the node imports in the app. The basic-component repo: https://github.com/Appsilon/iu-basic-component Do you have any ideas what might be wrong here? Maybe the build process is not performed correctly? Or maybe something else. Any hints appreciated ^^

Cross-post from #observable-plot: https://observable-community.slack.com/archives/C06EZB298NS/p1722964376357539

Observable Framework 1.10.0 is now available!

hi, I have a somewhat time-sensitive issue with a Framework deployment here: https://iopsystems.observablehq.cloud/rezolus-ui/ Right now it works for me locally if I

npm run dev

but I see the following when I load the page in my browser, including in an Incognito window. A colleague of mine seems to be able to load it without this error, but then sees an error when selecting a Parquet file. I don't see the parquet-wasm-related error locally when using a dev build, but I do see it when using a production build (

npm run build

) hosted locally. Example .parquet file attached. The parquet file is being loaded using

FileAttachment(...).parquet()

.

Hello all. I really enjoyed the "What is a static site generator" and blog by @Robert Kosara. And I am curious if there are examples of what is described in the "row level security' section. How deploy can generate different packages (data? static site?) based on roles, or other parameters. thanks.

New docs page on the

convert

command and more generally transitioning code from Observable notebooks to Framework: https://observablehq.com/framework/convert

Hey there! Curious how are you folks melting / folding your wide tables? I have a table with one row per date and multiple column metrics. When plotting, I'd love to rely on Plot

z

and that expects a long dataframe. Not sure what is the simplest way to do that in JS without relying on other libraries (arquero). First time dealing with JS coming form Python! 🙈

Hello friends, happy Friday! It's Observable time🙈. I am trying to use Shadcn UI components in Observable Framework, and started with headless ui components. Here is the demo and code. Then I ran into two questions: 1. Should I use

Mutable

or

useState

? It seems like I can use mutable to control updates, and that would create a truly stateless component. If I use both, that creates unnecessary rendering. 2. Is

display

the only way to embed React components in the markdown file? If I want to place the React UI in a very specific location(see attached picture), what should I do? Should I just create everything in React??(em...as much as I hate using React)

👋 Hello, team! is there anyway to import a obs. framework project into a React webapp as if were a shared component library. I understand you can do this with the observable runtime api and an exported obs. notebook.

My ideal setup would be to treat the observable project as a module in a yarn workspace and export as an es module into other projects

Or wrap the project around an module federation enabled bundler.

But using it as a component library in a mono repo would be huge for me.

I can figure it out eventually just wondering if anyone might point me to someone who might have done it already

I just did a quick experiment using a library called Swapy, to get drag and drop cards into a dashboard. You can DND cards in this example (modified mortgage rates example): https://66c6671f4bcb5e89545042f8--scintillating-horse-63be68.netlify.app/ Super easy; Swapy advertises itself to any framework and also vanilla JS. This commit highlights are all my code changes: https://github.com/observablehq/framework/commit/c855d34d5a18e99adba402e89d928519c8902a0a?diff=unified&w=1 I guess the issues I created can be fixed. Might be nice with a bit more effort