Observable-Community

image.png

It took several hours of searching, but I finally found a a note in the 4.0 changes that said to use `.merge()`  to update the selection. Further investigation in the docs also showed `.join(enter =&gt; ...)` to be a viable solution.

IMG_6438.jpg

That looks very custom to me :grimacing:

Probably a clamped domain and a custom render transform that checks it?

Out of curiousity: I've never seen a chart designed like that. Is it supposed to make a point? Otherwise I'd maybe opt for log scales or use an interrupted y axis.

Honestly the question was mostly-shitpost/slightly-serious. 

I thought the absurdity of the chart was interesting from a communication perspective, as an alternative to an interrupted y axis it does actually preserve the total area of the bar. 

I guess I've seen too much to not take any question at face value :sweat_smile:

one way to solve it is through interactivity, add a checkbox "scale to fit the outlier" like it's done here with "scale to fit Ebola"

<https://informationisbeautiful.net/visualizations/mountains-out-of-molehills/>

thankfully :nazar_amulet: provides excellent tools to escape flatland through interactive charts

there are many ways to do this; in the case you're describing I'd recommend adding the interactions with d3 after the map has been produced with Plot. Something like `d3.select("[aria-label=geo]").selectAll("path").on("click", (i) =&gt; { do something with data[i] })` .

I am a complete begginer, so I apologize for bothering you, but why this is wrong? `d3.select("[aria-label=geo]").selectAll("path")`
  `.on("click", (event, d) => {`

    `const clickedData = finalResultArray.find(item => item.name === d.properties.name);`

    
    `const leyes_filtradas = leyes_clima.filter(d => d.name === clickedData);`

    `Plot.plot({`
      `title: "Climatic laws in " +clickedData,`
      `subtitle: "According to CCLW",`
      `marginTop: 40,`
      `marginRight: 40,`
      `y: { label: "Number of laws", grid: true },`
      `marks: [`
        `Plot.line(leyes_filtradas, {`
          `x: "date",`
          `y: "value",`
          `stroke: "#ff5375",`
          `tip: true`
        `})`
      `]`
    `})`
  `});`
Note: I add this to a new cell.
PD: my failing tries at <https://observablehq.com/d/6c5015f886280c0e>

I'm sorry my answer was because I thought you were using Observable Plot, but you're using D3. Here's a suggestion to fix:
<https://observablehq.com/compare/6c5015f886280c0e...88fb64dcac92a270>

I am extremely thankful for your help. I can see what I was doing wrong now. Thank you so much !!

This is not currently possible, but you can define the second scale outside of the plot, and use it to compute literal colors for your values (that is, instead of saying `fill: "field"` , write instead `fill: d =&gt; scale2(d["field"])`

I'd like to see a collection of p3 visualizations

<https://d3js.org/d3-force/many-body#manyBody_distanceMin|forceManyBody> lets you define a min and max distance.

<@U048E2BJL9Z> I’ve tried this also, but it didn’t help :(

const simulation = d3
  .forceSimulation(data.nodes)
  .force(
    "link",
    d3
      .forceLink(data.links)
      .id((d) =&gt; <http://d.id|d.id>)
      .distance(100),
  )
  .force("charge", d3.forceManyBody().distanceMax(300))
  .force(
    "center",
    d3.forceCenter(window.screen.width / 2, window.screen.height / 2),
  );

You need to use either or. Try dropping .distance(100) and instead setting .distanceMin(100) on forceManyBody

Oh, hang on, my bad. distanceMin and distanceMax only define the area of influence.

I'm afraid you'll have to implement your own force, since distance() only sets the initial distance and cannot respond to changes, afaik.

Oh, didn’t there were already any examples of such implementation?

Probably, but in any case forces are fairly simple. They're really just a callback that does stuff on every tick.

You'd define your force as something like
```function linkForce(_links) {
  const min = 100;
  const max = 300;
  const clamp = (a, b, v) =&gt; v &lt;= a ? a : v &gt;= b ? b : v;
  const id = d =&gt; d.id;
  let links;
  
  const update = () =&gt; {
    if(!links) return;
    for(const {source: a, target: b} of links) {
      const d = Math.hypot(a.x - b.x, a.y - b.y);
      a.x = 100;
      // Update a.vx, a.vy, b.vx, b.vy
    }
  };
  return Object.assign(update, {
    initialize(nodes) {
      const map = new Map(nodes.map(d =&gt; [id(d), d]));
      links = _links.map(({source: a, target: b}) =&gt; ({source: map.get(a), target: map.get(b)}));
    }
  });
}```


Alright, it was a bit more tricky. I've replied in the <https://stackoverflow.com/questions/77772572/min-and-max-length-of-a-d3-js-graph-links/77774316#77774316|SO thread>.

In case it's not obvious, I'm looking to see how my gas &amp; electric bills have varied over time both seasonally (which is why I have the Year &amp; Month fields separated out) and since swapping out some gas appliances for electric ones

Because of how the x axis is sorted. Try
```.plot({x: {type: "linear"}, y: {grid: true}})```

THANK YOU! I had to put a type: "linear" for y: also, but now it's looking great. Thanks!

I am getting some console warnings though:

Warning: some data associated with the y scale are strings that appear to be numbers. If these strings represent numbers, you should parse or coerce them to numbers. Numbers are typically associated with a "linear" scale rather than a "point" scale. If you want to treat this data as ordinal, you can specify the interval of the y scale (e.g., 1 for integers), or you can suppress this warning by setting the type of the y scale to "point".

the table cell that exposes the CSV I uploaded shows the various numerics as 'number' types. Is there something else I should be doing to communicate that these are numerics?

Adding `type: "categorical"` to your color scale declaration should fix it.

I'd recommend to add {typed: true} to the FileAttachment call, this way numbers and dates would be typed as numbers (and dates :slightly_smiling_face: ) and Plot would be able to infer the correct axes on its own.
`bills = FileAttachment("energy_usage@1.csv").csv({typed: true})`

(you'd still need to say that color is categorical, though, since its domain would now be numbers)

<@U048X1JDDHN> oh very cool--thanks!  I wonder if that should be a default?

typed: true? no, because sometimes it does the wrong thing (typically when you have numerical ids for counties in a dataset, some counties have id "01123"

Use the `Data table` Cell, then pick the data you want to show

Ah ha! That's way easier than what I've been trying!

Is there a way to get something similar outside of the observablehq website notebook environment, like when running through Quarto?

``````{ojs}
data = FileAttachment("palmer-penguins.csv").csv({ typed: true })

// Do something magical to show the data as an interactive table
// This shows a table but it's basic and not 
data.view()
``````

Sorry, I don't know. I haven't used Quarto before.

The data table cell is a proprietary part of the Observable platform, and isn't available in Quarto

It's part of our editor UI, and is pretty tightly integrated into the site, as opposed to simple HTML output like Quarto can use

Ok cool cool, I'll just keep using `.view()` in Quarto then. Thanks!

Did you define transition somewhere? :eyes:
transition is not a reserved d3 word. It is typically derived from a selection.

According to the d3 docs, `svg.transition()`  should have created one.

It does. But to reference it later, you have to assign it to a variable.

I know the docs refer to "transition" at times which make it look like a reserved word. That may have tripped you up

I shouldn't need to, since I use `.call(myFunc)`. The docs says this passes the transition as an argument.

That's disappointing. I can't find any reason why it would throw the error. The only things I can find even mentioning this error are people forgetting to import transitions, or reusing completed transitions. I suppose I'll have to find some way to duplicate the transition some other way.

Yes I just tried it in observable and it didn't throw an error

I described this in more detail <https://talk.observablehq.com/t/when-panning-graphic-moves-less-than-mouse-pointer/8684|here>.  When panning the map (via clicking the mouse pointer and dragging) on my <https://ns6t.net/AzShadowMap/test.html|azimuthal map site>, the map graphics only move a fraction of the distance moved by the mouse pointer. I would like to map graphics to move just like the mouse pointer, so the pointer stays over the same part of the map. You can see the unexpected behavior on the live site linked above.

can you do a link with a fat strokeWidth? otherwise you'll have to look at custom vector shapes <https://observablehq.com/plot/marks/vector>

<@U048X1JDDHN> that's my initial approach, using vector but it seems like I cannot get rid of the arrow head

oops,  doesn't link also require x1-y2, the same as rect

there is an option to set the arrow head length to 0

what you want is certainly possible, you need to clarify what you want the mark to do exactly

<@U048X1JDDHN> just using rect height instead of the triangular shape like spike

I think Im looking at the `draw` function right now, based on your suggestion

<@U048X1JDDHN> I think I come out the solution, just share to you in case if somebody asks the same question.
```    Plot.vector(counties.features,  Plot.centroid({
      shape: {  
        draw(context, l, r) {
          context.moveTo(-r, 0);
          context.lineTo(-r, -l);
          context.lineTo(r, -l);
          context.lineTo(r, 0);
          context.lineTo(-r, 0);
        }
      },
      anchor: "start",
      length: (d) =&gt; population.get(d.id),
      stroke: "red",
      fill: "red",
      opacity: 0.5,
    })),
    // for comparison
    Plot.spike(counties.features, Plot.centroid({ stroke: "blue", length: (d) =&gt; population.get(d.id) })),```

imagen.png

you could say that you only want integer tick labels, say `tickLabel: d =&gt; d%1 ? "" : d` ?
&amp; please vote up this issue  <https://github.com/observablehq/plot/issues/355>

Voted. It doesn't seem easy, but really should be the default behaviour somehow. Unfortunately, your solution doesnt really, work. Thanks anyway for your time.

we could try to make it work at least in your case

I eventually found two ways of doing it:
1) I dinamically change the number of ticks depending of the max value of the data I am printing.
2) I use type: "band" to use ordinals on my axis.

untitled.png

Here’s the corresponding notebook <https://observablehq.com/d/bc592ca1cebe9518>

I think you probably want a mark type other than a rule—one that will let you specify the endpoints. Maybe a <https://observablehq.com/plot/marks/link|link>?

Thanks for your reply! The issues with using either a link or the rule mark is that I wouldn’t know how to set the y2 value correctly. The y2 value is currently computed by the bin transform and is not an existing datapoint in my dataset

Ah, yeah, that makes sense. Sorry—it was my first thought and don’t have time to dig in deeper. I bet someone else can help! :crossed_fingers:

well thanks for having a look anyways:slightly_smiling_face:

> I'm not sure if the Plot API offers you a shortcut to obtain the corresponding y-value.
1. In general, you can use `<_myMark_>.initialize()`  to obtain the values for  x and y channels after a transform.  E.g. `Plot.ruleX(`
      `data,`
      `Plot.groupZ(`
        `{ x: "mean" },`
        `{`
          `x: "Gewinn (EUR/Betrieb)",`
          `stroke: "grey",`
          `fy: "Jahr"`
        `}`
      `)`
    `).initialize().channels.x[0]`
> gives you x value refering to the mean of the column `"Gewinn (EUR/Betrieb)"`. However, I don't how the account for the facets, since fy seems to be ignored and you obtain the overall mean,
> 
> 2. After you obtained the x value, unfortunately your y value is nowhere explicitely in your data.  Your y values are points on your line, thus interpolations between the points after your bin transform (and the interpolation is defined by your curve function). To obtain the y value of the path for a certain x value, you might look at <https://stackoverflow.com/questions/67331467/find-a-point-on-an-svg-path> 

Another approach would be to create a very tall rule, with a clip-path that has the same shape as the area

I've done this for the geo mark  in <https://observablehq.com/@fil/diy-live-map-of-air-quality-in-the-us> but the principle is the same: take the mark that you want to transform into a clip-path, and add a render transform

<@U048X1JDDHN> : can you obtain the channel value of faceted mark with mark.initialize()? I did not succeed getting it (see my reply above)

the complete signature of mark.initialize is
`initialize(facets, facetChannels, plotOptions)`

if facets===undefined then the whole dataset is used

untitled (1).png

Thanks <@U048X1JDDHN> for your help! I’m getting closer but it’s not there yet <https://observablehq.com/d/bc592ca1cebe9518>

Just like in your example, I’ve added a clip path like this
```Plot.lineY(
      data,
      Plot.binX(
        { y: "count", filter: null },
        {
          thresholds: 10,
          x: "Gewinn (EUR/Betrieb)",
          fy: "Jahr",
          curve: "basis",
          render: (i, s, v, d, c, next) =&gt; {
            const g = next(i, s, v, d, c).children[0];
            return svg`&lt;clipPath id=farm&gt;${g}`;
          }
        }
      )
    )```

and applied it to the mean/median rules
```Plot.ruleX(
      data,
      Plot.groupZ(
        { x: "median" },
        {
          x: "Gewinn (EUR/Betrieb)",
          y: 110,
          strokeDasharray: "4 2",
          stroke: "grey",
          fy: "Jahr",
          render: (i, s, v, d, c, next) =&gt; {
            const g = next(i, s, v, d, c);
            g.setAttribute("clip-path", "url(#farm)"); // add clip
            return g;
          }
        }
      )
    )```

probably need to give a different id to each clip-path

```Plot.lineY(
      data,
      Plot.binX(
        { y: "count", filter: null },
        {
          thresholds: 10,
          x: "Gewinn (EUR/Betrieb)",
          fy: "Jahr",
          curve: "basis",
          render: (i, s, v, d, c, next) =&gt; {
            const year = i.fy.split("/")[0];
            const g = next(i, s, v, d, c).children[0];
            return svg`&lt;clipPath id=farm${year}&gt;${g}`;
          }
        }
      )
    )```

I’d don’t get what’s preventing the other lines to show though

it's always tricky when you have a clip-path and a transform

Capture d’écran 2024-01-11 à 10.28.59.png

in the browser inspector I removed the (facet induced) `transform`  property from the clipPath elements

perfect, thanks! I’m guessing the transform is automatically included when the fy option is used?

yes, and it's added AFTER we return the element

hmm we could remove it after the chart is rendered

it’s not nice but it should work right?

```            const g = svg`&lt;clipPath id=farm${year}&gt;${next(i, s, v, d, c).children[0]}`;
            requestAnimationFrame(() =&gt; g.removeAttribute("transform"))
            return g;```

better:
```return svg`&lt;clipPath id=farm-${year} style="transform: none"&gt;${
              next(i, s, v, d, c).children[0]
            }`;```

(ugly solution would have been fine as well :slightly_smiling_face: )

can you share these findings in <https://github.com/observablehq/plot/issues/1109> ?

yes sure, will also make the notebook public so if someone needs this as an intermediate solution it’s easier to find!

fwiw your notebook creates an optical illusion that looks like the vertical rules are not parallel

really? you mean between the years 18/19 - 19/20?

maybe it's the mix of dasharray etc; hard to tell

it seems that there is now a possible way to use css clip-path (and avoid the hard-coded id), I've added to the issue.

wow :heart: I wouldn't have thought there is such a short solution to this....

Hi, I am new to charting space but working on a very critical idea that I can't find reference to anywhere. Any kind of help is much appreciated.
I want to have a line chart and a timeline chart (one on top of another) with single x-axis in the middle. Both the chart needs to be aligned with that middle x-axis.
If I want to give an example _(context: Cricket match)_, lets say the top line chart is a run rate/over and the bottom timeline chart's domain is every ball and range is the hit sixes.
I cannot find any reference where this kind of vertically aligned charts are implemented. Can anyone help me with the idea on how to implement that?

I found this by searching “flame graph”, but I have never used it…<https://observablehq.com/d/0ab0f75202344fde>

Sounds like you're looking for translateExtent: <https://d3js.org/d3-zoom#zoom_translateExtent>

It's exactly what I was serching for, thanks. I should have found that myself.

You can create two Plot.axisX marks with different tickSizes. <https://observablehq.com/@observablehq/plot-multiscale-date-axis>

Zach,
• Your understanding is 100% correct. Private embedding with a notebook key (and hence database access and secret access) is available for Iframe embeds, but not for JavaScript embeds. And yes, the notebook will not be accessible through the link at the bottom of the embed unless the user/viewer is part of the Observable workspace.
• People would usually put the analytics code in their host application, but you can look at <https://observablehq.com/@endpointservices/plausible-analytics|these examples> from <@U04HEJ4D3RA> about using Plausible Analytics in Observable notebooks. 

Thanks for the info. Could you tell me a bit about the difference between iframe and JavaScript embeds?
• What I suggested is possible for iframe because all the “backend” code stuff is still on Observable, but handled within a private notebook? And a JavaScript embed is different because that is removing ObservableHQ from the equation, other than using the runtime?

JavaScript embeds actually load the notebook code from our API servers during runtime and then the runtime (through the Inspector) evaluates the code and injects it into the DOM of your own application. See the <https://observablehq.com/documentation/embeds/advanced#rendering-cells|documentation>.
It also allows for injecting code or data into cells through a `redefine` method (see <https://observablehq.com/documentation/embeds/advanced#overriding-cell-values|documentation>).

CleanShot 2024-01-17 at 12.07.58@2x.png

`import("<https://esm.run/date-fns>")` works for me.

1. is invalid because static imports in Observable notebooks are reserved for imports from other notebooks.
2. invalid for the same reason
3. invalid syntax
4. should work (that's what esm.run redirects to)
5. is invalid because require (d3-require) is an UMD/AMD loader

That fixed it. Thanks for the explanation!

Doing a dynamic import via esm.run is usually a good start. If you run into trouble, then esm.sh is a _very_ decent alternative that even lets you specify dependency versions or create your own bundles on the fly (personally it's my preferred bundler).

Skypack can work sometimes, but often it changes the packages in unexpected ways.

If you only specify the package identifier (`import("date-fns")` ) then Observable will default to <http://unpkg.com|unpkg.com> for legacy reasons. Avoid <http://unpkg.com|unpkg.com> whenever you can. :slightly_smiling_face:

UMD/AMD via require is the "old" (aka legacy) way of loading packages. Some may still require UMD because their plugins expect to be able to mutate the parent object (e.g. some old D3 libs), and ES modules are immutable.

Loading of plugins via ESM can get tricky as well since they often don't specify versions (your package manager / bundler usually takes care of that) and you may end up with different versions of the primary module. In that case esm.sh may be the only choice.

&gt; Skypack can work sometimes, but often it changes the packages in unexpected ways.
This is what happened to me initially that caused me to question my understanding of ES6 imports.

Yeah, in my experience Skypack has a tendency to pick the entry point for Node (when there's one) and bundle that one.

Hello, does anyone have any ideas on how to implement zoom In/out feature in Gapminder's  bubbles chart  with d3.js？
<https://www.gapminder.org/tools/#$chart-type=linechart&amp;url=v1> (edited)

there is not, but there is an issue! <https://github.com/observablehq/plot/issues/1832>

For "local" maps it's generally recommended to use an azimuthal projection centered on the center of the circle of interest, the Mercator projection (possibly rotated by -lon to avoid clipping effects near the antimeridian), or a conic projection tangent to the globe at the point of interest. The choice depends on many factors including the general shape of the area you want to cover, and cultural factors (such as using the official projection for this particular country). Equal earth is really only meant for global maps.

For your second question the answer is simply that the projection fills the rectangle; make it higher and you'll get tighter clipping.

Thanks. In terms of centering a plot, this can be done by picking a geoCircle location, then rotating by that center?

yes; it's often easier to imagine if you see yourself holding a globe and rotating it (rather than "rotating a projection")

CleanShot 2024-01-22 at 22.10.10@2x.png

CleanShot 2024-01-22 at 22.08.22.mp4

this is how my animation currently looks: the line is cut off. vs removing the animation. With some tweaking and calling `getTotalLength` on path elements I can eliminate this cutoff but wondering if there's a better way.

Percentage refers to the viewport width.

Instead you'll want to set the <https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength|pathLength> attribute on the line (can only be done in SVG, unfortunately), then set `stroke-dasharray` and `stroke-dashoffset` to match it.

set the channel description: Ask questions and get help from the community and Observable team.

Screenshot 2024-01-24 at 07.57.32.png

Screenshot 2024-01-24 at 08.01.32.png

If a color map is a mapping from [0,1] to colors, we can think of a color scale as a mapping from values in the given domain to [0,1], combined with the color map. So this is how I would try to address the issue: first, try to get the color map in a function (from [0,1]) — this is likely as simple as having say 256 colors in an array. In D3 lingo, we call this a color interpolate function (e.g. <https://d3js.org/d3-scale-chromatic/sequential#interpolateViridis>). Second, make the value map (from domain to [0,1]) follow the given custom function?
And then combine them to get value =&gt; color.
To choose the _*ticks*_ you will need a strategy that makes them both "round" and "nicely distributed", I don't think there is a generic answer to that. Happy to fiddle in a notebook if you want.

Wow Fil! Would love it if you could fiddle in a notebook to show me!

Do you want to create a notebook with the formula and color map you want to emulate? I could take a look later in the day.

<https://observablehq.com/d/737646f9b922c971>

Can you access that notebook?

It seems I need to add you to my workspace before you can edit it. How do I do that? (i'm new to this :slightly_smiling_face:)

do you have a reference for the "unskewed rainbow"? or is it just this screenshot?

untitled (22).png

I've extracted the rgb profile of the screenshot

(the formula should be easy to determine, it looks like quadratics)

Those straight lines make me think that someone blended three separate gradients, one of them largely linear (the dents are probably due to colorspace constraints?) :thinking_face:

<https://observablehq.com/@fil/unskewed-rainbow>

<https://www.desmos.com/calculator/lnxwpq2z0u>

it's a far cry from the actual values, but that's the basic idea

<https://observablehq.com/@fil/unskewed-rainbow-dev>

The simple version looks pretty close, I think? (edit: aside from the slightly wider spread in the middle, but maybe good enough?)

(it would be good to find the source of that scheme, there's probably a good formula for it already)

Wow. Looks good. Thanks. Will dive into it and try to understand what you've done now. :slightly_smiling_face:

I have done in 3 ways:
1. <https://observablehq.com/@saneef/is-observable-inputs-style-able>, This approach is used where I need to override Observable inputs. The Observable Inputs are styled using a name spaced classname. We can get the namespace classname, then target styles based on it.
2. <https://observablehq.com/@saneef/pdf-view#initializeStyles>, this is using `DOM.uid` , and inlining the styles.
3. This is using stylesheets. It has all the pitfalls mentioned in the ‘don’t do this notebook.’ So, you need to be conscious of avoiding conflicts of styles within the notebooks, or any notebooks you are importing the cell. 
    a. <https://observablehq.com/@saneef/tachyons-css>: Uses external stylesheets
    b. <https://observablehq.com/@saneef/substratum>: Uses style(sheets) defined in notebook. The notebook was actually meant to load stylesheets when you are hosting exported Observable notebook. To view the styles while viewing notebook in Observable, check the “Debug” checkbox towards the bottom.

Although not specifically your question, there is a very high level of detail for data being used as a globe-level reference. For example all the small Pacific Islands are visible, although in reality they are so small that at that scale they aren’t necessary. You could consider another source: <https://github.com/martynafford/natural-earth-geojson/blob/master/110m/cultural/ne_110m_admin_0_countries.json>

More on-topic:
You could convert to topojson: <https://jeffpaine.github.io/geojson-topojson/>
Or you could simplify the original source: <https://mapshaper.org>

I simplified your 23MB file to 1.6MB with mapshaper, and it doesn’t really affect the look-and-feel: <https://observablehq.com/d/72c56b842878abaf>

Interesting, the mapshaper tool looks helpful. Do you feel that topojson is a better format to use on Observable?

TopoJSON is substantially more compact than GeoJSON due to how they encode geometries.  TopoJSON is an extension of GeoJSON

mapshaper is very much the tool that most folks prefer. for a long time I tried to do everything in the notebook, and there are tools that allow simplification from source in the Observable context (one sec)

... Here's an example, where @caseymm uses Turf.js to simplify geojson: <https://observablehq.com/@caseymm/simplify-geojson>

Interesting as well, thanks for the example. I find myself in a state where the data sources (including map data) is really large, so it becomes prohibitive to use the classic File Attachment methods to get data into Observable.

Trying to both get larger data files in a notebook (through APIs etc.) or reducing file sizes, like in this thread.

<@U0489M6NVGU> per your example, I downloaded the two files and do see a noticeable reduction. Could see if turf.js proves useful, thanks.

Turf.js is a very powerful package. Enjoy exploring!

With respect to using larger source data files, there are techniques that I am still learning. The parquet avenue that you're asking about in other threads is among those I also wish to learn. One moment, and I'll look up some things that may prove useful

<https://observablehq.com/@chrispahm/streaming-geojson|https://observablehq.com/@chrispahm/streaming-geojson>

<https://observablehq.com/@saneef/buildings-near-hal-airport|https://observablehq.com/@saneef/buildings-near-hal-airport>

<https://observablehq.com/@kylebarron/geoparquet-on-the-web|https://observablehq.com/@kylebarron/geoparquet-on-the-web>

Thanks for sharing! There certainly is a lot to learn. I think the plethora of options can often lead me to indecision, but these notebooks look very promising. I do want to work with large files whenever possible, but I do want to be conscious of not reinventing the wheel.
• The GeoParquet looks interesting since I might be able to read in from a url.
Appreciate the suggestions!

Hi Zach - Here's an example <@U048X1JDDHN> made that uses Observable's SQL cell and DuckDB client. Does this do what you need? <https://observablehq.com/@fil/insee-parquet>

Thanks Allison, this is helpful, but I am wondering if this can be used if the data source is private. Could maybe add a Secret somewhere?

For some context, I made a <https://observablehq.com/@periscopic/bitbucket-api-in-observable|helper for fetching data from Bitbucket repos> (essentially a clean version of `fetch` with credentials) and I’m realizing I might want to read in a parquet file. If we boil off all the helper stuff, I’m wondering if I read in a parquet file with fetch, how should I parse the response, maybe to get to a DuckDB or array of objects?

I haven't tried that but it's documented here for S3 <https://duckdb.org/docs/extensions/httpfs.html>

<https://observablehq.com/@recifs/a-billion-euros>

I saw, was cool to watch that happen. And you just beat me to getting the marginRight.

you need to click on the ❤︎ so I get my dopamine