Observable-Community

image.png

The reason I ask is that I seem to get divergent plots when using `groupX`

whilst a reproduction of the original contrived plot produces an identical plot

I think you can reproduce the `auto` plot by using `binX` instead of `groupX` :
```Plot.areaY(data, Plot.binX({y: "count"}, {"x": "x", "fill": "color"}))```

<https://observablehq.com/@demoteam/intro-js-session-1>

<@U053YF5331B> thank you :slightly_smiling_face:

still getting this. I've refreshed the page a few times
Posted in #introduction-to-javascript

in these minimal reproductions, `areaY` just doesn't seem to want to respect

it gets somewhat weirder when the cardinality of `fill` gets high*

`reverse: true` I think reverses just the color legend domain, but not the area stacking order

anyway, this _feels_ like a bug: would someone be able to confirm that I'm not holding the interface wrong somehow?

The problem is that the *reverse* option is also used for the built-in sort transform (to reverse the mark index), and hence it takes effect _before_ the bin transform rather than being interpreted as an option to the stack transform. If you want to pass it to the stack transform, you need to call Plot.stackY explicitly and pass {reverse: true} as the first argument:
```Plot.areaY(data, Plot.stackY({reverse: true}, Plot.binX({y: "count"}, …)))```

As a notebook: <https://observablehq.com/@observablehq/plot-stack-with-reverse-order>

ah, brilliant, thanks <@U048G7LAQ5A>! I had a feeling that perhaps the `reverse` was in the wrong spot, completely forgot that there was a `reverse` in the sort transform too

I suspect this might be your problem? (assuming you're seeing the same error)

yes I see the same, let me update this real quick

Now I’m stuck with this error though: I don’t really understand how the data in the tin.data array is arranged

Been looking at @fils implementation here, but still struggling to understand what’s going on <https://observablehq.com/@fil/hello-delatin>

The triangles are already being build by Delatin, so you shouldn’t need to worry with the `data` BufferArray, if I’m not mistaken… I _think_ the `triangles` Array is comprised of `vertex1,vertex2,vertex3,elevation`  quadruplets, so you may need to just build each triangle in three.js? I have not tried myself, so just speculating at first glance.

In further inspection of <@U048X1JDDHN>’s notebook, the `.triangles` contain `point1,point2,point3`` triplets, which can be looked up in `.coords` .and then the average elevation for the triangle is accessed via `.heightAt(μx,μy)` .
Seems like `THREE.PolyhedralGeometry` could be used to <https://observablehq.com/@sxywu/three-js-exploration-shapes#cell-31|build the triangles>.

Thanks Adam! Will look into this :slightly_smiling_face:

alright, update the code accordingly, but at least the indices need to fixed now

Hi Sanzhar,
If you are using the Plot library, you can use “title” inside a mark to display a value on hover: <https://observablehq.com/@observablehq/plot-bar#cell-1005>. For a more responsive tooltip that can even be styled, use the addTooltips function with Plot: <https://observablehq.com/@mkfreeman/plot-tooltip#cell-64>
Is this what you were looking for?

On your second question about a chart that is a box with a single number in it, you could use Plot.cell to draw a single cell. You could also make a simple box with a bit of css and html. Both examples here: <https://observablehq.com/d/e5345e1f8a9855e7>

Hi Adam - here is an example of Plot.geo with facets, is this what you’re looking for? <https://observablehq.com/@observablehq/plot-mapping#facets>

Thanks - somehow I was only finding this one: <https://observablehq.com/@observablehq/plot-geo>

There’s a short example here if it helps: <https://observablehq.com/@observablehq/plot-map-small-multiples> (Edit: It’s the same as the one Allison linked, just broken out into a separate notebook for easy forking.)

I have done something similar. My approach was a bit hacky, but I created a function that characterized the axis based on the data (e.g., tick distance, min/max) and then fed that to a custom react element while suppressing the default axis plot.

untitled.png

I am trying to see how different color schemes behave under different color vision deficiencies. This is what I've plotted so far:

produced with the following code:

```{
  const none = (t) =&gt; culori.formatHex(t);
  const greyscale = (t) =&gt; culori.formatHex(culori.filterGrayscale()(t));
  const deuteranopia = (t) =&gt;
    culori.formatHex(culori.filterDeficiencyDeuter()(t));
  const tritanopia = (t) =&gt; culori.formatHex(culori.filterDeficiencyTrit()(t));
  const protanopia = (t) =&gt; culori.formatHex(culori.filterDeficiencyProt()(t));

  const turbo = (t) =&gt; d3.interpolateTurbo(t);
  const viridis = (t) =&gt; d3.interpolateViridis(t);
  const plasma = (t) =&gt; d3.interpolatePlasma(t);

  return Plot.plot({
    color: { type: "identity" },
    nice: true,
    aspectRatio: 322 / 420,
    fx: { tickFormat: (f) =&gt; f?.name },
    fy: { tickFormat: (f) =&gt; f?.name },
    marks: [
      Plot.raster({
        fill: (x, y, { fx, fy }) =&gt; {
          console.log(fx, fy);
          if (fx &amp;&amp; fy) {
            return fx(
              fy(monaLisaLightness[Math.floor(322 - y)][Math.floor(x)])
            );
          }
        },
        fx: [none, greyscale, deuteranopia, tritanopia, protanopia],
        fy: [turbo, viridis, plasma],
        x1: 0,
        y1: 0,
        x2: 420,
        y2: 322
      })
    ]
  });
}```


you'll notice a few things:

1. _some_ of the faceting works, and the functions are getting passed down just fine

2. you'll see that `console.log` in the `fill` function? Well it turns out that `fx` and `fy` are `undefined` a lot

in fact, the squares that nothing was rendered in corresponds to when `fx` and `fy` were `undefined`

(I don't have an answer, I just wanna say thanks for sticking to this :thread: format! :pray:)

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

My first instinct would be to plot one of the broken combos in a separate cell to see the produced values

using
```        fx: [protanopia],
        fy: [turbo],```


maaaaybe? I dunno what could be wrong with the domain configuration given that its working with some of the images :grimacing:

what's also noticeable is that every row and every column only has one entry, and that repeating the functions in the domain doesn't work either

okay I made a subtle error with the raster bounding but fixing that didn't affect the bug

I think it may be time for me to look at the source code because I'm worried this is a bug lol

I think I'd try to build back to only pass through the initial values, ignoring the actual domain

I give up. I tried to make sense of the faceting based on <https://observablehq.com/@observablehq/plot-raster?collection=@observablehq/plot#cell-762> (note how each domain has 4 values?), but I don't see a clear pattern.

Maybe <@U048X1JDDHN> can help?

OK, I've grokked it. You need to supply domain values for _every_ facet:
```        fx: [
          none, greyscale, deuteranopia, tritanopia, protanopia,
          none, greyscale, deuteranopia, tritanopia, protanopia,
          none, greyscale, deuteranopia, tritanopia, protanopia,
        ],
        fy: [
          turbo, viridis, plasma,
          turbo, viridis, plasma,
          turbo, viridis, plasma,
          turbo, viridis, plasma,
          turbo, viridis, plasma,
        ],```

you could use d3.cross to make the matrix

untitled (2).png

Linked below, but also here! <https://observablehq.com/@demoteam/intro-js-session-3>

Here's the link to the notebook for the course. Fork away! <https://observablehq.com/@demoteam/intro-js-session-3>

The data table cell is an easy way to view the results in a spreadsheet like view

<https://observablehq.com/@observablehq/data-table-cell>

dataTableMenu_v6.png

There are a few different table view options when you open a cell menu:

Screen Shot 2023-04-26 at 1.22.12 PM.png

You can also download your data to CSV, if its in a tabular format, by clicking on the cell options and choosing “Download CSV”

“Data Table”…. that’s what I was looking for.  Thanks <@U0484N0KZ0D>!

Sorry if my earlier response in the comments was too obtuse!

No worries!  This detail is really helpful and Allison revisited it too.  Thanks again!

• As far as I'm aware we generate a thumbnail for every version. When you make changes the update gets queued. The delay depends on the size of the queue.
• Yes, for the specific version.
• We pick the first svg, img, canvas or table above a certain size.
In general we encourage authors to set a custom thumbnail. There are a lot of factors that can cause thumbnails to not generate properly, e.g. when external dependencies in your notebook load delayed, or the first image or plot requires a lot of upfront processing.

Thanks for the info.

Just to explain my questions: We are thinking of using the thumbnails in our website in an overview that can be filtered by a tag system. Since there will be a lot of charts, a manual solution is not very practical in our case. But we might have to build our own thumbnail generator, since we would also like to regenerate the thumbnail if the unterlying data changes (from an api).

Are you planning to embed the notebooks into your site, or do you want to point the links to Observable? And do you intend to publish your notebooks as unlisted?

We intend to embed the notebooks and we don't have a particular policy concerning listing or unlisting the notebooks. I think we don't care if they are listed.

Unfortunately we don't have any official API to fetch or to update thumbnails. Your idea of using your own thumbnail generator seems reasonable.

The alternative would be to scrape the information from our internal API (which we neither endorse nor support :slightly_smiling_face:).
```<https://api.observablehq.com/document/ce966ce69353f815/head>```
```{
    "creator": {
...
    },
    "fork_of": true,
    "id": "ce966ce69353f815",
    "owner": {
...
    },
    "slug": "zahlen-und-fakten-in-bildung/1234",
    "thumbnail": "a0a5f7c6e517ecb12b411448a92f599259aa911bf559be95afbc74ca6f074282",
    "title": "Zahlen und Fakten in der Bildung (Grafik 1 bis 4), Überblick Primar- und Sekundarschule, Berufs- und Mittelschule",
    "update_time": "2023-04-19T11:17:09.053Z",
    "version": 3691
}```

We have similar internal endpoints for collections, but these (and the notebooks contained) would have to be public in order to be accessed that way.

Thanks for looking into my problems. I think I now have the necessary information to continue with with our tasks.

A few clarifications to what I wrote earlier:
&gt; As far as I'm aware we generate a thumbnail for every version.
We make an effort to generate a thumbnail for every _current_ version, but will debounce generation. So not every version will have a thumbnail.
&gt; Yes, for the specific version.
While we only track the latest thumbnail, we currently don't delete old thumbnails, and there are no plans to change that.

you can change the width of a column in a SQL cell by clicking + dragging the right border of the column’s header cell. however, that width change doesn’t persist across reloads and is visible only to you – if you want to be able to set the width persistently, Inputs.table is the way to go

~We don't have a formula cell, only the tex string literal.~ (edit: please see Mike's correction below) You can find its documentation under the following links:
• <https://observablehq.com/@observablehq/stdlib#texSection>
• <https://github.com/observablehq/stdlib#tex>
We also have community contributed resources, like
• <https://observablehq.com/@dvd101x/textool|this notebook> that lets you experiment with the notation on the fly,
• <https://observablehq.com/@s-haensch/latex-notation|or this overview> of the LaTeX notation.
I'll check with the team to see if we can make the documentation for it more discoverable though.

Screenshot 2023-04-28 at 9.22.07 AM.png

Screenshot 2023-04-28 at 9.21.49 AM.png

There is a tex cell, Fabian. It’s backed by KaTeX. <https://katex.org/>

<@U048G7LAQ5A> I completely forgot about that one, thanks for the reminder! :man-facepalming:

Thanks for the links!

What I needed to achieve was having a multiline equation that is aligned on the ‘=’.

Looks liket his is supported here:

on this page:
<https://katex.org/docs/supported.html>

That appears to be a limitation of KaTeX which is <https://katex.org/docs/issues.html#docsNav|mentioned somewhat hidden in the docs>:
&gt; KaTeX does not support the `align` environment because LaTeX doesn't support `align` in math mode. The `aligned` environment offers the same functionality but in math mode, so use that instead.
As described there, the workaround would be to use
```\begin{aligned}
   a&amp;=b+c \\
   d+e&amp;=f
\end{aligned}```
instead.

the _data_ passed to the image mark is *logo*, which has a length of logo.length = 175

so the mark piled up 175 images on top of one another

replace it with {length: 1} (or equivalently,  [null])

```    Plot.image({length: 1}, {
      src: [logo],
      frameAnchor: "top-right",
      href: ["<https://github.com/zachbogart/huh-data>"],
      target: "_blank",
      width: 150,
      dx: -80
    }),```

Excellent catch, thanks for the clarification. This correction should also be applied to the <https://observablehq.com/@observablehq/custom-plot-themes#cell-459|custom plot theme notebook>. ◆

Screenshot 2023-05-01 at 15.28.11.png

you almost had it!

```Plot.plot({
  color: { legend: true },
  height: 500,
  width: 1200,
  facet: {
    data: total,
    x: "segments"
  },
  marks: [
    Plot.dot(total, {
      x: "year",
      y: "general renevue",
      stroke: "company"
    }),
    
    Plot.rect(
      total,
      Plot.selectLast({
        x1: d =&gt; d["year"] - 10,
        y1: d =&gt; d["general renevue"] - 500,
        x2: d =&gt; d["year"] + 10,
        y2: d =&gt; d["general renevue"] + 500,
        fill: "yellow",
      })
    ),

    Plot.text(
      total,
      Plot.selectLast({
        x: "year",
        y: "general renevue",
        text: "general renevue",
        fill: "black",
        frameAnchor: "bottom"
      })
    )
  ]
})```

swapped rect and text around for paint order and replaced rect x and y with x1 y1 x2 y2

I would suggest a rect with negative insets (and rx for rounded corners):
```Plot.rect(
      total,
      Plot.selectLast({
        inset: -60,
        insetTop: -16,
        insetBottom: -16,
        rx: 15,
        fill: "pink",
        x: "year",
        y: "general renevue",
        text: "general renevue",
        frameAnchor: "bottom"
      })
    ),```
and to make it well-balanced, use `lineAnchor: "middle"` in the text mark

Screenshot 2023-05-01 at 8.27.12 PM (2).png

we tried exporting the two cells as a web page, where we could have them side by side, but then it looses interactivity between cells

I am thinking of `viewof` cell.

1. You can set the *programmatic value* as something like `chartCell1 = {…return html` chartElement` }`, and it presents a *HTML UI* in return.
2. but you can change `chartElement.value` when clicking or hovering the elements. It will be returned as `chartCell1` . Use `chartCell1`  as the interactively updated variable in the second chart cell.
Just a thought. It would be awesome if there are other approaches or examples.:sweat_smile:

You can bring the elements together by referencing them all in another cell:
```htl.html`&lt;div&gt;
  ${swatch}
  &lt;div style="margin-top: 20px; display: grid; grid-template-columns: .8fr 1fr"&gt;
    ${donutchart}
    ${parallelchart}
````
Doing so will remove them from their original cells, as an element can only exist at one place in the DOM. You'll notice that the original cells will now display `&lt;detached&gt;` .

<@U04SLK17G30> I just saw that the interactivity is done via a side effects cell. Side effects in Observable are a pattern that is discouraged because it works around Observable's dataflow and prevents tracking of dependencies between cells. In order to run your side effects you would have to name the cell and include it in your embed.

My recommendation is to have your side effects cell return the snippet that I shared above. That way you only need to include that particular cell.

uuugh, that seems promising but i don't get how do i set the value of a viewof

```colorView = html`&lt;value=chart&gt;````
doesn't do it

Try this `viewof color = {`
  `let angie = html`&lt;input type="color" value="#0000ff"&gt;``
  `console.log(angie.value)`
  `return angie`
`}`

While I'm a big advocate of introducing people to the <https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us|power of viewof>, I'm not sure that it contributes to solving the problem in this case (at least not without some major rewriting). :slightly_smiling_face:

<@U04SLK17G30> Here are a few of the changes that I mentioned: <https://observablehq.com/compare/b84556f73b0506cc...5a50ae726b31e5ba>

wow thank you so much! just what i needed

Looks like the version that's referenced in stdlib is a bit behind.

Add the following to your notebook:
```import { aq, op } from '@uwdata/arquero'```

Screenshot 2023-05-03 at 10.50.11 AM.png

Hi John, sorry for the difficulty! The issue might be that your username and workspace URL have to be different. We're working on making this clearer/easier!

aha! that is clear now that you've pointed that out!

now I'm really curious how this is implemented on the backend, but using different strings solves it.  thank you Libbey.

Since both users and workspaces are document owners, they share a namespace for the URLs

Hi Jared! Glad you are enjoying the platform! I believe that if your Arquero database is loaded, it's already available as JS. For example, in <https://observablehq.com/@uwdata/introducing-arquero|https://observablehq.com/@uwdata/introducing-arquero> the database is loaded as `db` and typing `db._names` will allow you to access that part of the data object as a JSON array. Do you have a notebook to share where you are getting stuck?

Hi again! <@U048EJNREUB> also reminded me of this resource, which may be a better help: <https://uwdata.github.io/arquero/api/table.html#objects|https://uwdata.github.io/arquero/api/table.html#objects>

Another quick hack is to create a Data Table cell from the Arquero table and then you can access the data from the Data Table as a normal JSON array.
See <https://observablehq.com/d/ec2017eace60cb58>

Hi <@U04832DMXPV> , I just looked at your notebook, and saw where “data” correlated to the “flights” Arquero table loaded from Arrow. Any idea how I could do the same thing if I’m writing OJS within Quarto?? I’m working projects that tie R, Python and OJS all together in a Quarto doc. 

You can pass Arquero tables directly to Plot and visualize them, too. <https://observablehq.com/@observablehq/plot-arquero>

Great! Thanks <@U048G7LAQ5A> !! Everyone’s been so helpful here!

Woops: Posted this yesterday but didn't add it to the thread.

```array = aq.from(ALL_ts_co2).select("Year_of_Registration_date","Body_type",'Motor_tech','Vehicle_class','CO2_band').objects()```
I got this .objects() tip from <@U0487QF709Z> who mentioned it in the chat of <https://www.youtube.com/watch?v=jPUFr6QktQs>

Thanks Sara

Not sure if I got your example right. I tried to come up with a minimal working example, using a list in `R` for the paths to the images:

``````{r}
fig_list &lt;- list(
    "kitten a" = "<https://cdn.pixabay.com/photo/2019/11/08/11/56/kitten-4611189_1280.jpg>",
    "kitten b" = "<https://cdn.pixabay.com/photo/2016/03/28/10/05/kitten-1285341_1280.jpg>",
    "kitten c" = "<https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_1280.jpg>"
)
ojs_define(fig_list)
```

```{ojs}
viewof file = Inputs.select(Object.keys(fig_list), {label: "Choose feature"})
```

```{ojs}
html`&lt;img src="${fig_list[file]}" /&gt;`
``````
`R` lists seem to get converted to objects in javascript.  That might be one issue with your code: I think Inputs.select expects an array.
Also, the `viewof` and the html for the `&lt;image&gt;` need to be in separate observable cells :slightly_smiling_face:

Does this help?

&gt; I think Inputs.select expects an array.
Small clarification, Inputs.select accepts an _iterable_. It works best with Maps where it will automatically handle key and value. To avoid having to provide the format and valueof options, pass your object in as `new Map(Object.entries(obj))`.

Thanks to both of you with valuable inputs!
The reason that I was trying to print the variable was to troubleshoot another error (non-functional drop-down list).
Now I could fix it there were issues in structure of the qmd file which I could not figure out what it was but I used a template to fix that. Anyhow, I learnt from your feedbacks, Thanks!

if you want to save different combinations of filters/sorts/etc, you’ll have to do that with separate Data Table cells

to programmatically control the data that’s shown, you could create a named JavaScript cell with code to manipulate the data, and set that cell as the source for your Data Table cell

It would be nice for data wrangling purposes to export as a function or cell, the settings a user defines  here.

I think the easiest way to do this now would be specifying the value as a function, like `(d) =&gt; d.value &lt; 0 ? -1 : d.value &gt; 200 ? 201 : d.value`. I could see adding a *clamp* option to the bin transform, but that would treat values as &lt;0 as 0, and values &gt;200 as 200.

Thanks for you help <@U048G7LAQ5A>, thats indeed a simple solution!

Bildschirm­foto 2023-05-10 um 10.22.54.png

With this solution, one would still need to manually add a greater or smaller than sign to the label for the first and last bin, though, e.g.
```x: {
  tickFormat: (d, i, arr) =&gt; (i === arr.length - 1 ? "&gt;" + d : d)
}```


Observable recently launched a feature that will allow you to share notebooks without using 'publish unlisted'.  Here's the documentation on the feature: <https://observablehq.com/@observablehq/api-keys>  Using it is simple: just select "embed" from any named cell, and the modal interface will help you auto-create an API key.

Your other option would be to add guest viewers to your notebook, as long as you have a Pro team. Other than these options, you would need to make the notebook unlisted in order to share

You can create a new data source via duckdb:
```data = DuckDBClient.of({
  tableName1: dataSource1,
  tableName2: dataSource2,
})```
and then set it as source in an SQL cell.

Thanks <@U048E2BJL9Z>, I never would have thought of that.

doctor-who.png

brainstorming out loud, this might be a hacky solution, in the end i used Math.random to add a jitter effect

untitled (80).png

If it helps, here is a skeletal approach of how I might do this. (I didn’t attempt to reproduce your aesthetics, just the basic structure with marks.) I used the dodgeY transform for the beeswarm in conjunction with faceting.  <https://observablehq.com/d/a26e34c1902de423>

For the jitter, I did a fancy version of this idea
```x: (d) =&gt; d.rating + Math.random() - 0.5```
except I wrote it as a `jitter` helper so that I could use a seeded random number generator so that it always produces the same result, like so:
```function jitter(value, radius) {
  return {
    transform(data) {
      const source = d3.randomLcg(42); // seeded random for determinism
      const random = d3.randomUniform.source(source)(-radius, radius);
      return Plot.valueof(data, value, Float64Array).map((x) =&gt; x + random());
    }
  };
}```

We could definitely add a jitter (jitterX, jitterY maybe?) transform to make this a little easier. I’ll file a feature request for that.

Faceting seemed to work pretty well, so I’m curious if there are still reasons why it wouldn’t work for you here? The most awkward part in my experience was that I had to calculate the overall average rating for the ruleY mark that connects the average per-doctor to the overall average. Also, I first tried to use the link and arrow mark for that, but we don’t allow them to be one-dimensional currently. I filed a feature request for that too!

Also, thank you so much for sharing your work in progress like this! Whenever you share it spawns like a half-dozen feature request ideas for Plot and helps us ground what we build next! :pray:

thank you <@U048G7LAQ5A>! really appreciate you digging into the code to give some ideas on how to do it. really slick tricks with the facet, a lot more straightforward than what i cooked up :laughing: ps the new Observable Plot site is really handy, learning a lot as I go thru some of these ideas (search feature is :fire:)

:joy: nvm what I just said, it seems like it also supports
``` years = [dA, dB, dc];
 populations = [pA, pB, pC];
Plot({ marks: [Plot.barY(populations, { x: years })```
this is always something I tried to get out from documentation but cannot find it anywhere

this is a perfectly fine data shape for Plot, just pass a {length} object as data, and your channels directly:
```Plot.barY({length: 3}, {x: [dA, dB, dc], y: [pA, pB, pC]})```

do you know where I could find these kinds of info from the documentation

<https://observablehq.com/plot/features/marks#marks-have-channels>

(search for “an array of values of the same length and order as the data”)

from this channel or google search or search bar in official doc?

to highlight the sentence in the page I linked to

oh thx a lot, I actually found it by myself

<@U048X1JDDHN> just an extra question regarding the matrix, it's quite general for table like data, but this is not supported by plot without custom transform right?
```[
  [d1, p1],
  [d2, p2],
  [d3, p3],
]```


you can use {x: "0", y: "1"} to read these values, and for some marks that is just the default, see <https://observablehq.com/plot/features/shorthand>

wow, really appreciate your help, it might take me forever to search them or until someone told me those exist

Hi Dylan.  At present, there is no way to  find and replace data sources across multiple cells. You might wish to add this request to our feedback repo.  Separately, you could request a feature that would allow reference to a data source to be dynamically updated if the original data source name changes.  Thank you for the great suggestions! <https://github.com/observablehq/feedback>

For anyone reading along I'd like to add that this only applies to *data sources*. Code can be replaced across all cells using the Find/Replace pane in the side bar.