Observable-Community

What are you referring to with minimum / maximum?

With specifying the y.domain array you can set the min and max for the domain. The domain is refering to the data space. I think you are right maximum is the maximum of the data and the minimum defaults to the minimum if negative otherwise 0.
If you create your plot as a named cell, e.g. myPlot = { // insert Plot here }, then you can look up the domain with myPlot.scale("y").domain

With specifying the y.range array you can set the min and max for the range. The range is refering to the screen space.
If you create your plot as a named cell, e.g. myPlot = { // insert Plot here }, then you can look up the range with myPlot.scale("y").range

<@U04HH1P8J7M> thx for the confirmations, I think one of the annoyance is that I need to set the domain during the plot initialization unless I misunderstood something, such that
```    const barPlot = Plot.plot({
      x: { },
      y: {
        // precompute domain here, that's why I asked that original question
        domain: custom_domain,
      },
      marks: [
        Plot.barY(dataset, {}),
      ],
    });```

unless I can do something magical like
```const barPlot = Plot.plot({}) // without setting domain here

const current_default_domain = barPlot.getDomain()
barPlot.updateDomain([ do some comparison and update according ])

//rendering the plot```

I'm new to `observable plot` and `d3` , so I just have some random idea in my mind based on the doc and typescript hint most likely

Yes, that is correct how you describe it. you might use one cell getting the default domain
```// cell 1 
myYDomain = Plot.plot(// your Plot).scale("y").domain```
and another cell to render with the Plot with the same options but initializing the y domain with an adjusted domain based on the default domain you obtain in cell 1

oh thx, I just try it out, another reason I asked the `update`  thing is also because I was using `react` , it could be handy if I precompute the `plot` and then just do the partial update without rebuilding  the entire graph.

Why so you need the default values for the domain? I find typically you either go with the default domain. Or, alternatively, you set the domain according to your needs, then you just set the domain without the need to know the defaults

it's just for users technically if they just interesting in things above certain min, and ignore the below, vise versa. And if they are being lazy to set the another min/max, sacrifice DX for UX strictly

<@U04HH1P8J7M> just a little feedback for this approach, it seems like there is not easy way to update existing svg domain created by the plot(); so precompute is probably the way to go. or a pretty bad way that calls the plot twice, the first time is just for getting that default domain like.
```    const draftMarks = Plot.marks(
      Plot.barY(dataset, {})
    );
    const defaultDomain = draftMarks.plot().scale("y")?.domain();
    
    const customDomain = [] // do something based on defaultDomain;

    const barPlot = Plot.plot({
      x: {},
      y: { domain: customDomain },
      marks: [draftMarks],
    });```

They are still available as PDFs at <https://github.com/observablehq/plot-cheatsheets>, but they are no longer maintained or supported.

If you want the notebook you could take a look at any of the forks: <https://observablehq.com/@observablehq/plot-cheatsheets/forks>

the embed views are also still available!

<https://observablehq.com/embed/@observablehq/plot-cheatsheets>

image.png

Looks like a bug to me! :bug: But you can revert using the history pane, or delete the data table cell and start again.

Actually, it looks like you can just reload the page and the menu comes back. Still a bug though!

You could try to use <https://nominatim.org/|Nominatim> for the geocoding, but I suspect you'll find ready-made datasets for the post codes.

Thanks <@U048E2BJL9Z>. I made a full set of UK postcodes and their longlat but the CSV is 70Mb so I couldn't upload it. And it seemed like a heavy way to do it.

That seems unreasonably large - how many post codes are there? You could also try a different format like parquet for the encoding: <https://observablehq.com/@observablehq/csv-to-parquet>

1.7 million :slightly_smiling_face:

Parquet is another good suggestion. I've never tried using that format so it's a good excuse to get familiar with it.

<@U048E2BJL9Z> I found a great Nominatim example that I've already got working. Amazing suggestion - thank you!

Euclidian distance will work, but if you'd like to be a pedant you could use a Haversine distance measure - Turf exports one <https://turfjs.org/docs/#distance>

<@U04A329C5FY> I'm definitely open to some advanced geospatial pedantry. Thanks for the tip, I've never used Haversine before.

If we're optimizin' then you might also wanna take a look at <https://github.com/mourner/geokdbush> :slightly_smiling_face:

Oh wow, that looks great too! So many fun new things to learn! :smiley:

However, discipline demands I put my Product Owner trousers on and start with the MVP before checking out all these fancy new things.

you could use fill: 'difference' and sort by the fill channel:
```Plot.plot({
  width: 200,
  marks: [
    Plot.barX(clean_monthly_april, {
      y: 'title',
      x: 'activations',
      fill: 'difference',
      sort: {y: 'fill'}
    })
  ]
})```
it's not yet possible to sort by an arbitrary channel, please upvote <https://github.com/observablehq/plot/issues/867>

the recommended pattern for now is to specify the domain:
```Plot.plot({
  width: 200,
  y: {domain: d3.sort(clean_monthly_april, d =&gt; d.difference).map(d =&gt; d.title)},
  marks: [
    Plot.barX(clean_monthly_april, {
      y: 'title',
      x: 'activations'
    })
  ]
})```

sorry, there is another possiblity that already works:
```Plot.plot({
  width: 200,
  marks: [
    Plot.barX(clean_monthly_april, {
      y: 'title',
      x: 'activations',
      channels: {difference: {value: 'difference'}},
      sort: {y: 'difference'}
    })
  ]
})```

Got it, so I have to specify the “channels” channel first. Thanks, <@U048X1JDDHN> !

technically channels is not a channel, it's a mark option that defines extra channels (plural) :slightly_smiling_face: but, yeah :slightly_smiling_face:

I changed the file but the basic calculation is the same.

Also, assuming this is DuckDB, are you editing on a different device today?

<https://observablehq.com/d/d65648172da5ead6|https://observablehq.com/d/d65648172da5ead6>

I uploaded the data as a json and am trying to work with the output from the data table

you have NaNs in your coordinates (empty strings in your source data)

As a stop-gap solution you can use the condition
```  WHERE isfinite("longitude") AND "longitude" &gt; 0.149```


Thank you <@U048E2BJL9Z>. I wondered if it was to do with those which is why I added the WHERE clause. Strange thing is it worked yesterday. I must be doing something slightly different.

&gt; Did your data change?
:point_up:
&gt; I changed the file
:point_up:

Yes I changed the file, but the field names and data types and method were the same as far as I could tell. Eventually if I look hard enough I'll probably work out that I've done something dopey and missed it.

right, but surely the _contents_ of your file changed, probably introducing those rows with empty sets of coordinates?

That could have been it. I only changed it to add some metrics and order the columns to make more sense. I thought it was the same number of rows but you're probably right.

File attachments aren't versioned (yet), so you can go back to <https://observablehq.com/d/d65648172da5ead6@357|the first version where you got the query working> and see it running (and failing) with the current file.

Yeah I tried going back and realised the original file wasn't available. I need to figure out how to make the new file work anyway, which hopefully you've solved for me (too much going on here so I haven't checked yet).

observable data table bug.mp4

You should be able to add the video directly to the issue.

Also, can you please restart Chrome and check if the problem persists?

I've closed and restarted Chrome and the problem persists. Sorry, didn't realise I could add the video to Github.

I've added the video to the issue. Unfortunately this is likely a problem with your specific device though.

Ok, no problem. Thanks for looking into it.

I had hard time to understand the data shape from observer plot website, sometimes some examples has data but sometimes they only shows a variable and I don't know how to display those data from the variable.
So I decided to give chatgpt a shot, of cuz, it generated some weird incorrect code.
but I want to leave it here to illustrate my question

Hi <@U0587R4K0DP>! Do you these example datasets somewhere (ideally in a notebook?)

<@U04DB6A0CEQ>
```const groupLabels = ["Group 1", "Group 2", "Group 3"]; 
const dataSeries1 = [10, 20, 30]; 
const dataSeries2 = [15, 25, 35]; 
const dataSeries3 = [5, 15, 25]; ```
I guess this is enough?

the code generated by gpt is incorrect so the sample dataset is the only useful infomation

ideally I wish I can use the array or matrix directly without creating such a `combinedData`

```const groupLabels = ["Group 1", "Group 2", "Group 3"]; 
const dataset = 
[[10, 20, 30], 
[15, 25, 35], 
[5, 15, 25]];```
that's the more accurate input.

the closest one I could get from the template, just need to alter the `penguins`  to `dataset`
<https://observablehq.com/@observablehq/plot-stacked-bars?intent=fork>

What are the factors in your desired chart?
group by “Group”
y axis = sum of grouped values?
colors = ?

Without stacking, it’s just basic bar chart:

<https://observablehq.com/d/9a01d80c12d51151>

<@U04DB6A0CEQ>  ur right, I definitely miss some infomation about the secondary label for each item inside the group. I'm currently unable to touch my devices. Let me come back later with the correct information. If i later figure out by myself, I will also update the info and pin you so you don't get confused by me.

Fwiw, I still can leave a sample dataset here
```      Group1, Group2, Group3
Tag1: [[10,   20,     30], 
Tag2: [15,    25,     35], 
Tag3: [5,     15,     25]];
```
    `Tag1,2,3` sum up to a single bar for each group, dataset is a matrix instead of an array of object

Ok. You can map your data to an array like this:

```const groupLabels = ["Group 1", "Group 2", "Group 3"]; 
const dataset = 
[[10, 20, 30], 
[15, 25, 35], 
[5, 15, 25]];

const datasetAsArray = groupLabels.map((label, i) =&gt; dataset[i].map(d =&gt; ({group: label, value: d}))).flat()```

(I updated my example with this code …)

Hi Dylan! Here’s an option to add a horizontal line at the median:

```Plot.plot({
  marks: [
    Plot.dot(penguins, { x: "flipper_length_mm", y: "body_mass_g" }),
    Plot.ruleY([d3.median(penguins, (d) =&gt; d.body_mass_g)])
  ]
})```

So with your data, I think that Plot.ruleY line would be:

`Plot.ruleY([d3.median(data, d =&gt; d.a8_avg)])`

Does that work?

(also I hope you feel better soon! :tea:)

<@U048EJNREUB> thank you so much! Now that's out of the way I'm feeling a bit better :slightly_smiling_face:

<@U048EJNREUB> I don't know if this is relevant to the Observable team but I've found that ChatGPT is really not much help at all for working in Observable. For D3 itself it's ok (still not perfect) but answers tend not to take into account the 'cellular' nature of Observable, or use  the Plot library. At least in my experience. I don't suppose there's much you can do about that though.

No, not really. We can't control what OpenAI releases or uses as training material. It's kind of like someone published a book with a bunch of wrong info about how to write notebooks

I recommend the <https://observablehq.com/plot/transforms/group|groupZ transform>. To take Allison’s example:
```Plot.plot({
  marks: [
    Plot.dot(penguins, {x: "flipper_length_mm", y: "body_mass_g"}),
    Plot.ruleY(penguins, Plot.groupZ({y: "median"}, {y: "body_mass_g"}))
  ]
})```
You can use d3.median too, but groupZ is nice because it’ll work with faceting etc.

Wow, thanks <@U048G7LAQ5A>! That's such a tidy way to do it.

Hello! Does something like this do the trick? <https://observablehq.com/@observablehq/california-dams#cell-81>

I think for yours that might look like:

```color: {
    legend: true,
    domain: ["Sub 1", "Sub 2", "Sub 3"],
    range: ["blue", "gray", "green"]
  }```

<@U048EJNREUB> thanks a lot, that's exactly what I want

Allison’s answer provides a technique to specify exactly any color scheme you want. You might also try one of the prebuilt schemes, though. The advantage is that folks have devoted some time and thought as to what colors go well together. For example:

`Plot.barY(dataset, { y: "value", x: "group", fill: "sub" }).plot({`
  `color: { legend: true, scheme: 'Accent' }`
`})`

Color scales are detailed here: <https://observablehq.com/plot/features/scales#color-scale-options>

Sorry my bad. I read it in the docs and tried it on the current build-in version of Plot. But it seems to have no effect yet ( I mistakenly thought it affects the arrow when label is not overwritten)

Yes, you can put each plot into its own cell then interpolate them as children into HTML. Here's an example that might help: <https://observablehq.com/d/cc5cfe9d752566f8>

Wow, that is so cool! Thank you. I was having a go with ChatGPT's help but what you've given me is much more elegant.

You'll have to provide more context, I'm afraid.

Ok, thanks. Have to do the school run now so will do that later :+1:

This is the notebook:
<https://observablehq.com/d/d65648172da5ead6>

I attached the file performance_21_22.json. I have a data table cell called 'data' which changes a few of the data types and gives people a way to see all the data. In the charts I'm creating I want to jitter the points along the X axis. I've been doing that in the charts themselves using Math.random().

Now I want to add the jitter value to the source data; either the json or the data table. When I tried to do it with RAND() in SQL I got an error message: _Catalog Error: Scalar Function with name rand does not exist!_

Perhaps I've confused things using SQL to wrangle the data? My javascript data wrangling isn't great so I was trying to avoid that.

It's called `random()` in DuckDB: <https://duckdb.org/docs/sql/functions/numeric.html>

OK, now I feel a bit silly for not just trying the full word :man-facepalming: Thank you!

I would always recommend to refer to the docs regardless. Prevents getting gray hair over small API differences and often teaches you about adjacent functions that may prove even more useful.

E.g. two rows down `setseed` is listed. Working with fixed seeds for randomness makes debugging / developing _a lot_ easier. :slightly_smiling_face:

I really do need to read more in depth about Observable and Plot in general. Sometimes the urge to 'do' rather than 'learn' gets the better of me

I often find myself at the opposite end. I usually try go get a broad overview of the tools at my disposal, which is a great way to procrastinate the actual work while feeling productive. :sweat_smile:

But on the upside it actually teaches me about what's available, so that I have an easier time searching solutions to my problems.

All things being equal I prefer that approach. But I'm trying to build a portfolio and do some hands-on work instead of just being a Product Owner who watches others doing the clever stuff :slightly_smiling_face:

The axis you want to sort isn't `x`, but `fx`. Try `fx: { domain: order }`. That's "facet x"

I'm not 100% if that will work quite right. If it doesn't can you share the notebook you're working in?

it's fine, always appreciate anyone's response

ok, yes. setting the domain of `fx` works for me: <https://observablehq.com/d/dd878dcd8ebbc322>

do you know when I should use `fx`, I think the variable name confuses me

I felt like I always have to ask someone for help and feel a little bit guilty on that, it was way too frequent

`fx` is the channel name for the horizontal facet direction. You'd use that if you want to affect the facets of the chart, and you'd use `x` when you want to affect the horizontal channel within one chart

in that chart the `x` channel is the age groups, and it is repeated several times, once for each facet. The `fx` channel is the State abbreviation (TX, CA, etc), and it only happens once

<@U0484AHPADB> so for a single (not grouped) regular bar chart, there is only one facet?

I'd think about it as not being faceted, but I think only having one facet is correct too

and channel in this case is a list of items that was used for each facet.
I was trying to understand the relationship in and out I guess

cuz inside each facet is a full graph technically

a channel is the way that Plot talks about how you can visually encode data <https://observablehq.com/plot/features/marks#marks-have-channels>

Maybe here the terminology is a bit confusing: In general faceting means adding one or more dimensions based on which you "replicate" your main Plot for each category. This notebook is called Grouped bar chart, in Plot you generally use group, like Plot.group(..) for aggregating data based on a categorical attribute

You're right, that notebook has nothing to do `Plot.group` , which is a bit confusing

the `Plot.group`  is used for grouping the rawdata before they are used for rendering right?

yeah. it would be more correct to say that the notebook is demonstrating a _faceted_ bar chart, not a grouped one

this is actually one of the official example

grouped is pretty common term used for this kind of illustration in terms of user facing, but I'm not sure about the correct mathematical term though

I'm one of the official employees :wink:. I can pass this along to our docs team

I also suspect that grouped was chosen for familiarity, as mentioned by <@U0587R4K0DP>. The best docs aren't worth much if you can't find them :grin:

I would recommend reading the new Plot docs. We launched them a few weeks ago, and in my opinion they are an excellent way to learn the library: <https://observablehq.com/plot/>

It really depends on the reader's background, `group` can be confusing for developer like me cuz there are some common terms used inside the code (mathematically) and outside of the code (daily life) that hold completely different meanings. But maybe it makes sense for general data science people. :joy: idk, just a user feedback I guess

not just group, I think I will also encounter other terms here and there

The aspectRatio option might be useful here

have you seen <https://observablehq.com/@willfurtado/linear-regression> ?

I tried to use Plot.dot() but I don't get the squares quite right...:thinking_face: <https://observablehq.com/d/5d5311214384cb25>

The notebook suggested by <@U048X1JDDHN> is indeed like what I want to do, except it is entirely in "classical" d3 plotting (e.g., creating scales for mapping, applying them to SVG objects).  I know how to do that.  I was hoping for something using the new Plot.  <@U04HH1P8J7M> suggestion is the key.  Create a Plot to expose the mappings and then work backwords.  Awkward, but I will explore that avenue.  Or maybe just use the d3 plot that works fine!  Thanks to both for the suggestions.

<@U04STNKA0AV> : It seems your use case is best tackled by doing the bases graph without the squares in Plot first. So you have an SVG. Then you use the power of d3 to add your specifics to it. In my use of Plot.dot() you see it’s not a good fit to your question.  The r scale type might better be „identity“ but with all the extra passing of information it seems at best to be a „hack“

I've sent you a suggestion <https://observablehq.com/compare/5d5311214384cb25...c567297b6eb0aa97>

Thanks to <@U048X1JDDHN> s suggestion the link is updated

If you want the rule too, you can add:
```    Plot.ruleX(data, {
      x: "x",
      y1: "y",
      y2: (d) =&gt; my_graph.predict(d.x),
      stroke: "red"
    }),```

untitled (8).png

Thanks so much! <@U048X1JDDHN> and <@U048G7LAQ5A>. I have put it all together , wrote down some learnings :bulb: and published it here: <https://observablehq.com/@ee2dev/drawing-a-square-with-plot>

Skärmavbild 2023-05-31 kl. 21.54.57.png

Skärmavbild 2023-05-31 kl. 21.55.16.png

they have a default stylesheet for text, yes

```plotSVG = Plot.plot({
  style: "font-family: 'comic sans ms';font-size: 14px;",
  height: 400,
  width: 400
})```

Looking at the generated SVG of from Plot there is an embedded style element
```&lt;style&gt;.plot-d6a7b5 {
  display: block;
  background: white;
  height: auto;
  height: intrinsic;
  max-width: 100%;
}
.plot-d6a7b5 text,
.plot-d6a7b5 tspan {
  white-space: pre;
}&lt;/style&gt;```
Is there a way of overriding this? Especially for text and tspan.

```fixSvg = Plot.plot({
  height: 400,
  width: 400,
  margin: 0,
  marks: [
    () =&gt; svg`&lt;style&gt;.annotations text {font-size: 13px}`
    ]
})```

Ha, found another text style on the plot SVG-element, an attribute  `text-anchor` style. Overriding it in the Observable Plot style field w. `text-anchor: initial;` fixed it, the vanilla and plot SVGs look identical now! :partying_face:

Skärmavbild 2023-06-02 kl. 10.22.57.png

Skärmavbild 2023-06-02 kl. 10.22.38.png

It's probably because d3-annotation expects the svg node to be attached to the DOM (e.g. to measure it with elem.getBBox()). But it is not attached before you return it

yeah.. i was afraid it was something like that.

which means it won't work as a mark :disappointed: w/o a lot of rewriting of d3-annotation.
or... a setTimeout? Will try that first, but it is a really hacky way of doing it.

It worked with setTimout but it is ugly.

Is there a lifecycle event I can hook into in observable plot to know if it has rendered?
kind of like <https://svelte.dev/tutorial/tick|tick> in Svelte,  <https://legacy.reactjs.org/docs/hooks-effect.html|useEffect> in React or  <https://api.jquery.com/ready/|ready> in jQuery?

requestAnimationFrame? Lifecycle events for DOM elements are only available on custom elements, unfortunately.

Just tried it out and it is nicer than my initial setTimeout idea :slightly_smiling_face:

If you need to check whether a node / element has been inserted into the document you can query <https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected|Node.isConnected>.

Cool! Never seen that before. Will have a look.

this is what Plot.tip does, FYI: <https://github.com/observablehq/plot/blob/df3a3add051049986c029fdad727bd64c929e622/src/marks/tip.js#L244>

Screenshot 2023-06-05 at 4.19.48 PM.png

Hi Tanya! This is still under development, see <https://github.com/observablehq/plot/issues/1574>

thank you <@U048X1JDDHN> ! of course you and the team are already on it. :slightly_smiling_face: look forward to playing around more with pointers

Ideally, in the outputs I could invoke a function where the index is passed and then I could manipulate it and return the desired value

if so, maybe you could do something like
```fill: (d, i) =&gt; i```
and then in the binning options, you could have
```fill: "first"```
to use the index of the first element in the bin (?)

Sorry, here is more context: I wanted to do a percentogram with Plot and I want to use the color for e.d quintiles like in the original source.

With the index approach, I realize I don’t get the indices in the order of x. So the result should like fill:“x“ in the binning options, except for the domain. For the domain I would like to denote the quantiles

<https://observablehq.com/d/3594b4d8127400e9|https://observablehq.com/d/3594b4d8127400e9>

here's my take <https://observablehq.com/@observablehq/percentogram>

Was that coincidence :four_leaf_clover: or you just typed the solution ?

I made it on April 15, but I made it public (unlisted) for you

I believe I followed the link that was trending at the time on twitter :smile:

:star-struck: I don’t want to know how many more examples you have put up your sleeves :joy: . But I am not sure if I can deduct how your coloring - which is what I want - can be transferred to my more general case..

Oh wait I can. Your fill option is independent of your data. So I can do the same as long as I know the number of bins

Here are a few:
<https://observablehq.com/@schmoigl/spatial-sankey>
<https://observablehq.com/@bayre/spatially-situated-sankey>
<https://observablehq.com/@neocartocnrs/flow-map>

... And less of what your after, but a real gem that I enjoyed discovering: <https://observablehq.com/@fonsp/line-flow-germany/2>

Very cool! _spatial sankey_ - I wouldn’t have come up with that search term!

I only knew it from following new notebooks on here for years :slightly_smiling_face:

So the absolute dumbest possible example we have is here: <https://observablehq.com/d/afe25d6b5afecc13>

You can see that the `ruleX` actually does work, but only either for the top facet or the bottom facet—never for both. It would be very handy to have it apply to both!

Is it that you'd like to draw the rule to cover the whole height of the chart?

A bit of a hack… but you can “cheese” it with a large negative inset (`inset: -100`) that makes the rule tall enough to cover all facets.

I think it’s a bug that the pointer transform doesn’t work when applied to a non-faceted mark in a faceted plot. I want it to highlight the rule across facets. I filed a bug: <https://github.com/observablehq/plot/issues/1677>

<@U048G7LAQ5A> great! let me know if you’d like help or something fixing, happy to dig in here

When you indicate that you have embedded in a React app, how did you do this? I just tried downloading the code and dropping it into GitHub and the interactive tips work: <https://aaronkyle.github.io/dataviz/wbg-pip-shared-prosperity/index.html>

Here's the Plot example that you linked for good measure: <https://aaronkyle.github.io/dataviz/plot-line-chart-interactive-tip/index.html>

Is it possible you have an old version of Plot installed? You’ll need 0.6.7 or later for the tip mark.

That worked for me recently in a React app. I updated Plot to v0.6.8 and tooltips were displaying on a bar chart.

Thanks all! <@U0489M6NVGU> I'm embedding using the "Runtime with React" embed code from Embed helper. Ie:
```import React, {useRef, useEffect} from "react";
import {Runtime, Inspector} from "@observablehq/runtime";
import notebook from "063ec903459cbc40";

function Notebook() {
  const stockChartRef = useRef();

  useEffect(() =&gt; {
    const runtime = new Runtime();
    runtime.module(notebook, name =&gt; {
      if (name === "stockChart") return new Inspector(stockChartRef.current);
    });
    return () =&gt; runtime.dispose();
  }, []);

  return (
    &lt;&gt;
      &lt;div ref={stockChartRef} /&gt;
      &lt;p&gt;Credit: &lt;a href="<https://observablehq.com/d/063ec903459cbc40@23>"&gt;Plot: Line chart, interactive tip by Thrive Capital&lt;/a&gt;&lt;/p&gt;
    &lt;/&gt;
  );
}

export default Notebook;```

Let me see if I can update the Plot version or replicate issue with a toy app.

I tried the links in your code snippet and found them to be private.  Are you embedding using private links and the API key, for example: <https://api.observablehq.com/d/a11d1e2cd588428e@5.js?v=3&amp;api_key=MYSECRETAPIKEY>.  If so - how are you enjoying the feature? `&lt;3`
The auto-generated embed code snippets are working well for me.  Along the lines of Mike's suggestions, maybe an old version of the CSS or inspector are loaded in somewhere.

Yes! using the private links and the API keys. Feature is great! Definitely so much easier for my production use case!

Also just did a toy `create-react-app` with the Plot chart and tooltips are working for me. So will dig into older versions being loaded somewhere.

Should've done the toy example investigation first...

Fixed! I needed to upgrade the `@observable/runtime` from `5.7.0` to `5.7.4`. Thank you!

```    Plot.axisY({fill: "blue", stroke: "red", fontSize: 18, labelAnchor: "center", label: null}),    
    Plot.axisY({fill: "green", ticks: [], fontSize: 18, labelAnchor: "center", label: "Frequency"}),    ```

Ah, of course, I keep forgetting how simple it is to layer marks of the same type to achieve what you need. Thanks for the quick response <@U048X1JDDHN>!

Updated with a third and working version here: <https://observablehq.com/d/bcbb67a6274ee5e4>

(if you want to share a dataset I can try to show you an alternative approach, though :wink: )

thanks, Fil! i am curious for your approach, maybe yours is easier or you have optimisations to suggest

ended up making my own thing in d3 (adapted from Horizon chart)
<https://observablehq.com/@angiehjort/area-chart-with-different-facet-height>
— with placeholder data

and this is how i am using it
<https://observablehq.com/d/cf8bcb0342f1ae98>
— with data from UNHCR i need

Skärmavbild 2023-06-12 kl. 22.23.55.png

here's a way <https://observablehq.com/@observablehq/plot-of-plots>

Ooh, interesting!
Almost like cheating :wink:

You may also want to investigate HTML's `display: flex` or `display: grid`

Yeah, that would work.
In this case I need to be able to export the output as one SVG (or png) as I need to be able to use it in other apps (w/o writing code).

yah. Right now I do the faceting by using a container SVG and SVG groups and translating the groups to their "correct" place.
What I don't like with this approach is the need to  use "magic" numbers to set the width and height of the container SVG and using the numbers in the calculations for the translate. It gets quite messy and doesn't scale very well.

here's another way (that would need to be adapted) <https://observablehq.com/@observablehq/autoplot-matrix>

Is it possible to have different projections in each cell of a geo mark facet? I want to be able to set the domain so I can "zoom in" on data.

Geo mark facets
<https://observablehq.com/d/05ba674f5ffcd396>

Custom mark (based on subplot example above) pattern
<https://observablehq.com/d/8d591b40a5e5336a>

If you ask "is it possible" the answer will always be yes, since you can always use D3 and custom code to achieve whatever you need :slightly_smiling_face:
In this case, yes it's possible, but no, it's not easy. I'm sending you <https://observablehq.com/d/30af3562a4f980f1|a suggestion>

Why would I need to have this line?
```    domain: views[0].projection(continentsDisputedAreasTopo[0])```


And where do the facet (grid) labels (0,1,2 on the x and y axis) come from? I would like to disable them if possible.

the first element is needed to fit the projection to the domain somehow. It would be better to do this, though:
```  projection: {
    type: "identity",
    inset: 2,
    domain: {
      type: "MultiPoint",
      coordinates: [
        [0, 0],
        [1000, 1000]
      ]
    }
  },```
which corresponds to the projection definition. Note that I haven't tried to care for the aspect ratio, this is another exercise left to the reader

the code contains this line:
```limit: 250,```

of course it does :smile: i hadn't thought to look into that block...thanks for pointing that out and answering a total newb question!

I do see from the docs that:

&gt; By default, empty groups are omitted, and non-empty groups are generated in ascending (natural) order.
But I can’t find where it says how to change this…

I don’t think there’s a way to do this currently. Setting filter: null works for the bin transform because the domain is quantitative or temporal, so we know where the missing values are. The same isn’t true with an ordinal domain for the group transform; the transform can only see values that exist and are therefore non-empty.

I think we could do this if we allowed the group transform to take a domain option, enumerating all the expected (and allowed) values; the group transform would ignore anything outside the domain. We could perhaps also allow the interval option to compute the domain from a continuous extent (e.g., days or integers).

You’re welcome to file a feature request, or I can try to remember to do that tomorrow. Thanks for the suggestion!

(You can set the domain of the x or y or color scale to show empty groups. But there’s no way to draw a zero for empty groups, say.)

<@U048G7LAQ5A> Would you prefer the feature request in the GitHub Issues, or somewhere else? Happy to do this however you’d like.

Happy to also provide more context, _e.g._, “we’d like `tip: true` to work for empty buckets”, _etc_.

:slightly_smiling_face: Hi Alex!  Thank you for surfacing this issue. It would be terrific if you could add it to our feedback repo: <https://github.com/observablehq/feedback/issues>
It's always great for us to read as much motivating and clarifying context as you'd like to offer. :heart:

For Plot specifically I would prefer here <https://github.com/observablehq/plot/issues> but if it involves the Observable platform more generally then the feedback repo as Aaron suggested.

I filed it here: <https://github.com/observablehq/feedback/issues/578> just now.

Ok I closed that and re-filed here: <https://github.com/observablehq/plot/issues/1695>

In addition to the suggestion that `group` take a `domain` I suggested you might add an `impute` to marks with reducers like `rect` and `bar`. But I am not familiar enough with the API to know how clsoe this is to the API aesthetic.

so it might have the `impute` . anyway you get the idea.

Thank you also for refiling! Apologies for initially leading you astray :face_palm:

You can control the visible days and their offset/order via `domain` and `ticks`:
```      domain: [-1, 1, 2, 3, 4, 5, 6, 0], // hide 0 and 6 (weekends); use -1 for labels
      ticks: [0, 1, 2, 3, 4, 5, 6], // don't draw a tick for -1```

Screenshot 2023-06-18 at 15.58.45.png

Thanks for your suggestion Fabian, I can see this is Mike's original approach. I did try this, but it has an odd side effect of shifting any data plotted for Sunday to the next week. E.g. in this screenshot, 27 Feb should appear one cell to the left: