Observable-Community

I don't remember the details, but I remember hearing people talk about using a centroid transform for this in the past. Is that something you would know how to do?

Ah, you got me on the right track! I can use the geoCentroid transform inside of the pointer transform. The other thing I was missing is that I needed to pass in `cdata.features`. The `geo` mark can handle a geojson data source, but the `tip` mark is expecting an array of data.

`Plot.tip(cdata.features, Plot.pointer(Plot.geoCentroid({title: d => d.properties.NAME}))`

Thanks!

Interpolated values will be escaped unless they are DOM nodes, so you need to have `generateGradient` return `htl.svg`...`` instead of ``...`` .

Hi <@U048E2BJL9Z> thanks for your suggestion. It's not working for me though. This is what a tried with your suggestion:
1. Return `htl.svg`...`` instead of ``...`` and use it like this within the mark list `() => generateGradient({ id: "gradient", color: "#34A853" })`
2. Convert `generateGradient` to normal function instead of an arrow function
3. Use the function directly instead of beign inside an arrow function within the mark list `() => htl.svg`${generateGradient({ id: "gradient", color: "#34A853" })}``  instead of `generateGradient({ id: "gradient", color: "#34A853" })`

There is already another element with the ID "gradient" in your page, <https://observablehq.com/d/6eb190775d47fe25#cell-455|in this cell>. Change the ID to something like gradient2 and restore what you did in #1 then it will work.

Note that you also have duplicate quotes in your gradient markup, and that you'll want to remove the whitespace before/after your <defs> element.

#2 doesn't make a difference, and #3 is wrong, like I described earlier.

Here's an alternative way to insert the gradient that generates a unique ID:
```    ((id = DOM.uid("gradient").id) =&gt; [
      () =&gt; generateGradient({ id, color: "#34A853" }),
      Plot.areaY(tsla, {
        x: "Date",
        y: "Close",
        fill: `url(#${id})`
      }),      
    ])(),```

Here's how I'd maybe write it instead:
```function withGradient({color, id = DOM.uid("gradient").id}, callback) {
  return [
    callback(`url(#${id})`),
    () =&gt; htl.svg`&lt;defs&gt;
      &lt;linearGradient id=${id} gradientTransform="rotate(90)"&gt;
        &lt;stop offset=0% stop-color=${color} stop-opacity=0.3 /&gt;
        &lt;stop offset=30% stop-color=${color} stop-opacity=0.2 /&gt;
        &lt;stop offset=60% stop-color=${color} stop-opacity=0.1 /&gt;
        &lt;stop offset=80% stop-color=white stop-opacity=0.1 /&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;`
  ];
}```
```  marks: [
    // ...
    withGradient({color: "#34A853"}, fill =&gt; Plot.areaY(tsla, {
      x: "Date",
      y: "Close",
      fill,
    })),
  ]```

Out of curiosity, why did you pick white as the last stop color instead of setting opacity to 0?

Because I didn't know better hahaha. I'm still learning.

I'm not sure if that's a good way to create a linear gradient. But it worked for me

So, I welcome any ideas to improve my code

Where can I learn more about this piece `id = DOM.uid("gradient").id` ?

Oh, I meant that you can just use
```&lt;stop offset="80%" stop-color=${color} stop-opacity=0 /&gt;```
for your last stop (unless the additional but probably unnoticeable fade from color to white was a stylistic choice).

&gt; I don't remember seeing `DOM.uid` before
It's part of Observable's Standard Library and thus by default available in all notebooks: <https://github.com/observablehq/stdlib/blob/main/README.md#DOM_uid>

image.png

<@U050PRL8HGW> Small nit on your published notebook: Every gradient stop must have a color, otherwise it defaults to black (that's why I suggested to assign `${color}` everywhere earlier).

To give an example, this is what it would look like if you defined opacity 1 for the first stop, 0 for the last, and only color for the first:

<@U048E2BJL9Z> Oh thanks for clearing out that for me! I'll update the notebook

Fwiw, it's a common gotcha with gradients that have fully transparent stops (I ran into it myself).

Observable Notebooks only require that you use the website, no install needed. If you want to use d3 in other contexts, it depends on what you want to achieve

So I'm trying to recreate <https://observablehq.com/@d3/density-contours>
using react, and when I try to add the attachment, I get errors like
Line 6:3:   'faithful' is not defined        no-undef
  Line 6:14:  'FileAttachment' is not defined  no-undef
  Line 7:15:  'faithful' is not defined        no-undef
  Line 8:3:   'Plot' is not defined            no-undef
  Line 8:16:  'faithful' is not defined        no-undef

Yes, in order to use libraries in React you'll have to install them. Plot is our open source plotting library. You can get it as `@observablehq/plot`. FilrAttachment is unique to the Notebook environment. You'll have to figure out how to load your data on your own in other environments. I expect "faithful" is the the data set being loaded with FileAttachment

Porting a notebook to react is an advanced subject. If you're just beginning your JS journey, I'd suggest sticking to just one environment instead of working in two at once.

Ah I see, so FileAttachment won't work in this case, at least on React. I'll look into how to attach it otherwise.
Thank you for your help! Would definitely focus on one but doing a project that requires both, unfortunately.

Screen Shot 2023-12-08 at 1.29.43 PM.png

Do you have a notebook or live example that you can share?

I did not but I made one:
<https://observablehq.com/d/5dcc6b5e82af15e2>

thankss

I hard-coded the data to try it out, I hope it’s an accurate representation…

At first glance you're shadowing your data argument. Not sure if it's that way in your original code though.

Edit: ah, can probably just be removed.

I just googled shadowing and I guess it means repeating??
In the real code I am passing it to the component as a prop, it’s in a Mysql database

Thank you. I deleted the one passed as a prop

Let me try to turn that into runnable code ...

Wow you have a lot of trees on your observable page!! :eyes:

you have at least 3 trees, one of which is an advent tree

for the newbie that I am that’s a whole forest

hehe ... (that reminds me, I need to continue Advent Of Code)

I _think_ the "no root" error happens if you have ambiguous IDs (I don't use stratify very often). But I also don't see the error happening in your example. Although, to be fair, your example doesn't seem to render anything at the moment.

Here's what I ended up with (likely not very helpful though): <https://observablehq.com/d/a77fca8076f5f671>

Thanks! So do you think if I rename the array SubStorypoints "children" it'd go better? Am away from the computer right now but will give this a go asap!

sorry, what I actually meant was that there may be multiple root nodes. Can you perhaps demonstrate the error in your notebook (or a fiddle/codepen)?

Screen Shot 2023-12-09 at 6.12.05 PM.png

Screen Shot 2023-12-09 at 6.08.37 PM.png

Hi again, thank you so much for your help! I realize I made a mistake in my hard-coded data and have two nodes with parentId: null, but in the real data there isn’t… (see picture attached)
I’ve been playing around with it and still nothing rendered on the page…
as for errors
`const tree = d3.stratify()
    .id((d) =&gt; d.id)
    .parentId((d) =&gt; d.parentId)(data);`
*throws “no root in stratify error” *

`const tree = d3.cluster()
    .size([2 * Math.PI, Math.min(928, 928) / 2 - 30])
    .separation((a, b) =&gt; (a.parent === b.parent ? 1 : 2) / a.depth);

    const root = d3.hierarchy(data);`

does not throw errors but doesn’t render anything either
The second image is `console.log(root)`


Am still working at it

I think I would try to go back to the <https://observablehq.com/@d3/radial-tree/2|original D3 example> and try to make it work with React.

When you then gradually adapt it to your own use case you'll always have a version that you can revert back to when things start to break, and iterate in smaller steps.

Screen Shot 2023-12-10 at 12.03.17 PM.png

I made it fetch the array of children and changed *this* line `const hierarchy = d3.hierarchy(data, d => Array.isArray(d) ? d : undefined)`

which makes it render _something_
 although it is apparently a 1-level tree

I think I made it work: <https://observablehq.com/d/52cf967963c1d4d6>

I reverted to the original data and tree code, then added back your data and cleaned it up until stratify would no longer report errors. Lastly I adjusted `cy` and added an accessor for the title.

Daaaamn! Thank you so much! I will try to incorporate it into what I have

Hi <@U066D6UV7NK> do you mean something like this:

```  color: {
    domain: ["Adelie", "Chinstrap", "Gentoo"],
    range: ["purple", "teal", "orange"]
  }```
Maybe this example could help you <https://observablehq.com/@observablehq/plot-session-1-code-key#cell-410> (the last chart)

Really cool! You can use one or both of the following options:
• in Slack, you can post in the channel <#C03SH3F8J4C|community> 
• There is in the observable forum a site dedicated to share cool stuff. It's called "show and tell": <https://talk.observablehq.com/c/show-and-tell/>
Great work - thanks for sharing! :raised_hands:

Also in which channel should we share our notebooks?

possibly in <#C048B7CBMFX|show-and-tell> ?

no, it's a bug; do you mind opening an issue?

You need to .call(zoom) on a parent element of the element to which you apply the transform.

Normally you'd make your <svg> the parent container, and apply the zoom transform to a <g> to which you also append all other elements.

Cool, yea I just figured it out. I created another `g` and put everything in there, and transform that wrapper instead of the `svg`  like so:

```    const zoom = d3.zoom()
        .scaleExtent([1, 2])
        .on("zoom", function(e) {
          gWrapper.attr("transform", e.transform);
        });

    svg.call(zoom);```

Thanks for your help :slightly_smiling_face:

I'm sorry to report it was removed as a part of some recent cleanup on the site. <https://observablehq.com/release-notes>

I worked on this, happy to answer any questions. As Michael said, it’s part of a broad effort to clean up less-used or stale stuff around the site. The existing design cluttered the sidebar, was basically empty on most notebooks for most people (especially everyone doing private work), and didn’t answer the question of “which of my notebooks are popular” because you had to hunt-and-peck. We’re still interested in the general concept of viewer insights, and we’re still tracking this info on the backend, and I think we’d be open to bringing it back as more of a workspace-level “most-viewed notebooks” dashboard view at some point.

Thanks for the clarification! Glad to hear you’re planning to bringing it back. I would love to have such a feature for shared (including unlisted) notebooks, to answer the question ‘Are they using it? How often?’ because in my workflow, I create charts for clients in Observable and give them an unlisted link. Some use it, others not at all

Untitled.js

You might need to specify that for the text mark the datum maps to `x`. Something like
```Plot.textX([new Date()], {x: d => d, dy: -12, lineAnchor: "bottom", text: 'Now'})e```

Thanks for the reply, that doesn't seem to do anything though.

Hmm. Could you share a notebook with your current plot?

By saying `text: "Now"` you tell Plot that it should look for a field named "Now" on each data element

(and I missed the fact that you were using `Plot.textX` and not `Plot.text`, so my earlier suggestion is not relevant)

I think the obvious conclusion is that you should never plot your own data.

is this what you're trying to obtain?
```Plot.plot({
  marks: [
    Plot.dot(myData.index, {
      x: myData.index,
      y: myData.unemployment,
      fill: d3.pairs(myData.unemployment).map(([b, a]) =&gt; b - a)
    })
  ]
})```

and if i map the data to a constant then it works fine

so maybe something about the large numbers

<@U048X1JDDHN> yes I think that is what I want -- this was (obviously) reduced from a larger example

and yes, foolish of me to plot my own data. Will stick to pengins!

you can inspect the channels.fill of this:
```Plot.dot(
  myData.index,
  Plot.map(
    { fill: Plot.window({ k: 2, reduce: "difference" }) },
    { x: myData.index, y: myData.unemployment, fill: myData.unemployment }
  )
).initialize()```
it shows that the value is an empty array… which sure is wrong

I suspect it has to do with the fact that the entire extent of the numbers lies beyond 32-bit range

"sum", "max" work, only "difference" fails

fill is promoted to z, so each of your series is exactly 1 value

re: it shows the value is an empty array, where does it show that?

but the mystery is solved, you're free to plot your own data again

woot, it works once I add `z: null` :tada:

funny, I was just rereading <http://worrydream.com/#!/LearnableProgramming> yesterday and this feels like it has a little bit of that feeling -- there's an internal state inside Plot that was not evident from the plot spec

I wonder if this case of window with a "difference" reducer that ends up with multiple length-1 series would be a reasonable candidate for a :warning: that can be silenced by explicitly setting `z` to `null`. Might be annoying to detect...

I did spend a few hours debugging this and I don't think I would have eventually figured it out

was planning on just changing my plot type :smile:

yes it's a good idea to open a feature request; not sure how we'd do it, but worth thinking about

I'm curious why the result was different for the BLS data vs. my data. In the former case, `dot.initialize().channels.fill.value` is an array of zeros, but in the latter it is an empty array.

Oh, doh, because there are repeated values so the fill groups are cardinality &gt;1

yes! have you folks considered before making that the default?

No, because Plot isn't just used inside notebooks, and because "_blank" does not match the browser's default behavior. However we're still in the process of evaluating solutions to ensure that links in SVGs will open in the top frame by default (instead of breaking the sandbox iframe).

I would also recommend to set target to "_top" instead of "_blank".

Ok! I will do that though I'm not exactly sure why. My thinking about it as a default is that the way I use Plot I can't imagine a scenario where I wouldn't want whatever url is opened by clicking a bar/point etc to happen in a new tab. But obviously that's just my use case.

I mean, feel free to do whatever you prefer for yourself. :slightly_smiling_face:

But consider that forcing links to open in a new tab is not something that users can opt out of, while opening normal links in new tabs is well supported.

It's a discussion that's been had several times for links in notebooks, and since there's no one-size-fits-all solution it's better to stick to the learned and expected default behavior.

yep this is perfectly reasonable :slightly_smiling_face:

You can use the axis mark as you did for x and y: `Plot.axisFy({ ticks: []}),` . Alternatively. you could add `ticks: []` to your fy option: `fy: { padding: 0, ticks: [] },`

Capture d’écran 2023-12-18 à 18.38.10.png

Capture d’écran 2023-12-18 à 18.40.14.png

for classes it's a bit more difficult since you probably don't want to replace the .className property (which would remove the existing classes), but just add one. In this example I use a <https://developer.mozilla.org/en-US/docs/Glossary/IIFE|IIFE>:

amazing! thank you <@U048X1JDDHN> - this is perfect :slightly_smiling_face:

And as a small variation to Fil's example you can also directly use the default argument values:
```viewof b = ((input = Inputs.range()) => (input.classList.add("hello"), input))()```
which preserves the visual order.

For what it's worth, personally I tend to prefer the slightly more verbose form these days since it's just so much easier to read:
```viewof b = {
  const input = Inputs.range();
  input.classList.add("hello");
  return input;
}```

Hi Javier. Do you still need help with this?

It may not be exactly what you want, but Plot automatically sets a `value` property on the SVG when you use Plot.tip / Plot.pointer.

First change your chart into a view:
```viewof myChart = Plot.plot({```
then you can access the hovered (or pinned) value via
```myChart```
Alternatively you could use a custom render transform (as described <https://observablehq.com/@tophtucker/plot-click-handler-render-transform|here>) to respond to clicks and change a shape's appearance.

no, you have to explicitly import the cell that declares the style then you have to evaluate the name of that cell in your notebook

in your case the notebook you're importing it from hasn't named the CSS

<@U04A329C5FY> are there any examples that I could take a look? I'm not sure how can I name a stylesheet

I think I got it, I had to use a different cell, a javascript cell (instead of html) and then use `htl` to export the css inside a variable. Something like:

```tooltipCSS = () => htl.html`
<style>
  .tooltip {
    background-color: #fff;
    font-weight: 400;
   }
</style>
````

I  could import the html css tooltip and then drop it into a new html cell.

I didn't see what effect it had on the notebook.

I tried to import the style cell, which is un-named but has a default of 'cell 229'  but doing _import {cell 229} from_   failed

<@U0484B61KPX> I had to use a Javascript cell for the import and the evaluation

<@U050PRL8HGW> be careful about whitespace and line breaks in htl.html:
```tooltipCSS = () =&gt; htl.html`
&lt;style&gt;```
This will wrap your style element in a span because the leading line break results in an additional sibling Text node, and htl thus needs to wrap all elements in a parent.

<@U048E2BJL9Z> thanks! In the end I used the suggestion from Max, but it’s nice to know that because I’m using `htl` in other sections too.

My d3 code is similar to the one we have here: <https://observablehq.com/@michael-keith/draggable-globe-in-d3>

I'm switching from Plot to basic d3 because we were performance issues when setting default rotation to the globe. It was creating and destroying the entire svg of the plot every second. That's why I'm refactoring the code of globe. Do you think we have any other solution?

Interesting. Yes there are many ways to approach this task, within Plot or without. It really depends on what the whole context is. What is the functionality of Plot.raster that you're looking for? Spatial interpolation? or just pixel projection?

sharing screenshot of existing Plot, with code:
``` const plot = Plot.plot({
      projection: {
        type: "orthographic",
        rotate: [rotationalLongitude, -15, rotationalLatitude, -15],
      },
      marks: [
        Plot.sphere({
          stroke: "#4066B8",
          fill: "#EEE",
        }),
        Plot.geo(countries, { fill: "white" }),
        Plot.raster($selectedMapsFilteredData, {
          x: "longitude",
          y: "latitude",
          fill: "value",
          title: "value",
          // tip: true,
        }),
        Plot.geo(countries, {
          stroke: "#4066B8",
          strokeWidth: 0.5,
          strokeOpacity: 0.5,
        }),
        Plot.geo(mergedCoastline, {
          stroke: "#4066B8",
        }),
      ],
      color: {
        type: "quantile",
        scheme: "magma",
        label: legendLabel,
        reverse: true,
        width: 420,
        n: 8,
        tickFormat: ",.2f",
        domain: d3.extent($selectedMapsFilteredData?.map((data) =&gt; data.value)),
      },
      height: plotHeight,
      width: plotWidth,
    });```

using `setInterval()` for default rotation while using Plot lib.
```let rotationalLongitude = -180;
  let interval = setInterval(() =&gt; {
    rotationalLongitude = rotationalLongitude + 2;
  }, 50);```

But when using only d3 (not the above code), I’m simply using the code provided here: <https://observablehq.com/@michael-keith/draggable-globe-in-d3>

on the orthographic globe you can see grid artifacts

yes, that is using Plot. Want to see if the same gets reflected while using only d3

The artifacts are due to the data grid not matching the projected grid—which is maths, not particularly Plot or D3. You could use WebGL too: it would be faster and it has native triangle interpolation <https://observablehq.com/@mbostock/raster-reprojection-ii>

performance wise this would be the best, and it's well supported across modern browsers (including phones)

you can find more examples by searching <https://observablehq.com/search?query=raster+projection>

yes, most of the examples which i saw are using d3.tile(), but the code gets a bit complex for me to understand:sweat_smile: like this example:  <https://observablehq.com/@parkerziegler/roll-your-own-raster-tiles>
and this one uses geoTiff: <https://observablehq.com/@d3/geotiff-contours-ii>

Do you think this example would be helpful by any chance: <https://observablehq.com/@zoxydre-ytb-ws/life-on-land-reda-bellafqih> ?
In this colors are divided countrywise,  which would not be in my case.

I'd recommend to draw the data to an equirectangular canvas which has the same size as the data grid, then use Mike's example (or one of my glsl examples) to project this canvas with WebGL. (I've ported almost <https://observablehq.com/@fil/cordiform-glsl?collection=@fil/glsl-projections|all of D3's projections to glsl> if you need something different than orthographic.)

Looking at all these amazing examples, i want to understand, what exactly is GLSL?

it's a language in which you write code that gets sent to the GPU.

`d3.schemeCategory10` is an array of colors, it should work if you replaced it with your own array

What Plot returns is a SVG node, so you can manipulate it as usual with  querySelector or d3.select. We can't yet set class names on individual marks, but you can select with the ariaLabel I think?

How should an "ideal" solution look like if you force the `anchor` to be `"bottom-right"` ?

I think just always being able to see the text in the tooltip.

yes, I understand. But the choices:
• not enforcing the anchor to be "bottom-right"
• less text in tooltip
• bigger margins
you seem to reject. So what solution are you looking for then?

&gt;  So what solution are you looking for then?
Just if anyone could think of anything else. I was trying to outline what I'd thought of. Maybe someone here in the community might have another strategy.

I didn't find any outline of what you thought of as a solution, I might have missed it ?!

The style: `"overflow: visible"`  allows you extend over the margin to the top, right and bottom. But the code and visualization part resides within a sandboxed iframe, So you cannot overflow over the left end of it and obscure the menu options.

Hmm... I linked to the notebook that I had made to illustrate. It's ok. Seems like I have all the options identified.

I'm not seeing that error. You may want to enable timestamps in your console to get a better sense of when the error occurred:

legend.gif

Yeah, sure. I just enabled that option. To replicate the issue (I also attached a small video to understand the whole process)
1. Disable legends by commenting out `legend: true`
2. Reload the page. You should see the chart working
3. Uncomment `legend: true`
4. Reload the page. The chart shoouldn't work and you should see the error in the console.

<@U048E2BJL9Z> I just attached a video so it's easier to understand

Looks like PlotFigure mocks Document, but not canvas:
```export default {
  props: {
    options: Object,
  },
  render() {
    return Plot.plot({
      ...this.options,
      document: new Document(),
    }).toHyperScript();
  },
};```
Plot requires the Canvas API to draw some of the ramps in the legend.

Still a lot to learn, but thanks for your input, at least I know where to start looking :pray:

To be honest I'm not quite sure how Canvas would work in an SSR scenario. Ultimately it would have to render to an <img> with a data URL, I think?

You may want to look into using jsdom: <https://github.com/jsdom/jsdom?tab=readme-ov-file#canvas-support>

Hi everyone! I am working with d3 (for the first time) and financial data and have to plot some historical data for particular financial instruments. I am struggling with having weekends being shown on the x axis when there is no data that contains any weekends. 

For reference, my data looks something like: 

[
{“date”:”2023-12-26”, “value”:99.4},
{“date”:”2023-12-27”, “value”:98.2},
{“date”:”2023-12-28”, “value”:96.7},
…]

There are no weekends present in this data. I am currently using a time scale on the x axis. Is there something else I should try using instead? I am really struggling with this and am not sure what else to use. Any advice would be greatly appreciated!!

<@U06BB4TSPL7> You probably meant to start a new thread?

data3pizza.JPG

data2pizza.JPG

Is the second image supposed to show the blank graph that you were referring to? If so, what did you expect the treemap to show instead?

data2pizzagraph.JPG

data3pizzagraph.JPG

Ah no, the "blanck" one is the data 2, all orange. The one with an extra level is the one that looks superficially ok:

The children all have no value. You probably want to use d.Revenue, but alternatively you can also just set `.sum(d =&gt; 1)` as value accessor.

Your second slider changes the value of a cell it depends on, thus invalidating its own cell and any that depends on it. What you see is the cell rerendering and the range input losing focus because of it (technically it becomes a new input element every time you change the slider).

My recommendation would be to remove all external dependencies from your cells and only pass them in explicitly.

Perhaps try to replace your buttons with Inputs.radio(), where the radios set the same values that the slider would produce. That way you can hook both up easily via Inputs.bind().

You could also consider using a from-to range slider to adjust the difficulty: <https://observablehq.com/@mootari/range-slider>

Regarding radios, here's a basic example for you to try:
```viewof level = Inputs.range([0, difficulties.length - 1], {step: 1})```
```Inputs.bind(Inputs.radio(difficulties, {
  valueof: (d, i) => i,
  format: d => d.difficulty,
}), viewof level)```

Lastly, here's an example for how you can make radios look like buttons:
```radioButtons = (values, {format: _format, ...options} = {}) =&gt; {
  const format = d =&gt; htl.html`&lt;span&gt;${_format ? _format(d) : d}`;
  const form = Inputs.radio(values, {...options, format});
  const scope = DOM.uid().id;
  form.classList.add(scope);
  form.append(htl.html`&lt;style&gt;
    form.${scope} { max-width: initial }
    .${scope} div { display: flex; flex-wrap: wrap; gap: 8px }
    .${scope} div label { margin: 0; white-space: nowrap }
    .${scope} input[type="radio"] { display: none }
    .${scope} input[type="radio"] + span { border: 1px solid #aaa; background: #eee; padding: 4px }
    .${scope} input[type="radio"] + span:hover { background: #ddd }
    .${scope} input[type="radio"]:checked + span { background: #49f; color: white }
  `);
  return form;
}```

thanks <@U048E2BJL9Z>, I'll spend more time on it later, but this looks like it should get me where I want to be. Appreciate the help!

Unfortunately, <@U048E2BJL9Z>, while the inputs.bind approach you suggested solved the slider problem, it lost the button select functionality I wanted. The range is meant to be a level selector (not a difficulty selector). While each level has a difficulty, there should only be as many radio buttons as difficulties. Clicking on a radio button should set the range input to the first level with that difficulty (that is working). The part that now fails is that when the slider is moved to a value that's not exactly at a difficulty breakpoint. the difficulty doesn't get updated.

Let's assume there are 100 levels, the first 30 are "easy", the next 40 are "medium", and the last 30 are "hard". When you click the "easy" radio, I want the slider to move to 1, when you click the "hard" radio, it should move to 71. That part is working. The challenge is when you move the slider from 1 to 75, I want the difficulty radio to move to "hard". Currently, it only moves if you set to 71 exactly.

I updated the notebook to use basic your approach <https://observablehq.com/d/bfaacfb5fcdff18d>

If there's no 1:1 relationship then you'll have to map the value, something like
```mapValue = (input, {from = v => v, to = v => v}) => Object.defineProperty(htl.html`<div>${input}`, "value", {
  get: () => from(input.value),
  set: v => { input.value = to(v) },
})```
```${Inputs.bind(Inputs.range([1, puzzleIndexMax], {step: 1}), viewof level)}
${Inputs.bind(mapValue(Inputs.radio(difficulties, {
  valueof: d => d.game_index,
  format: d => d.difficulty,
  value: 1,
}), {to: v => difficulties.find(d => d.game_index >= v).game_index}), viewof level)}```

Small correction, the mapping should be
```to: v => difficulties.findLast((d, i, arr) => d.game_index <= v).game_index```

Do you have a notebook that we could take a look at?

you'll need to customize the x-axis scale and tick values. You can specify only the dates you want to display on the x-axis.

```// Use d3.scaleTime() for time scales
const xScale = d3.scaleTime()
  .domain(d3.extent(Data, d => d.date))
  .range([0, width]); // Adjust width based on your chart dimensions

// Customize the x-axis ticks to display only certain days
const xAxis = d3.axisBottom(xScale)
  .tickValues(Data.map(d => d.date))
  .tickFormat(d3.timeFormat('%Y-%m-%d')); // Adjust date format as needed

// Append x-axis to your chart
svg.append('g')
  .attr('class', 'x-axis')
  .attr('transform', `translate(0, ${height})`) // Adjust height based on your chart dimensions
  .call(xAxis);```

Not sure if this video would be helpful to you <https://www.youtube.com/watch?v=lCvF4zEBls0>

imagen.png

Because they get reordered to always have the series with the current max value at the bottom, I believe. I'd try `order: "z"` or `order: "appearance"` . You may also want to have another look <https://observablehq.com/plot/transforms/stack#:~:text=The%20order%20option%20controls|at the docs> where the default behavior is described.

Hi <@U04A329C5FY>! Is this the one? <https://observablehq.com/@observablehq/plot-colorcontrast-custom-transform>

You should be able to do this by setting the y axis domain: `y: {domain: [0, 1e6]}`. You may want that to be a little higher even if your want some padding

I could kiss you right now. Thank you very much.