How to find underlying data for examples?

New To Observable
1

Hello! I’m new to observable and trying to learn how to specify bin values, but I’m having some trouble understanding how things work because I can’t seem to see the shape of the underlying data used in the example.

For example, when I navigate to Bin transform | Observable Plot, how would I see the shape of olympians that is being passed in to Plot.rectY? I can see the csv in the network tab, but it would be great if I could see the object as it is passed. Is there a way to do this?

2

Hi @miketalley

I created a quick notebook to show the Plot here.
In a notebook, you can just add a new JavaScript cell with the reference to olympians and you can inspect that in JSON format, or make a Data table of the data to inspect it. This is one of our built-in sample datasets so it is easy to demo examples and play with Plot.

3

This is great, thanks @Cobus ! Super fast reply too!

1 Like
4

I have a follow-up question on this: is it possible to specify an interval value when using inconsistently spaced bins using rectY? I put together an example here that may make more sense.

My goal is to get the x axis values to display on the sides of the bins/bars instead of centered, and I am not sure how to specify the last value. When I manually run axisX after rectY it doesn’t seem to work.

5

Maybe something like this?

Plot.plot({
    y: { percent: true, label: "Percentage" },
    x: { label: "Value" },
    marks: [
      Plot.rectY(window.data.percentages, {
        x1: window.data.bins,
        x2: (x, i) =>  window.data.bins[i+1],
        fill: "steelblue",
        insetRight: 0.5,
        insetLeft: 0.5,
        tip: true,
      }),
      Plot.lineY(window.data.percentages, {
        x: window.data.bins,
        curve: "catmull-rom",
        stroke: "red",
        strokeOpacity: 0.5,
      }),
      Plot.axisX(window.data.bins),
      Plot.ruleY([0]),
    ]
});
6

Thanks @Fil ! This pointed me in the right direction!

I appreciate all of the help, here is my working example.

1 Like