Using d3 / d3-geo type plots offline (i.e., in Observable Framework)

Community Help
1

I’ve just gotten started with Observable Framework and I’m struggling with the distinction between Observable (online notebooks), and Framework. For example, I’ve followed the startup guide for making an observable framework project (locally, offline), and made some dataloaders. I was able to make some basic plots and cards this way.

But then, I wanted to try to add a plot which is a Mollweide projection (Mollweide / D3 | Observable). But that type of import (the @d3 type) appears to be only for importing from other observable notebooks, on the observable platform? I was able to figure out how to import the libraries via

import { geoMollweide } from "https://cdn.skypack.dev/d3-geo-projection@4";
import { select } from "https://cdn.skypack.dev/d3-selection@3";

for example, but it seems like even making the basic wireframe map of the projection is a much more complicated enterprise involving making graticules and paths and all sorts of things.

But the presence of the Mollweide page implies to me there should be some nice way of, in my dashboard.md file, running something similar to the Plot.plot() command, e.g., like we can with the built-in equal-earth:

 <div class="card">
${Plot.plot({
  width:2400,
projection: {
  type: "equal-earth",
  rotate: [0,0]
},
marks: [
  Plot.graticule(),
  Plot.sphere(),
  Plot.dot(events,{x:'ra',y:'dec',r:10}),
]
})
}</div>

Where you call the Mollweide plot and give it things like a landmass or (in my case) just coordinates on the sky.

Am I missing something basic here, or is it true that effectively, any high level plotting functions in d3 are only accessible on the observable notebooks platform and not on the observable framework? Appreciate any help!

2

This should work (see Projections | Observable Plot for details):

```js
import { geoMollweide } from "https://cdn.skypack.dev/d3-geo-projection@4";
```

<div class="card">
${Plot.plot({
  width:2400,
  projection: {
    type:({width, height}) => geoMollweide().fitSize([width, height], {type:"Sphere"})
  },
  marks: [
    Plot.graticule(),
    Plot.sphere(),
    Plot.dot(events,{x:'ra',y:'dec',r:10}),
  ]
})}</div>
3

Ah thank you so much! That did the trick.

4

You wouldn’t happen to know how to assign/show tick label values for the wireframe would you? None of the examples of projection maps have any, but it would be helpful to label the lines of long and lat in degrees. (apologies if that’s a newbie question!)

5

Finding a generic answer is a hard problem :slight_smile:

But for the Mollweide projection, probably just list the positions you want to show these numbers, and use Plot.text ; for example if you want to label latitudes on the right side, use something like

      Plot.text(d3.range(-80, 90, 20), {
        x: 179.9,
        y: Plot.identity,
        text: Plot.identity,
        fill: "currentColor",
        stroke: "var(--theme-background)",
      }),

map
map982×528 69 KB

1 Like