# Visualizing the whole plot API

**URL:** <https://talk.observablehq.com/t/visualizing-the-whole-plot-api/5289>\
**Category:** Show and tell\
**Created:** [July 4, 2021, 11:42pm UTC](https://talk.observablehq.com/t/visualizing-the-whole-plot-api/5289 "2021-07-04T23:42:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![EE2dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ee2dev/32/695_2.png) [@EE2dev](https://talk.observablehq.com/u/EE2dev)\
**Post date:** [July 4, 2021, 11:42pm UTC](https://talk.observablehq.com/t/visualizing-the-whole-plot-api/5289/1 "2021-07-04T23:42:23Z")

</div>

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/](https://ee2dev.github.io/plot/)

I built the hierarchy from the API in this notebook:

> **[Plot API v0.1.0](https://observablehq.com/@ee2dev/plot-api-v0-1-0)**

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!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [July 8, 2021, 8:18pm UTC](https://talk.observablehq.com/t/visualizing-the-whole-plot-api/5289/2 "2021-07-08T20:18:56Z")

</div>

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:

```javascript
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
      ]
    },
  ],
})

```

---

<div class="post-metadata">

**Author:** ![EE2dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ee2dev/32/695_2.png) [@EE2dev](https://talk.observablehq.com/u/EE2dev)\
**Post date:** [July 8, 2021, 9:11pm UTC](https://talk.observablehq.com/t/visualizing-the-whole-plot-api/5289/3 "2021-07-08T21:11:12Z")

</div>

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! 🙏 👍