Observable-Community

Not 100% sure, but I think the observable iframe (that contains the cell's outputs) doesn't have `serial` in its `allow` properties; it's not something that you can add as a user, but you should probably suggest it.
In the meantime you can embed in a normal webpage and it works <https://visionscarto.net/obs/serial.html>

Thanks Fil, could you pint me to where I should suggest it?
And yes, it works perfectly in a normal webpage in Chrome (I've had the chance to give a p5js &amp; Arduino workshop in September)

I'd like to generate SVG and send commands to a plotter directly from Observable

<https://github.com/observablehq/feedback/issues>

As mentioned in my comment, you can request access using a top-level window as a proxy. I've implemented a helper for these kinds of requests in  <https://observablehq.com/@mootari/powerful-features#serial>

Note that the window needs to remain open while you access the API.

perfect! thank you <@U048E2BJL9Z>, I found how to use `request` and should now be able to send commands to the plotter

<@U04HPEPBWSX> Let me know if you have any troubles with the notebook API! I didn't have many chances to test it in practice yet.

found my answers in your code, but I’ll let you know if i’m blocked

haha, blocked way sooner than I thought but unrelated to your notebook: I can’t import the `hpgl` package
<https://unpkg.com/hpgl@0.8.7-12/hpgl.js>

<@U04HPEPBWSX> `import("<https://esm.sh/hpgl@0.8.7-12>")`

I'd recommend to forget about unpkg and only use esm.sh

THANK YOU!
I didn’t know about esm.sh :ok_hand:

first steps, but seeing the plotter being moved from an Observable notebook :star-struck:

ok don’t look at the mess around then :sweat_smile:

note that you can set {popup:false} so that the window will open in a new tab. might make it easier to keep track of it.

VID_20230117_213612.mp4

IMG_20230117_213636.jpg

untitled.png

check out the _order_ option for the stack transform; should be `order: "month"` in this case

Thanks, <@U048X1JDDHN>! Would I add the stack transform instead of the group transform then? Or combine them somehow?

the stack transform is here, implicitly added by the barX mark

image.png

Now I'm a little bit confused here because I think I expected `channels: { x1, x2, y1, y2 }` and then I would need to create new channels `x` and `y` for `Plot.text` to read from

but it seems that relationship is inverted. These channels are `text`'s channels.

1. What's the best approach here?
2. Is there any documentation that I could look at to understand initializers more? This is all I could find official documentation wise: <https://github.com/observablehq/plot/blob/main/README.md#custom-initializers> 

<https://observablehq.com/@recifs/midpoint-transform>

haha brilliant, my eyes seemed to skip over this when I searched for it - thanks <@U048X1JDDHN>! TIL about `columns` and `transform`

Hi Christopher, how are you running the notebook and what errors are you seeing?

locally, (with python3 -m http.server 7000)

the error would be from line 107 I guess, since "FileAttachement" doesn't make sense, it's a notebook thing isn't it.

I'm wondering what line instead you use if you're doing it locally like me?

Yes, FileAttachment wraps a map that exposes the files to any runtime Variables

If you check out the end of <https://api.observablehq.com/@d3/bar-chart.js?v=3> (below "export default function define") you can see how it gets registered.

Can you share a bit more about what your goal is? It seems you're not only trying to run the notebook, but also want to change or include it?

yeah I'm not sure I understand that function.
I'm a bit of a noob - I just want to run this example locally, not using the observable notebooks. (I cannot find instructions anywhere on how to do this with a local file).

I have changed the line above to `const alphabet = d3.csv("../alphabet.csv", { typed: true });`

I'm not sure it is correct as now I'm faced with this error (but his could be to do with how I'm important d3 as well)

Sorry, I'm out for the weekend. Since this thread might get overlooked, I encourage you to post your question on <https://talk.observablehq.com/>.

And you might find this notebook helpful to navigate the D3 documentation: <https://observablehq.com/@mootari/d3-documentation>

Spellcheck seems to work fine for me. :confused:

:( must be something with my computer (though I tried in both Chrome and Edge) Thank you for the (in)sanity check!

I have a test notebook that downloads a large netcdf4 file and outputs a 30Mpx raster image with Plot

Another one that calls lots of tiles, processes them to black and white with sharper contrast, then pastes them together and outputs the result as a compressed png suitable to print in a book

definitely not an abuse of observable :slightly_smiling_face:

<@U0489M6NVGU> Can the file be accessed somewhere without requiring an account?

(was changing permissions...): <https://observablehq.com/d/e9dabf25528924f8>

... I may be breaking some license stuff to open this publicly, so don't count on my leaving in public long... I saved the source ZIP to S3 and serve them back

... this notebook doesn't deliver all that I promised above (we don't yet have a cell that just offers up the GeoTIFF)... we're working on it.  We're trying to reproduce something similar to the PNG that is supplied with the dataset

but working across an entire country is way too much; we'll likely be focusing on an area of 30 km2

What's the resolution that you're aiming for?

I think I'm out of my depth here :sweat_smile:

Saneef got very far :slightly_smiling_face: (Saneef is very amazing) - <https://observablehq.com/d/e9bc06eea6f440bf>

(I'm getting "RuntimeError: Notebook '@adb/map-folio' failed to load")

```RuntimeError: Failed to fetch dynamically imported module: <https://api.observablehq.com/@adb/cartographic-symbols.js?v=4&amp;resolutions=e9bc06eea6f440bf@199>```

... i forked that one (clearly) from a work team that generally isn't public

(so again, any potential thread readers, this will all be broken again... sharing now to give an idea of where we're trying to head)

&gt; as high as possible
Given the limited number of layers, I do wonder if creating vector shapes doesn't end up increasing the size. E.g., if you single out every layer and store it as a 1bit PNG (and store the geo data in a separate .tfw file), I'd imagine that it can compress very well.

You wouldn't be able to perform canvas operations due to the sheer size, but I wonder if there's a way to stream PNGs so that you could query them tile by tile. Alternatively I'd look for a streamable data format that lets you store and query the offsets efficiently.

You'd then render the layers on the fly.

(Sorry, these are just thoughts, not concrete solutions)

This is awesome! Thank you for brainstorming!

I think the reason we were looking at vector formats had mostly to do with how to apply styles, and to a lesser degree how well one can zoom in and out, to apply different smoothing operations, etc.

with bitmap data you still have a couple of options to smooth the data. E.g. you could just render them as dots if you don't want the blockiness, or you could apply marching squares if you want to get extra fancy. I'd expect that it should be fast enough to perform ad-hoc at every layer update.

But I'd love to hear <@U048X1JDDHN> weigh in on this, as he has a ton more experience in that area

thank you!  this is all new for us and very appreciative of all thoughts and ideas!

I’ve used <https://rasterio.readthedocs.io/en/latest/index.html|rasterio> for land coverage work before - you can overlay polygons to clip out data and do all sorts of numpy-based matrix math

(but I might be interpreting the ask completely backwards…)

cool, thank you!  out of curiosity (I am not familiar, so apologies if this isn't the best question)... I have seen GitHub run ipython notebooks... if we were to write code for a python processing sequence in ipython and host it on github, do you think that'd be a reasonably "transparent" way of showing data conversions? (i am assuming rasterio would work in this context) .. and no, you're reading the ask very accurately!  we're happy to jump outside of Observable so long as whatever we're doing can be written, evaluated, and re-imported to achieve a nice-looking end visualization

... the main unknown to me here is that I don't know what it means to "print" a geojson.  We're after the data moreso than the rendered view (which to me seems often the end effect of ipython notebooks showing GIS data transformations on GitHub)

(and also for context: happy to use anything python...especially if someone else's server is willing to run it and re-serve it so we can re-consume it :stuck_out_tongue: )

(and as an aside, I've been trying to approximate an Observable pipeline for something like this for some time): <http://devseed.com/sat-ml-training/DeepLearning_CropType_Segmentation>

Yeah - that is pretty similar to workflows I’ve done as well…

Maybe could be interesting to convert the geotiff to a database, and store each centroid as a point. Then when querying it you can build the square around it, after selecting by intersections

... Hm! Github's size limit for repos is huge, so generating tiles and hosting them in a repo might actually work?

I’ve done some spatialite stuff with observable: <https://observablehq.com/@abenrob/sqlite-geospatial-intersections?collection=@abenrob/spatialite>

In terms of workflows, maybe you could have a manual github action that triggers the script

<@U049ZHN9ELD> - I should have started this by calling you out directly :stuck_out_tongue:  doing so now being surprised you haven't chimed in :wink:

What’s the final presentation format/scope?

(Saneef has extreme patience and unlimited curiosity and problem-solving capacity as I rope him into helping me think through these problems.  And, like Fabian, he patiently teaches me all sorts of context. ... I cannot thank you all enough!  And thanks too to Adam, with whom I've been connecting more recently and whose notebooks already fill my personal reference library!)

final presentation = probably just a 4x5 printed image in some buried document.. we're mostly doing this to learn

Sorry, I’m late to the party. Reading through the comments

So likely an ETL =&gt; final image based on scope, as opposed to a full-coverage new dataset, or is the creation of a new full-coverage dataset part of the deal?

over the past 2 or so years we've been driving toward a data-driven reporting series to examine the environmental and social impacts of a planned hydropower project.  The end results of this sort of work are always public, and regrettably the outputs are less of a "public good" than they should be, because the data in the reports that are being visualized are all high-level abstractions and tiny, tiny, unreadable printed maps.

Saneef and I are trying to do better by using a central database to feed all the maps, tables, and so forth in the document... and to keep available to readers access to all source files so they can challenge our assumptions and draw their own conclusions

so we're trying to expose the source data, make all the steps in processing available and reproducible, and still to deliver figures and images that work for print.  Saneef has done so much incredible work to this end, and this is just one more data source that we're trying to fit into the overall stack

and for your question: yes, we're not interested in the full coverage of the source data

rather, we're interested in how one takes a data source, whittles it down to focus on a specific area, and then renders something descriptive and interesting about that area

regarding tiles, this GIS SE question might be of interest: <https://gis.stackexchange.com/questions/335907/converting-geotiff-to-tiles-using-gdal2tiles>

Node library to generate tiles (bit sparse on docs, but actively developed it seems): <https://github.com/GeoTIFF/geotiff-tile>

Nice. Not sure if interesting in conjunction with the above, but I ported some tile utils:

<https://observablehq.com/@abenrob/osm-tile-math>
<https://observablehq.com/@abenrob/azure-tile-math>
<https://observablehq.com/@abenrob/slippy-map-tile>

<@U048YB4AXU0> Used geotiff and plotty here, to visualize geotiffs - perhaps these could be used with the geotiff-tile output?

<https://observablehq.com/@ananya-roy/usgs-3dep-maps-with-adjustable-colors>

<@U04DB6A0CEQ> Did you mean to ping Ananya or Aaron?

Sorry, I completely missed that :man-facepalming: :sweat_smile:

Just finished reading the thread :sweat_smile: gdal2tiles combined with plotty for rendering could give you what you need. The conversion to tiles could be slow. I’ve previously let it run on an AWS EC2 instance. I think I saved the result to s3 to access because the cli made it easy to dump from ec2 to s3, but github probably works too.
Lots of map and Observable experts on this thread :slightly_smiling_face: and not sure I can add much more but happy to help if I can :)

<@U0489M6NVGU> <@U049ZHN9ELD> I think COG (Cloud optimized GeoTIFF) would be an excellent option here. (<https://medium.com/planet-stories/a-handy-introduction-to-cloud-optimized-geotiffs-1f2c9e716ec3>)
The caveat is that the serving infra needs to support *range request headers* - so not sure github could do that. s3-esque systems can, if hosting the datasource remotely is an option.

I haven't figured out how to build the pyramids using Observable and JS

I think pre-processing would be required? <https://saxenasanket.medium.com/cog-overview-and-how-to-create-and-validate-a-cloud-optimised-geotiff-b39e671ff013>

Article on building a dataset (w/ python) via github actions. Could be used for gdal stuff, although unclear on where it could be hosted which allows these range requests

(<https://towardsdatascience.com/simple-versioned-datasets-with-github-actions-bd7adb37f04b>)

Would be fantastic if ICIMOD could support that!

s3 seems to support, but that might not be the most transparent permanent solution, which is a main goal of yours.

<https://pypi.org/project/gdal2mbtiles/> could be used to create tiles jpeg/png, and the mbtiles could be kicked out to a file structure, so that could work on github, _however_, if jpeg/png, you’d need to encode the colors yourself, and it would be harder to change them or extract parts. Not impossible, just harder.

awesome ideas and suggestions, thank you!

yeah, my goals overall generally are about referencing source data and then showing how it's manipulated.  keeping copies of files often becomes important too--so many times I have used once public data in reports, and after time the links to these data disappear (changes to web architecture, desire to hide information, etc.)  archiving on S3 is one solution, just like file attachments on Observable (where possible), but when I start doing this, I typically try _not_ to expose my archives publicly for fear of breaking license terms, etc.

anyway - to the specific problem at hand, i probably could write to ICIMOD and ask them to host COGs... especially if I were already planning to build them for a project like this (great suggestion!). :slightly_smiling_face: and thank you and the others here for the great suggestions about how to efficiently work with raster data.  i am learning so much and am very thankful for this opportunity!

Dear SpatiaLite experts in the community:

How can I filter (`ST_Intersects`) using an external polygon? Example: <https://observablehq.com/d/6170d8244451a298> I need to select polygons from `buildings` that intersects with GeoJSON polygon `runway_buffer`.

I saw functions like `PolyFromText` and `GeomFromText`  in the Spatialite docs. But couldn’t get a working example.

Have you already come across @mourner’s <https://github.com/mourner/rbush|rbush library>? It is very fast for finding polygon intersections or inclusions.

<@U048YB4AXU0> Thanks. Seeing for first time. Will give it a try.

You can build a geometry from GeoJSON, and use that. I think I have an example somewhere

<https://observablehq.com/@abenrob/sqlite-geospatial-intersections?collection=@abenrob/spatialite>

In this case I’m using a buffer of a point, but you  should be able to do the same with a GeoJSON

Thanks <@U04DB6A0CEQ>, I have been following that notebook. Got it working in <https://observablehq.com/d/6170d8244451a298>, using NPM package `wellknown` to convert GeoJSON to WKT, which I can pass to ST_Intersects

I’m constantly conflating PostGIS capability with spatialite capability which is _not_ 1:1, so I never know if I’m saying nonsense…

<@U049ZHN9ELD> I sent you a suggestion to the notebook

I honestly don’t understand why sometimes the spatialite functions have `ST_` while others don’t… This also only works for a single geometry (fine in your case though)

You could also do the buffer in spatialite with `ST_Buffer` , with transforms to do so in meters <https://observablehq.com/@abenrob/sqlite-geospatial-buffers?collection=@abenrob/spatialite>

and use the linestring as the buffer source (wrapped in GeomFromGeoJSON)

But you lose the easy ability to preview the buffer…

Thanks for the suggestion <@U04DB6A0CEQ>. It is much shorter.

And, you are right about `ST_Buffer`. I had a requirement, where I need to filter based premade Geojson feature. So I was trying to figure that out with above exercise.

Screenshot Data Table vs SQL query.png

Great question! I’ve answered the question up on <https://talk.observablehq.com/t/data-table-vs-database-query-date-data-type/7558/2|the forum>. Let me know if you have any further questions!

Yes! That´s exactly what we did eventually :slightly_smiling_face:

Glad you figured it out! And thanks again for surfacing, you shouldn’t have to discover that workaround.

yes but it's complicated; see <https://observablehq.com/@mbostock/fetch-utf-16>

(using `FileAttachment("...").arrayBuffer()`)

```tempe_rcp45_annuel = new TextDecoder("iso-8859-1").decode(
  await FileAttachment("Tempe_RCP4.5_annuel.txt").arrayBuffer()
)```

For reference, I’m trying here: <https://observablehq.com/d/fc2d807a0fbe1480>

Did you get this?  I see that "azimuthal-equal-area" (EPSG:3035) is one of the built-in projection types (and it's what you are using in your example).

Not really. I can see how <@U048X1JDDHN> defines the projection, and If I make the entire projection object match his def, it works, however I can’t see how to use the domain to fit to my data bounds…

From these statements, my understanding is that your aim is to "zoom in" using plot?
&gt;  but I don’t know how to do things like use domain to limit the geographic scope
and
&gt;  I can’t see how to use the domain to fit to my data bounds
? - correct
... And separate from this, you wish to define a custom projection: Lambert-93 (EPSG:2154)

With respect to getting a different domain, an approach that seems to work (if I am understanding correctly) is simply to set domain as the bounding area of some place, for example paris:

```paris = ({
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [1.790893,48.488324]
      },
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [3.108866,49.182529]
      },
    }
  ]
})```
... I haven't exactly figure out how to write a custom projection yet (sounds like you have).  Would be interested if <@U048X1JDDHN> would be willing to elaborate that a bit more in the projections notebook :slightly_smiling_face:

Capture d’écran 2023-01-28 à 09.54.11.png

If the grid in the data comes from the Lambert93 projection, we can reproject the coordinates with that projection and they should be gridded again. Lambert93 in D3 is
```d3
  .geoConicConformal()
  .parallels([44, 49])```
<https://observablehq.com/@fil/proj4js-d3>
So in Plot it would be:

but as Adam says it doesn't seems to be exactly Lambert93, with this projection it still seems tilted with a small angle.

```  projection: {
    type: "conic-conformal",
    parallels: [44, 49],
    rotate: [-3, 0],
    domain: geodata
  },```
this seems correct

I think you can specify something like `{sort: {limit: 10}}` for a static limit

For reference, here are the docs on the various sort options. Limit is mentioned near the end of the section: <https://github.com/observablehq/plot/blob/main/README.md#sort-options>

Thank you, <@U048X1JDDHN>, for the <https://observablehq.com/@fil/proj4js-d3>. I can use it to draw maps with official projections!

It looks like you need to share notebook. :confused:

<@U049J8QUGKF> whoops I forgot to hit the ‘save’ button…

super hacky, but probably something like this?
```tickFormat: d =&gt; {
      const formatDay = d3.timeFormat("%d");
      const formatMonth = d3.timeFormat("%b");
      const date = parseTime(d);
      const day = formatDay(date);
      return day === "01" ? formatMonth(date) : day;
    }```

hmm it’s look rather funny, but I’ll try a bit to hack the format a bit more.

Capture d’écran 2023-01-29 à 7.53.07 PM.png

It seems to skip some days, and I’m not able to set a number of ticks by using the `tick` field.

I think those are gaps in your data. Maybe try setting interval:"day" for your axis?

oh I see. I will probably have to manipulate the data to get it to work.

I think the problem here is that Plot doesn't recognize the strings as dates. Instead of creating specifying a custom domain and tick format you might want to convert your data to contain actual dates.

```books.map(d =&gt; ({
  ...d,
  start: parseTime(d.start),
  end: parseTime(d.end) ?? Date.now()
}))```

Here's what I get after fixing the dates (just to show what Plot produces out of the box):

Ok I think I'm going to forget about cleaning up perfecting the axis labels and leave it at that. Axis formatting is no fun. Thank you so much! It's off because I transformed the data in plot, but that didn't work (you can see my efforts are greyed out). I should've tried directly transforming the data.

in Plot, faceting is a data partitioning operation, which will distribute the three points on either facet A or facet B. What you can do if you want to consider aspect a _and_ aspect b of the data, is to duplicate the dataset like so:
`data.flatMap(d =&gt; ["a", "b"].map(field =&gt; ({value: d[field], type: field})))`
then partition it with `facet: {y: "type"}`

I have a bunch of entities (groundhogs) that either see a shadow or don't . I'd like the beeswarm to grow in the right direction if they see the shadow, and left, if they don't. I'd also like a line to describe the proportion of shadow v not shadow

I managed to pull this off:
```Plot.plot({
  marks: [
    Plot.line(years, { y: "year", x: "proportion" }),
    Plot.dotY(
      predictions,
      Plot.dodgeX({
        y: "year",
        filter: (d) =&gt; d.sawShadow,
        anchor: "left",
        fill: "sawShadow"
      })
    ),
    Plot.dotY(
      predictions,
      Plot.dodgeX({
        y: "year",
        filter: (d) =&gt; !d.sawShadow,
        anchor: "right",
        fill: "sawShadow"
      })
    )
  ]
})```
but the swarm is in the wrong directions!

I can achieve sort of what I want if I facet

```Plot.plot({
  marks: [
    Plot.line(years, { y: "year", x: "proportion" }),
    Plot.dotY(
      predictions,
      Plot.dodgeX({
        y: "year",
        filter: (d) =&gt; d.sawShadow,
        anchor: "left",
        fill: "sawShadow",
        fx: "sawShadow"
      })
    ),
    Plot.dotY(
      predictions,
      Plot.dodgeX({
        y: "year",
        filter: (d) =&gt; !d.sawShadow,
        anchor: "right",
        fill: "sawShadow",
        fx: "sawShadow"
      })
    )
  ]
})```

but it duplicates the proportion line. Any ideas?

ah don't worry: found a solution with the stack mark! <https://observablehq.com/@observablehq/plot-stack#cell-521>

this is what I came up with <https://observablehq.com/d/57224162883fffde>

I think just one mark works too
```Plot.plot({
  marks: [
    Plot.dotY(
      data,
      Plot.stackX({
        x: (d) =&gt; (d.sawShadow ? -1 : 1),
        y: "year",
        anchor: "middle",
        fill: "sawShadow"
      })
    )
  ]
})```

this is what I ended up with:
```Plot.plot({
        marks: [
          Plot.dot(
            predictions,
            Plot.stackY2({
              x: "year",
              y: (d) =&gt;
                d.conclusion === "🌼 early spring"
                  ? 1
                  : d.conclusion === "❄️ longer winter"
                  ? -1
                  : 0,
              fill: "conclusion"
            })
          )
        ]
      })```

(in context: <https://observablehq.com/@mjbo/determining-the-accuracy-of-mystical-rodent-prophecies#cell-208>)

It sounds like you want a file attachment. In general, the durable part of an Observable notebook is only the code. Any effects of running the code are lost in a refresh.

Hey thanks for the suggestion! The main reason I use the file input is because I can't upload sensitive data, so file attachment is not an option unfortunately

Why do you want to store the name of the file durably?

So I can have a record of which file I use for which notebook

You could use the browser's local storage to store that. It would be tied to one computer though. Would that be enough?

I think that sounds promising, how would I go about that?

here is some documentation about localstorage in general. <https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API>

Let me also make a quick demo of what I had in mind in a notebook

<https://observablehq.com/d/5b757a31fd4f7329>

the `fileLog` cell is a viewof that doesn't change it's display, but updates it's value everytime `viewof fileLog.addFilename` is called. Those changes are saved to durable local storage

Getting `fileLog` to directly show the log of files is possible, but I thought it would distract a little from the localstorage usage.

It looks like you've made great progress so far. What do you need help with?

Hi, Michael! I need help with rendering path, and dragging.

Screencast from 2023-02-06 16-15-59.webm

path should wrap around the only target square

how would you solve this in normal javascript?

You can write me your github username and I'll share with you private repo

This is a help forum for Observable, not for general Javascript problems

<https://d3js.slack.com/archives/C07EVSL59>

there’s a `d3js` slack with a `#help` channel

does not have an account in this workspace.

Need an invitation for <http://d3js.slack.com|d3js.slack.com>

<@U04NJU164KB> I shared the invite link in your forum post.

I asked someone from fiverr. He made this)))

Screenshot 2023-02-10 at 12.46.24.png

You might have to import this way: <https://observablehq.com/d/4432584d8ac3a15b>

Sweet! May I ask why `require` is not working? I mean I `require` d `three.js` successfully.

The <https://observablehq.com/@observablehq/module-require-debugger|module require debugger> may prove useful here.

You can only use dynamic imports in cells. The static-like syntax is reserved for imports from other notebooks.

As a first reaction, calc shouldn't be viewof. It should just be `calc = form1.a + form1.b`

and you also don't need `viewof calc` in the html element, just `calc`

I'd also recommend not putting form1 inside of the html. I'm not sure if it works or not, but keeping it outside is probably better for now

```calc = yield Promises.delay(200, form1.a + form1.b)```
It seems to be because the change to `calc`  causes the div to re-render right away as soon as the slider value changes, so you can't drag it around. Try this bit.

if you are trying to put the controls and the output of the controls into one cell output, that's an advanced usage. It's possible but takes a more complicated set of combinations

Thanks Melissa and Michael.  I removed the 'viewof'   on calc, I can't share my notebook for IP reasons, but this example drives the issue with the range sliders.

When I tried using yield, I ended up with "calc is not defined", but removing the yield gave me something that updates when you release the slider.  I think this will work for what I need! Thank you! :grinning:

I just had a simular issue with a slider a couple of days ago. When I appended the viewof form to an other cell, which also uses the values of the viewof, the slider was stuck to single steps in chrome (it worked in firefox). As <@U04NC823NAJ> pointed out the cell gets re-rendered as soon as the viewof changes. My solution was a bit different though. I ended up makeing shure the viewof only gets appended once and not on every re-render of the cell by checking if a container allready exists.

<@U04L09MHU31> - That might be a better solution. The delay actually only allowed you to drag it for a short while, after that it got stuck again.  I ended up giving up on my idea of having the form and plot side by side, but maybe I'll come back to it some other time.

You must ensure that changing your form inputs does not invalidate the cell in which you want to display them. Otherwise the cell rerenders and the input loses focus - that's why dragging only works in "single steps".

This widget might help you achieve what you're trying to do: <https://observablehq.com/@mootari/dashboard-with-inputs>

Not really. kind of topic modeling for several years

There's a quite a few ML related notebooks. What has your own search turned up so far?

I found some notebooks on topic modeling. but in that case, the topics and corresponding topic scores were preprocessed and loaded as a dataset

are you looking for algorithms or libraries?

<https://observablehq.com/@olemi/topic-model>

<https://observablehq.com/@alisonmsmith/user-behavior-plot>

oh, you mean implementations over the years?

i feel you might have an easier time looking for github gists, tbh. observable as a platform is still fairly young, and JS isn't exactly the first choice for ML (and wasn't even considered an option for many years)