Visualizing the whole plot API

Show and Tell
1

As I am trying to better grasp the plot API, I decided to turn the whole plot v0.1.0 API into a hierarchy and visualize it:

Here is the visualization:
https://ee2dev.github.io/plot/

I built the hierarchy from the API in this notebook:

Since I built the JSON file describing the plot API manually from the different sources (plot github repo, observable examples, object inspections) be aware that :

  • it might contain errors
  • it can be improved to make it more consistent

I would be very happy to see improved versions of the JSON file and/or other visualizations of the hierarchy!

9 Likes
2

That’s an impressive amount of work!

Just in case you weren’t aware, you can destructure directly into arrays. To give an example, stackX could be written as:

stackX = ({
  name: ".stackX()",
  type: "option transform",
  info:
    "Creates new channels x1 and x2, obtained by stacking the original x channel for data points that share a common y (and possibly z) value. A new x channel is also returned, which lazily computes the middle value of y1 and y2. The input x channel defaults to a constant 1, resulting in a count of the data points.",
  children: [
    {
      name: "{}",
      type: "options",
      children: [
        // stack specific options
        ...stackOptions,
        // transform
        ...transformChildren,
        // 2 specific channels
        {
          name: "x1",
          type: "channel",
          info: "The starting horizontal position of the series",
        },
        {
          name: "x2",
          type: "channel",
          info: "The ending horizontal position of the series"
        },
        {
          name: "x",
          type: "channel",
          info: "The horizontal position of the series"          
        },
        {
          name: "y1",
          type: "channel",
          info: "The starting vertical position of the series"
        },
        {
          name: "y2",
          type: "channel",
          info: "The ending vertical position of the series"
        },
        {
          name: "y",
          type: "channel",
          info: "The vertical position of the series"
        },
        // end specific channels
        ...globalChannelChildren,
        // 3 specific constants
        ...insetsChildren,
        // global constants
        ...globalConstantsChildren
      ]
    },
  ],
})
2 Likes
3

Thanks you, @mootari!
I learned a lot, I hope others can benefit from it, too…

Thanks for pointing out a way to destructure directly into arrays! I have used destructuring just here and there, but haven’t internalized all possibilities - so thanks a lot! :pray: :+1:

2 Likes