does anyone know of any gentle introductions to d3-geo and d3-zoom? I'm trying to make a slippy map and having a heck of a time working out how to scale and transform properly

anyone have thoughts on how to merge zip3s to make them more pleasingly shaped and contiguous? like I want closer to a voronai diagram shaped than the madness that are some of these zip3s

This feels related to https://observable-community.slack.com/archives/C03SEMPUF6F/p1718456700232489?thread_ts=1718456523.462799&cid=C03SEMPUF6F. I have been using a trial-and-error approach to figure out how to display and HTML table but no success. I can return a table such that I see the html (image attached), but it's not being interpreted as html. The table is constructed like this:

```js echo
function formatTable(
  data,
  props, // See <https://github.com/yetrun/json5-to-table#props%E5%AE%9A%E5%88%B6%E5%B5%8C%E5%A5%97%E5%B1%9E%E6%80%A7>
  opts = {}
) {
  const options = Object.assign(
    {
      // Format Date data types. Use path to selectively format.
      dateFormat: (datum, path) => isoformat.format(datum),

      // Format all values. Use path to selectively format.
      // 📝 dateFormat take precedence for Date types
      format: (datum, path) => datum,

      height: 274, // Set height of the table. Default is on the Inputs.table
      width: null // Set width of the table.
    },
    opts
  );

  const minHeight = 33;
  let { height, width } = options;
  const copy = cleanseData(data, options);

  height = height > minHeight ? height : null;

  const generateHTMLTableoptions = {
    attributes: {
      table: {
        // Based on Observable table styles
        style: `
max-width: initial;
${minHeight != null ? `min-height: ${length(minHeight)};` : ""}
margin: 0;
border-spacing: 0;
font-variant-numeric: tabular-nums;`
      },
      th: {
        style: `padding: 3px 6.5px; position: sticky; top: 0; background: #fff;`
      },
      td: {
        style: `padding: 3px 6.5px`
      }
    }
  };

  return html`<div style="overflow-x: auto;${
    height ? `max-height: ${height}px;` : ""
  }${width != null ? `width: ${length(width)};` : ""}">
  ${json2table.default.generateHTMLTable(copy, props, generateHTMLTableoptions)}
</div>`;
}
```

And execution is attempted like this:

```js echo
formatTable(sampleArray, null, {
  height: 200, // Set height of the table

  width: "80%", // Set width of the table

  // Format date types
  dateFormat: (datum, path) => new Intl.DateTimeFormat("en-US").format(datum),

  // Format values. dateFormat take precedence for Date types
  format: (datum, path) => {
    if (path === "courses.score") {
      return `${datum}/100`;
    }
    return datum;
  }
})
```

Wrapping in

<div>

and messing around with the html template literal, JavaScript code blocks, and in-line Markdown and still I can't return a rendered result. Here's where I am keeping a copy of the source code: https://github.com/aaronkyle/dataviz/blob/main/pretty-tables_src/index.md And here's a rendering of where I am at when trying to covert this table. Here a table is being returned, but the image in not correctly interpreted. https://aaronkyle.github.io/dataviz/pretty-tables_dist/ 🙏🏻

Observable Plot: how do we sort the facets in the order of another column, rather than alphabetical order of the faceted channel --> would like the purple color row to come up on the top (my

total_employment

field): website link

Hi, I'm new to observable and looking for help with a circular definition error.

Hi, does anyone have a React component inside an SVG tag where everything magnifies based on the mouse pointer? like this

Curious as to why Markdown like this works in a notebook but not in Framework:

*[IAM User Policy](*${links.iam_policy}*)*

Hey folks - need help with Search Input again, but this time it is with styling. I’d like to increase the search box size and change the font weight. However, when I use the corresponding CSS on the element it doesn’t seem to work.

hey folks anyone knows solution for this - https://stackoverflow.com/questions/78741221/magnify-wrapper-component-in-react-using-d3-alignment-issue

There aren’t really any documents describing the internals of Observable Framework are there? I’m trying to write an updated version of my 11ty integration, but I’ve been running into bits of the code I don’t understand.

I'm driving myself nuts banging my head on d3-zoom + d3-geo + polygons from geojson. if feels like I can't get anything to work right consistently and can't find anything to explain it step by step so I can grok it and fix my own issues. anyone have any tips or articles or tutorials that might be helpful?

Hi, I am starting with observable. My intension is to use with quarto documents. Are there any books or tutorials to start from basics? I know there are many examples on observablehq but because I am new to JavaScript also, I was wondering if there is a book that combines js and observable. I am open to other suggestions to learn observable. Thank you

trying to increase the seemingly "max-width" cap (seems like ~640 px) which is applied for this form / radio inputs + labels to use full width of the page, but struggling to see which CSS i need to override. I've tried various containers and CSS, been stuck for last few days. (website here: https://www.clinicians.fyi/healthcare-labor-v2)....

I've been trying to get started with Framework using the Getting Started page but it kept failing. Ended up finding a page that says Framework doesn't work on Windows machines. Is that right?

hi team! im trying to use the D3 Sankey chart, and some nodes are looking too small. I'm wondering if theres a way to have a minimum height for the return of

sankeyLinkHorizontal

for the links. I can kinda have the nodes be a certain height pretty easily, but the links is the issue. There was a question about this in the forum, but the solution seems hacky and I'm wondering if theres a better way to implement a minimum height. Thanks!

Is it possible to import the Markdown template literal from the Observable standard library into Framework? I have tried:

```js
import {md} from "npm:@observablehq/stdlib";
```

but it returns as

undefined

Why is zooming so much less performant in Canvas than in SVG? Following the Zoom to Bounding Box notebook, I wrote this select-to-zoom feature in SVG and it is pretty smooth, but when I implemented it in Canvas, the transition is so choppy. Why? Is there anyway to optimize it?

In Observable Framework, when I update a Mutable variable from a js sql query, the view function that wraps the input table and loads data from the Mutable variable doesn't automatically update the DOM. If I reload the page, the data is correct. I tried creating generators, but I'm not sure if I'm applying reactivity correctly. Any advice?

Hey guys! 🎉 I'm new here - thanks for having me. I'm working with a D3 hierarchy tree at the moment and trying to change it's orientation but struggling. I will admit, the new orientation isn't your standard one 👀 (see image). Has anyone tried to implement something like this before?

Hi all, I'm wondering if anyone has a suggestion on the best way to go about adding some space between two sections of these grouped cells? This is a chart showing the number of bikes counted per 15 minute count bucket, and the space I'd like to add would be to separate the morning and evening counting shifts. I tried following the Facets documentation to create two groups along the X axis, but I'm a bit lost because I'm also using a group transform to group by location and time bucket. My data has an 'Hour' property denoting the hour (e.g.

6

,

14

) of the count bucket, so I'd like to key off of that for the faceting. Here's a notebook with what I'm working with: https://observablehq.com/d/bfbb63a16a2d77b5

I'm having a hard time writing sql queries in Observable notebooks. I'm not sure how string interpolation is supposed to work. As you can see in the notebook for some reason a prepared SQL query as string does work, but directly in a SQL cell does not.

I'm getting an error trying to clean up a parquet file loaded into duckdb. Should I not load it using

DuckDBClient.of({ mydb: FileAttachment("mydb.parquet") })

then?

Error: Binder Error: Can only update base table!

To improve performance of my histogram plots I'm looking into the

histogram()

function built into DuckDB. The query seems to run fine, but the SQL cell shows "Error" as a value and inspecting the array itself says "Uncaught TypeError: proxy [[OwnPropertyKeys]] must return an array with only string and symbol elements". Am I using it incorrectly? Of course I could do the binning myself which is a lot more flexible. https://observablehq.com/d/75014781c1acd67c#cell-120

Hello! Is it possible to get h3 headers in the toc? Is there a way to disable the behaviour where "subtitle" headings are hidden in the toc? (i.e. if no content between

<h1>head</h1>

and

<h2>subhead</h3>

, only

head

shows in toc.) TIA

I'd like to combine an

Input.search

with an

Input.table

to help looking entries to select. The problem is that the previous selection clears when you filter data away by typing in the search field. Is there a clever way to preserve selection even though the list of visible items are filtered? A native search field on the table like the data table cell has would be even better 👼 There's an issue related to search #222, but it has no mention of preserving selection.

Greetings! I have been using Framework for a few months without any issue, but when I attempted to view one of my projects this morning, our internal security protocols blocked the "observablehq.cloud" domain and labeled it a "security threat." Under the Diagnostic Info section of the report, it shows the Host to be "malware.opendns.com". Is this a recent change that would cause the site to be blocked? Thanks.

There's this fancy

albers-usa

projection for the US which also happens to resize nicely when used in Plot. For other countries I've been doing

projection: d3.geoMercator().fitSize([width, 650], nl_land)

, but that does not take into account the height. Is there a variable around for the standard height of a plot cell I can use? It seems that the aspect ratio remains 1.6, but who's to say that's a given. https://observablehq.com/d/91980718e3b1cae1

Hi! I'm trying to import a library (this one) but nothing seems to work. 😕 I really don't know this JS ecosystem and/or how NPM works, so I'm kind of fumbling in the dark here. Could someone please help me make it work?

Hello everyone, can you help me? I'm using React with Vite, and my d3 graphics work locally, but when deployed to Vercel it doesn't work and there are no build errors.