Observable

Notebook examples

Experimental stuff with Observable Plot: plugins, hacks, debugs… guaranteed to break sooner or later.

Plot Experiments

Plot

It looks like points can be displaced on both axes. Doesn't make that the chart inaccurate?

Fabian Iwand

Yes, although I set the *x* force to be much stronger than the *y* force, it's still moving sideways. You might prefer to apply the "dodge" algorithm to avoid this. I haven't yet taken the time to do it.

I've also added a comment in the introduction.

For reference/posterity, while looking for other approaches to beeswarm plots I came across these force-based examples:
- https://vega.github.io/vega/examples/beeswarm-plot/
- https://developer.qlik.com/garden/5746b73299cd94908a3c44c8
- https://bl.ocks.org/HarryStevens/aa2c3313b29a4f9c819ee465888e1475
- https://www.datasketch.es/project/655-frustrations-doing-data-visualization

As well as:
- https://github.com/jtrim-ons/accurate-beeswarm-plot
- https://medium.com/@Elijah_Meeks/visualizing-archer-bcb80e319625 (couldn't find details on the implementation)

Interesting how it appears that there are two points that come up from the bottom when I run it, I guess those are outliers?

Wiltse Carpenter

This is a great example. Dumb question: How would set a custom maximum and minimum radius to the circles? They seem to be autoscaled here in a way I don't know how to override.

Ben Welsh

You can use the *r* scale, see https://observablehq.com/@observablehq/plot-scales

Could the mark support tips? Right now they appear to be positioned at the center axis instead of the point offsets.

I guess so. We'd have to copy the positions of the dots into the derived tip mark's channels.

How can you use D3 code within Plot? what is the .render function, and is there any documentation about this? Thanks!

Cuthbert Chow

> How can you use D3 code within Plot?

It's just JavaScript :)

> what is the .render function, and is there any documentation about this? Thanks!

The render function is called by plot on each mark (and each facet), and returns the SVG content that the mark defines, for example a <g> containing a bunch of <circle> for the dot mark.

This function is not fully documented, because it's not completely stabilized yet (see issue https://github.com/observablehq/plot/issues/1263). This is why I try to be careful to label all the extensions I make as "experimental".

The function is called with the following arguments: an index (decorated with facet information), the scales, the scaled channels, the frame's dimensions, and a context (which you can use to create a new DOM element, or check the projection).

The index is an array of integers that lists the values to represent in that facet. The channels are indexed with the same values.

For example, this is how Plot.dot reads the position (cx, cy) of the dots it needs to render: Array.from(index, (i) => [channels.x[i], channels.y[i]])

The scales argument is possibly going to change soon, because as part of the public API it should probably return scales in the same format as the chart.scale() method… which is not the case currently. See https://github.com/observablehq/plot/pull/1265 on that topic. Note that the channels are already scaled (in screen space), so most of the time you don't need the scales.

Besides the scales, I don't expect huge changes to the API before we release version 1. What we're discussing will mostly be additions.  

I hope this clarifies and gives you enough information to start; don't hesitate to ask if you need more details.