Hi all, I'm wondering if anyone has a suggestion on the best way to go about adding some space between two sections of these grouped cells? This is a chart showing the number of bikes counted per 15 minute count bucket, and the space I'd like to add would be to separate the morning and evening counting shifts. I tried following the Facets documentation to create two groups along the X axis, but I'm a bit lost because I'm also using a group transform to group by location and time bucket. My data has an 'Hour' property denoting the hour (e.g.

6

,

14

) of the count bucket, so I'd like to key off of that for the faceting. Here's a notebook with what I'm working with: https://observablehq.com/d/bfbb63a16a2d77b5

I'm having a hard time writing sql queries in Observable notebooks. I'm not sure how string interpolation is supposed to work. As you can see in the notebook for some reason a prepared SQL query as string does work, but directly in a SQL cell does not.

I'm getting an error trying to clean up a parquet file loaded into duckdb. Should I not load it using

DuckDBClient.of({ mydb: FileAttachment("mydb.parquet") })

then?

Error: Binder Error: Can only update base table!

To improve performance of my histogram plots I'm looking into the

histogram()

function built into DuckDB. The query seems to run fine, but the SQL cell shows "Error" as a value and inspecting the array itself says "Uncaught TypeError: proxy [[OwnPropertyKeys]] must return an array with only string and symbol elements". Am I using it incorrectly? Of course I could do the binning myself which is a lot more flexible. https://observablehq.com/d/75014781c1acd67c#cell-120

Hello! Is it possible to get h3 headers in the toc? Is there a way to disable the behaviour where "subtitle" headings are hidden in the toc? (i.e. if no content between

<h1>head</h1>

and

<h2>subhead</h3>

, only

head

shows in toc.) TIA

I'd like to combine an

Input.search

with an

Input.table

to help looking entries to select. The problem is that the previous selection clears when you filter data away by typing in the search field. Is there a clever way to preserve selection even though the list of visible items are filtered? A native search field on the table like the data table cell has would be even better 👼 There's an issue related to search #222, but it has no mention of preserving selection.

Greetings! I have been using Framework for a few months without any issue, but when I attempted to view one of my projects this morning, our internal security protocols blocked the "observablehq.cloud" domain and labeled it a "security threat." Under the Diagnostic Info section of the report, it shows the Host to be "malware.opendns.com". Is this a recent change that would cause the site to be blocked? Thanks.

There's this fancy

albers-usa

projection for the US which also happens to resize nicely when used in Plot. For other countries I've been doing

projection: d3.geoMercator().fitSize([width, 650], nl_land)

, but that does not take into account the height. Is there a variable around for the standard height of a plot cell I can use? It seems that the aspect ratio remains 1.6, but who's to say that's a given. https://observablehq.com/d/91980718e3b1cae1

Hi! I'm trying to import a library (this one) but nothing seems to work. 😕 I really don't know this JS ecosystem and/or how NPM works, so I'm kind of fumbling in the dark here. Could someone please help me make it work?

Hello everyone, can you help me? I'm using React with Vite, and my d3 graphics work locally, but when deployed to Vercel it doesn't work and there are no build errors.

Hey guys, I tried to import an png image inside the js file using observable project, wasn't able to import got error 404 not found why so ?

Is there a method for running

yarn create @observablehq

within a folder that already has Framework project content? [i.e., a config file and src folder?]. I am switching computers have a number of in-progress Framework projects that I wish to move over, and am hoping I don't have to run the create command repeatedly to set up the directory before copying files over.

I'm not sure where to report bugs for observablehq notebooks. After uploading a csv file (which I have associated with Excel on my local PC) I get the error

Error: unknown file type: application/vnd.ms-excel

. After reloading the notebook everything is fine and I can start using it.

https://observablehq.com/d/91980718e3b1cae1 I'm having trouble getting tooltips to appear using the

Plot.geo

. I've seen some solutions using a

Plot.tip

(@thehogfather/nigeria-geo-plot-templates), but the documentation seems to indicate it should work directly on the geo mark itself. For some reason the mouse over only appears in the middle in the plot and it might even show up all the tooltips. Tooltips are present on US and NL map.

Hi folks, I'm trying to make a tooltip like this where all series are shown at the cursor x position instead of just the nearest series. Is this possible in Observable Plot?

Happy Monday, I was wondering how you collaborate with designers / developers working with D3? Any good practices and tips to enhance dev x design collaboration? 🙂 Also wondering if there is any ressources for designers available? Any D3 Figma files you guys use? Thanks in advance

Hello everyone! Hope you had a good weekend. I have tried with Rechartjs to recreate this chart. Even if overall I have been able to, it seems that I can’t make the areazone and lines being drawn outside of the axises. Do you know if it is possible to achieve such results with D3 ? If you have anymore questions or need more context please, feel free to ask Thank you very much

Good afternoon, I have create couple customized visualization using d3. Would anyone guide me how I can export them as image file (not using manual screenshot)

Advice on binding familiar cities to FIPS data Howdy, I have a case where we are displaying data by county FIPS code, but there is a desire to implement a feature where you can search for a more familiar city, which will then guide you a county that city resides in. So we need data of some well-known cities, which are tied to their fips codes. • Example:

Multnomah County

is less well known, but people could search for

Portland

, which is more well known, and be sent to the multnomah county data. So we would have a dataset of some popular cities for each county Thought I’d ask if anyone has run into this and whether they have any suggestions about an approach for data on this topic. Thanks!

Hey, I have this question regarding the use of React components in Observable Framework. Now I figured out that #help is better channel for... help 🙈 Let me crosspost it https://observable-community.slack.com/archives/C06KPR8FCE4/p1722938263719689 Maybe someone has an idea what could solve the errors?

Looking for help with mutable in the Framework context. The notebook mutable is working here: https://observablehq.com/@aaronkyle/key-biodiversity-areas When I try to port this over to Framwork, however, my

bounding_box_view

variable doesn't seem to update and remains 'null'. The mutable pattern below is from https://observablehq.com/framework/reactivity. Full source code is here: https://github.com/aaronkyle/dataviz/blob/main/kba_question.md Any insights into what I am doing incorrectly?

js
const bounding_box_view = Mutable([])

js
{
  map.on('moveend', () => {
    const bounds = map.getBounds();
    const set_bounding_box = () => bounding_box_view.value = {
      north: bounds.getNorth(),
      south: bounds.getSouth(),
      east: bounds.getEast(),
      west: bounds.getWest()
    };
  });
}

I am experiencing an issue where the same functions in an Observable Notebook and Framework are returning different results, and I don't know where or how to start investigating. The notebook is here: https://observablehq.com/@aaronkyle/key-biodiversity-areas and I have deployed the Project to the Ambassadors workspace here: https://ambassadors.observablehq.cloud/key-biodiversity-areas/ You'll note that the returned 'visible features' in the notebook appear correct, whereas my map view of New Zealand is returning values from Europe. I displayed the bounding box, which is the same for both the notebook and Framework. However the returned features are different, and scrolling the results table I wonder whether my negative values from lat/lon coordinates are being converted to positives (but there are also a few errant coordinates). Source code for the project is here: https://github.com/aaronkyle/dataviz/blob/main/kba_src/index.md I welcome any help and guidance to troubleshoot!

Good day, guys I am trying to create a zoomable circle packing. I want the label of the nodes to be in the middle, but not on top of any children. Is there any possibility to do it? I've been playing with it for a day now. I've checked the example in https://observablehq.com/@d3/zoomable-circle-packing and this is the only thing I found.

any thoughts on how to handle crowding of different types of elements on maps without zoom? I can cluster them somehow, I guess, but I'm wondering if anyone has seen a map handle this well before?

I'm working on an app where users practice pronouncing words. We track each user's overall improvement over time. Users practice about ten words a day, but some practice way more (e.g. a couple hundred a day). Users improve over time, and we track this. I have a list of users, the total number of days practiced for each user, the total number of practices done for each user, and the total improvement for each user. Is there a clever intuitive way to plot this data using Observable Plot that will give me insight into how the total number of practices a user does correlates with their improvement, compared with how the total number of days a user practices correlates with their improvement?

I don't seem to be able to upgrade my account to Pro without adding a viewer for an additional 10 USD per month? I only want one user, the editor, me. Is that not possible?

Hey there. Not sure if I can ask a D3 question here. I’m looking for an example on how to update a pie chart with new data that takes new entries and missing entries into account. Something like this https://observablehq.com/@d3/pie-chart-update but with enter and exit of new and missing data.

DuckDB: Decoding failed Did something just change regarding DuckDB in Observable notebooks? I’m trying to read in a parquet file and getting

TypeError: Decoding failed.

I'm getting "RuntimeError: data is not defined" in my observable framework project. I put my csv file in the data folder of the project and this code on the page to load my data: const numbers = FileAttachment("data/numbers.csv").csv({typed: true});

image.png