Observable-Community

<https://stackoverflow.com/questions/77322928/d3js-scale-and-translate-not-working-with-buttons-zoom-and-pan>

Screenshot 2023-10-23 at 9.12.38 AM.png

Screenshot 2023-10-23 at 9.12.54 AM.png

Hi Celina, could you go to “Settings” &gt; “Billing”? There should be a “Cancel subscription” button there! Let me know if this still doesn’t work:

Hi Cindy, Thank you for your answer.
Yes, I tried the “Cancel subscription” button, but it's a feature that doesn't continue to subscribe for the next period.
I'm inquiring by e-mail after all, but the process is slow due to the time difference.
(I think it's a disappointing user experience because it doesn't take into account the possibility of cancellation for user mistakes. :cold_sweat::face_with_spiral_eyes: I'm in a very difficult situation right now)

try using `d.features.features` as data in the Plot.tip mark

Plot.geo can work with geojson data, but Plot.tip needs an iterable.

and please add a thumb up to this issue <https://github.com/observablehq/plot/issues/1745> :slightly_smiling_face:

Thanks, I can see some progress, even if I’m not quite there!

Two questions:
1. Will a tip drill all the way down, or only trigger the top layer?
2. Can a tip be triggered on the polygon, and not a derived centroid? 
I know these are standard mapping library features, and Plot might not need to match, but I personally really apprecuate the simplicity of Plat, and using as a semi-static map is really an awesome feature for me!

Can you clarify q1?
Re: q2, the short answer is no. Long answer: the pointer transform only knows about points; but there are several ways to create a custom pointer transform that would have a strategy to deal with polygons.

q1: if I have 4 layers which overlap (or tip trigger zones) will all 4 be returned in the tip, or just the one which is drawn highest in the z-index?

Ah. I'm afraid you'll get 4 tips overlapping. For complex charts you will probably want to avoid tip: true, and create a single tip *mark* with that has access to all the relevant data at once.

Before live notebooks were introduced last year, authors had to republish any change they made. Notebooks that are still in the old "published" state have the yellow badge and need to be converted to live the next time their author wants to publish a change.

image.png

Only via a fairly old PR, unfortunately: <https://github.com/observablehq/plot/pull/1671>

(and I'm not sure if it could handle your use case, tbh)

<@U048E2BJL9Z> ah, thanks! maybe that PR is where I saw it (the time series hovering video looks familiar).

You're right, I'm not sure it would handle this use case -- since with the `z` channel  you would highlight all "equal" elements, but my hover is based on whether the datum’s range contains the hovered datum. Unlike equality, `contains(a, b)` does not imply `contains(b, a)` so I don't think it's possible to find a set of `z` values that would match this predicate exactly.

An additional difficulty is that pointer is doing a distance search, and here you'd probably want hover? though maybe with pointerY it might be enough to tesselate according to the rectangles?

Yes, you’re right, ideally the hover would be exactly on the rectangle rather than radius from the center point. I noticed that too but it seemed like a separate issue and like I could somehow hack it later (eg position extra points such that the voronoi regions are the rectangles :sweat_smile:)

you made me work! <https://observablehq.com/@recifs/rectangles-hierarchy-hover>

Very cool! I’m on my phone now but will have to sit down and figure out how that works

Oh I think I understand, that is very clever

Does the same technique work to filter points in data space, in case you want to use a more tree like layout for the rectangles, or maybe the point that is logically above the hovered node is not above it in screen space?

I guess one way would just be to pass the raw values in another set of channels

Oh, oops, you’re right, I misunderstood 

One of the points of this visualization is in fact to illustrate this difference

This is for a side project I’m working on to explain a really cool data of structure called the wavelet tree (and a related one called the wavelet matrix)

both ways would give the same result in this case, I think? I'd figured you wanted the logical filter

Which happens to be a way to do super fast density plots on arbitrary numbers of points ;)

In this case it would, but I didn’t send you screenshots of the other visualization which had the nodes rearranged (on each level, all left children appear before all right children)

tbh I'd have preferred a notebook rather than a screenshot :)

and now I want to fix this for faceted data too!

Will make one when I’m at a laptop. The library I wrote that’s powering the data underneath is at <https://github.com/yurivish/made-of-bits|https://github.com/yurivish/made-of-bits> if you’re curious 

<@U048X1JDDHN> <https://observablehq.com/@yurivish/wavelet-tree-vis-prototype>

Hi <@U05UZF09UDQ> thanks for joining for the course - so glad you found it useful :tada: Nope nothing more, this is the issue I was thinking of! :slightly_smiling_face:

I then removed the entire d3.js code, and replaced it with Plot, which looks something like this:
```&lt;script&gt;
  import { onMount } from 'svelte';
  import * as Plot from "@observablehq/plot";

  onMount(() =&gt; {
    const data = [
      { year: 2000, population: 6 },
      { year: 2005, population: 2 },
      { year: 2010, population: 8 },
      { year: 2015, population: 5 },
      { year: 2020, population: 10 },
    ];

    // Create the line chart with a spline curve
    const plot = Plot.plot({
      marks: [Plot.lineY(data, { x: 'year', y: 'population', curve: 'natural' })],
      x: { label: 'Year' },
      y: { label: 'Population' },
    });

    document.getElementById('line-chart').appendChild(plot);
  });
&lt;/script&gt;

&lt;div id="line-chart"&gt;&lt;/div&gt;```

But now i can’t view any of the axis :confused:

The axes should get displayed by default. Is there anything in your outer markup and styling that might crop the visible area of the SVG?

hey thanks, my issue was resolved :slightly_smiling_face:

As far as I'm aware there's no option to do that, but you can render your plot's legend separately: <https://observablehq.com/plot/features/plots#plot_legend|https://observablehq.com/plot/features/plots#plot_legend>

```const plot = Plot.plot(options); // render a plot
const legend = plot.legend("color"); // render a color legend```

it worked! Added this in the end:
```    document.getElementById("line-chart-legend").appendChild(legend);```

<@U048E2BJL9Z> what if I want to change the symbol of legends? How can it be implemented using the legend variable we have got here?

Do you mean displaying a legend for symbols? In that case use `plot.legend("symbol")`.

this gives legend as undefined for dashed-lines

i’m using this property for dashed lines:
```strokeDasharray: "7,5",```
and need to display dots and dashes in legend

There is no legend for stroke styles. Afaik you'll have to create one yourself.

oh okk, thanks for confirming :slightly_smiling_face:

Hm ... you could perhaps use a "mini plot" to create one ... :thinking_face:

I mean, you could perhaps generate a Plot using facets with text and line marks to produce such a legend. Can you share a complete example of your code?

```const plot = Plot.plot({
      marks: [
        Plot.lineY(AnalysisDataOfAreaExposed, {
          x: "year",
          y: "area",
          z: "rcp",
          stroke: "rcp",
          strokeDasharray: "7,5",
          curve: "natural",
          marker: true,
          tip: true,
          marginLeft: 80,
        }),
      ],
      x: { label: "Year" },
      y: { label: "Area", grid: true },
    });

    const legend = plot.legend("color");
 document.getElementById("line-chart").appendChild(plot);
    document.getElementById("line-chart-legend").appendChild(legend);```

Btw, you can simplify appending the elements a bit:
```document.getElementById("line-chart").append(plot, plot.legend("color"))```

Could you describe what you expect the legend to look like?

i took a brief look at using Plot, and from what I could tell it's likely much simpler to handcraft the SVG (via d3 or other means).

thanks for taking this up! Will implement using d3 :slightly_smiling_face:

What are you having trouble with? Can you share the code you are using to generate it?

orgChart.txt

An org chart with expanded/collapsed functionality and a nice user interface is what I'm attempting to design. At the moment, the chart appears as follows: the box is not looking good, the node-link overlaps and the expansion collapse is not functional.
Additionally, the code is attached.

<https://observablehq.com/@dis-2023-fall/grade-standings>

like i know i can mirror the PNG and save it, or d3.select the chart output from a different cell and hack the attribute into the <image> like i did now in the link above but curious if there is a Plot way to do that

<@U04SLK17G30> nice solution. What is happening here `d3.select(chart).select("div").raise();`  ?

<@U04DB6A0CEQ> remove this line and see. it changes the order of DOM elements such that the massive color legend would go below the chart.

// Specify the chart’s dimensions.
  const width = 800;
  const height = 500;
  const marginTop = 25;
  const marginRight = 20;
  const marginBottom = 35;
  const marginLeft = 40;

  // Define the horizontal scale.
  const x = d3.scaleLinear()
      .domain(d3.extent(data, d => d.carat)).nice()  // extent = range
      .range([marginLeft, width - marginRight]);

  // Define the vertical scale.
  const y = d3.scaleLinear()
      .domain(d3.extent(data, d => d.price)).nice()    // extent = range, nice = rounding to nearest int
      .range([height - marginBottom, marginTop]);

  // Create the container SVG.
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])   // min x, min y, width, height
      .attr("style", "max-width: 100%; height: auto;");

  // Add the axes.
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)   // transform moves from 0
      .call(d3.axisBottom(x));    // puts axis text on bottom

  svg.append("g")
      .attr("transform", `translate(${marginLeft},0)`)    // transform moves from 0
      .call(d3.axisLeft(y));    // puts axis text on left

  // Append a dot for each data point.
  svg.append("g")
    .selectAll("dot")
    .data(data)
    .join("circle")
      .attr("cx", d => x(d.carat))
      .attr("cy", d => y(d.price))
      .attr("r", size)
      .attr("fill", d3.color("steelblue"));

  // zooming
  let zoom = d3.zoom()
    .on('zoom', handleZoom);

  function handleZoom(e) {
    d3.select('svg g')
      .attr('transform, e.transform');
  }

  function initZoom() {
    d3.select('svg')
      .call(zoom);
  }

  return svg.node();
}

In Observable you'll want to avoid global selectors like `d3.select('svg')`. Instead, reference elements and selections directly by their variable name.

Zooming consists of two parts: 1. an outer container that acts as frame of reference, 2. an inner container to which the zoom transform is applied.

Add a containing group to your svg:
```   const container = svg.append("g");```
then append all other elements to that container.

Lastly, add the zoom:
```  const zoom = d3.zoom().on('zoom', e =&gt; container.attr('transform', e.transform));
  svg.call(zoom);```
This will zoom everything including the axes, which may not be want you want, but it should serve as a good starting point.

isn't that the same thing already in my code?

// zooming
  let zoom = d3.zoom()
    .on('zoom', handleZoom);

  function handleZoom(e) {
    d3.select('svg g')
      .attr('transform, e.transform');
  }

  function initZoom() {
    d3.select('svg')
      .call(zoom);
  }

  initZoom();
  return svg.node();

it's selecting the g element, which is where the dots are being rendered

&gt; isn't that the same thing already in my code?
It is not.

To emphasize my earlier point about not using global selectors, try dropping the following into a cell:
```d3.selectAll("svg").nodes()```
You might be surprised how many SVGs there are on a page :wink:

Hey :wave: I have a general JS packaging question, hope that’s ok!
I’d like to publish some helper functions in the `geos-wasm` package that I maintain. The module is a pure ES6 package. The helper functions wouldn’t be useful for everyone, so instead of bundling them with the main package my idea was to provide them under a submodule → `geos-wasm/helpers` . I placed a package.json in the `geos-wasm/helpers` folder with “`type": "module", "module": "./geos.helpers.esm.js"` alongside the bundled `geos.helpers.esm.js` file.

However, if I try to import the helper module using `import helpers from "geos-wasm/helpers"` I get the following “directory import unsupported” error
&gt;  Directory import ‘/Users/pahmeyer/Documents/GitHub.nosync/geos-wasm-test/node_modules/geos-wasm/helpers’ is not supported resolving ES modules imported from /Users/pahmeyer/Documents/GitHub.nosync/geos-wasm-test/main.mjs
&gt; Did you mean to import geos-wasm/helpers/geos.helpers.esm.js?
Is there any way that I can convince node.js to find the actual JS file without having to specify it upfront? Or do you have a better idea how I could solve my issue? Thanks for your help!

All options from the curve factory follow different goals how to connect points with a continuous line. So a line (depending on the curve you chose may cross values which don't appear in the data) See <https://observablehq.com/plot/features/curves>.

If you share your code we can give better advice. Your "extra" lines probably has nothing to do with the curve. Instead, it connects the points in the order of the data

Yes, and if I switch the curve from natural to linear, I don't see those lines below the x-axis.

Here the code: 

  const plot = Plot.plot({
       marks: [
         Plot.lineY(data, {
           x: "year",
           y: "area",
           z: "rcp",
           stroke: "rcp",
           curve: "natural",
           marker: true,
           tip: true,
           marginLeft: 80,
         }),
         Plot.ruleY([0]),
       ],
       color: { legend: true },
       x: { label: "Year" },
       y: { label: "Area", grid: true },
       );

<@U048X1JDDHN> <@U04HH1P8J7M> the years 2035,45,55 and so on, were not specified in the dataset, but Plot added those by default. My data only has 2030,40,50 and so on. Any suggestions on how i can remove those extra years from between?

The scale of a lineY chart in generat assumes the x scale is continuous, so there are valid value in between the data points. If not you might consider bars instead.

To reduce the years in your chart, you can use the ticks option of the x scale. Note that the the number you specify will be used approximately to balance with other constraints.
E.g. … `x:{ ticks: 4, label: “Year”}`…`.`

Hi Tammo! This might be a better question for the <#C05BA8345B8|d3> channel, as there are more experts on those specific projections.

Hi Tammo. I have a sky map I created 4 years ago. I converted it recently to a notebook, but didn't publish it because it only has code, but I will do that now. It might help you.

Here it is <https://observablehq.com/d/575851d308c3c610>

Thanks, that looks nice!
I managed to fix my problem, see <https://github.com/ofrohn/d3-celestial/issues/146|here>. The sky map I made (work in progress) is <https://gitlab.camras.nl/dijkema/planisfeer/-/blob/main/optisch-v1.png|here>.

svg doesn't allow a text node to be a child of a rect node; you can create a g node instead, position it with a transform: translate(x,y) property, then add both the rect and the text nodes as its children

You can replace
```svg
      .selectAll("rect")```
with
```svg
      .append("g")
      .attr("id", "chart")
      .selectAll("rect")```
The bars will be isolated in their own group.

It think the issue is that the first rect was replaced by the tooltip (which is the first rect within the svg) or something like that

chart-ok.mov

chart-wrong.mov

The zoom has a scale when zooms so you could use that value to also scale your tooltip positions.

```  function zoomed({transform}) {
    g.attr("transform", transform);
    console.log(transform.k)
  }```
ChatGPT says this:
To scale your tooltips when the zoom changes, you'll want to update the tooltip positions and dimensions based on the zoom level. First, you need to modify your zoom handler to take care of updating the tooltips. I'll make some adjustments to your existing code:

```const zoomHandler = (event) => {
  const zoomLevel = event.transform.k;
  console.log(`Zoom level: ${zoomLevel}`);

  cursorLine.selectAll('.trend-by-data')
    .attr('transform', function (d, i) {
      const mousePosition = d3.pointer(event, this);
      // ... your existing code ...

      // Adjust tooltip position and content based on zoom level
      const scaleMultiplier = 1 / zoomLevel;
      const adjustedY = trendsTagsPositions[i].y * scaleMultiplier;
      const adjustedHeight = trendsTagsDimensions.height * scaleMultiplier;

      // Update tooltip position and content
      d3.select(this)
        .attr('transform', `translate(${xTagPosition}, ${adjustedY})`)
        .select('text')
        .text(yScale.invert(pos.y).toFixed(0));

      // ... your existing code ...
    });
};```
Here, I've added a `scaleMultiplier` based on the inverse of the zoom level. Then, I adjusted the tooltip position and content using this multiplier to scale them appropriately. This should give you a starting point to work with. You might need to fine-tune it based on your specific requirements and the structure of your charts.

~~~
Not sure if the code is good, but I hope it will point you in the right direction.

<@U04DUTJ5DRR> <@U048X1JDDHN> Thank you for your help! I was able to finish my first d3 projects b/c of yall :slightly_smiling_face:

Hi! what are you hoping to map? Points are super easy to put in a point plot

See <https://observablehq.com/@observablehq/plot-mapping> for an overview

<@U04DB6A0CEQ> I am plotting heatmap on 2D and 3D maps

Pretty interesting approach here: <https://observablehq.com/@fil/d3-hexbin-tricontours-heatmap>
Not sure how it could be applied to the Plot library, but <@U048X1JDDHN> has some really interesting notebooks dealing with heatmaps in general

If you want to use a more robust *mapping* library, this could be more straightforward with <http://deck.gl|deck.gl> for example: <https://observablehq.com/d/5bb4782c6590dbeb>

Hi how can I sort x ticks for line and area chart for example?

I try with the x domain, which functions correctly for bar chart, but render randomly for line chart.

I see, but how do I order it in this case?

just to elaborate the example a little bit, I think I probably misunderstand the line chart
<https://observablehq.com/@ee2dev/sorting-with-plot-a-collection-of-plot-examples>

I somehow expecting a smooth line, I think there might be a misconception from my side

the line order is not following the x-domain

<@U048X1JDDHN> thx, that's the only thing I figure out, but what about reserve order or specific order? It seems like bar chart supports all of them pretty well. Line chart is not supposed to have something outside of date (x axis in this example)?

nvm about reserve order `sort: "region" + x: { reverse: true }` somehow address this issue.

because how bar chart can accept `x: {domain}`  as the defined order, I automatically assume chart can handle it same. It seems like line chart cannot handle the case.

I'm sorry I don't follow, but please share a notebook demonstrating the issue.

<@U048X1JDDHN> thx, this <https://observablehq.com/d/50d4e8b7d32bf564#cell-102>

OK, thank you. This case is tricky because it's the groups that need to be sorted:
```      Plot.lineY(
        countries,
        Plot.groupX(
          { y: "max", sort: ([{ region }]) => domain.indexOf(region) },
          {
            y: "fert_rate",
            x: "region"
          }
        )
      )```

<@U048X1JDDHN> thx a lot, this efficiently give me an idea how to handle the sort (now I understand it gives each item a sort position),

Screenshot from 2023-11-08 09-04-19.png

IMG_6114.jpg

probably use `fx: {paddingInner: 0}` to make the facets touch?

Screenshot from 2023-11-08 19-47-20.png

Hi Fil, the above solution worked, but it also reduced the space between each group. Is there a way to increase the gap between each group?

<@U048X1JDDHN> is there a way to implement grouped bar charts without the facets?

it’s in the project requirement, but no prob we’ll discuss with client first about the gaps:thinking_face:

you could add a line on the fx axis instead

We tried but it didn't work. Maybe we are adding some incorrect property. How'd you suggest? What property shall we add?

mhhh, maybe it's not supported, we should open an issue; it should be `fx: {line: true}`

it's documented here <https://observablehq.com/plot/features/scales#position-scale-options>
• line - if true, draw the axis line *(only for _x_ and _y_)*

{line:true} is also not working in this case.

exact, it's documented as "only for x and y"

duplicate of <https://observable-community.slack.com/archives/C03SH3F8J4C/p1699435502930509>

the day of year function is probably not taking DST into account

you can fix it like so:
`dayOfYear = (date) =&gt; {`
	`return Math.ceil((date - Date.UTC(date.getUTCFullYear(), 0, 0)) / 24 / 60 / 60 / 1000);`
`}`

Dang.  DST trips me up every time!  That was a perfect fix!  Thanks so much again!

Capture d’écran 2023-12-04 à 10.24.10.png

Capture d’écran 2023-12-04 à 10.24.34.png

Can you tell us more? In my tests it works:

Thank you Fil. I tried your example and there is still no tooltip. I think the problem may be the Plot version. Mine is 0.6.0. But I cannot find a way to upgrade Plot in R and quarto? Is there any reference or guideline?

I don't know, you'd have to check the documentation for quarto.

Screenshot 2023-12-04 at 4.25.08 PM.png

it's just one way; not sure it's the best way :slightly_smiling_face:

Any other ways/examples you could point me to?

Hi, <@U048X1JDDHN> where can I learn more about the `render` transform. I don’t see it on the docs.

It's in a pull-request, please feel free to comment there
<https://github.com/observablehq/plot/pull/1811/files>

Is it still the recommended way to achieve this or is there an easier alternative?

<@U05NZE2GB6J> I have an example of a custom tooltip using <@U048X1JDDHN> suggestion. <https://observablehq.com/d/6eb190775d47fe25>

Looks nice. Good implementation. Thanks for sharing. :slightly_smiling_face: 

You could try adding a rect mark, with a single data point defining the date range:
```// add a rect defined by year start and data cutoff
    Plot.rect([{
      start: new Date("2021"),
      end: d3.max(tsla, d =&gt; d.Date)
    }], {
      x1: "start",
      x2: "end",
      y1: 0,
      y2: 500,
      fill: "lightgray",
      fillOpacity: 0.2
    }),```

oh my hahaha, that’s wonderful. I was banging my head on how to use the original dataset instead of a custom one. Thanks!

the optimizations in d3.blur are based on the regular sampling grid

if you just need to "smooth" data you could apply a gaussian kernel directly—it's slow, but if you don't have too many points to interpolate (from and to), it will work

I often apply blurring on top of spatial interpolation (it's now built-in in Plot). But the quality of the output isn't scientifically guaranteed.

<@U048X1JDDHN> makes sense! Do you know offhand of any javascript implementations of a gaussian kernel smoothing for this use case? I know the math is well documented, but I’m nevertheless reluctant to write it myself if someone else has done it :sweat_smile:

<@U048X1JDDHN> no worries! Thanks for your answers 

I see that there is a special algo called ACT but … probably a bit of work to figure it out