Liquid flow velocity in pipes

Ternary plot

Merging hexagons

Spotify Pop Artists

Distance Angle Voronoi

AoC 12: shortest path under constraints

Plot: Voronoi labels

Hello, olli

Rough Plot

Observable

Plot: Correlation heatmap

Using d3.blur with Plot

Job vacancies in Australia

Warming stripes

Assemblée nationale 2017-2022

Minimalist dodge plot

Plot.image border

Plot: from columnar to tidy data

Age/Hand/Plot

Plot: group, bin and sort

Plot.stereoHistogram

Variants of SARS-Cov-2 in Europe

Variants du SARS-CoV-2 en France

Topological subsampling

Plot: Animate a bar chart (OBSOLETE)

Metbrewer color schemes

How many books was I reading?

Road traffic under COVID restrictions (France)

Convex hull mark (#154)

Hello, Open Meteo

K-means binning

Matrix diagram

Quasi-random Monte Carlo integration

Plot: Difference chart

ELD Viewer

Plot early bird

ROC curve

Skies Plot

Happy anniversary, Project Gutenberg!

The Sun’s analemma

Observable Plot in a Web Worker

Plot: regression

Edit data with Plot

Conical gradient Plot

Plot Hyperboloid

Experimental Plot Beeswarm

The ARPANET in December 1969

Irregular bins histogram

Log-scale histogram

Database Outage Plot

Plot: count distinct (#412)

Scatterplot matrix

Irregular Bar Chart

Facet exclusion transform

Canvas Plot

How to attach a plot to a DOM element

Renko Chart

Waffle Chart

Qatar Population Pyramid

Slope Chart

Sequence Logos

Plot: Stacked bin dots

Plot

Notebook examples

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

Plot Experiments

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

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.