microsoft / datamations

https://microsoft.github.io/datamations/
Other
67 stars 14 forks source link

Zoom to error bar range #54

Closed sharlagelfand closed 3 years ago

sharlagelfand commented 3 years ago

Expanding on #44, would be good to have the final frame zoom in to only show the range of the error bars, not of the full data.

I'll generate a test spec for this.

sharlagelfand commented 3 years ago

@giorgi-ghviniashvili here is a sample spec, and how it looks now:

https://user-images.githubusercontent.com/15895337/119535233-ca5e9c80-bd55-11eb-882c-d3125ac610a4.mov

The zoom kind of works, but since the axis is shared between the last few frames it doesn't update with the new range.

giorgi-ghviniashvili commented 3 years ago

@sharlagelfand Seems like this is gemini issue that it does not update axis. Let me take a look why.

giorgi-ghviniashvili commented 3 years ago

OK, fixed it. It was not correctly drawing vega-axis layer.

https://user-images.githubusercontent.com/6615532/119660871-c6f40f80-be40-11eb-8160-6f56f1d6455a.mov

sharlagelfand commented 3 years ago

Thanks @giorgi-ghviniashvili! This looks great. I tried it with error bars as well but it looks like they're drawn twice or something, could you take a look? Here are the specs.

https://user-images.githubusercontent.com/15895337/119684292-63eb8400-be12-11eb-95e9-706f2552d2d0.mov

giorgi-ghviniashvili commented 3 years ago

@sharlagelfand sorry, forgot to clear old container, here it is:

https://user-images.githubusercontent.com/6615532/119702469-8909e200-be66-11eb-984e-1a2f505bba73.mov

sharlagelfand commented 3 years ago

Thanks, looks good!!

sharlagelfand commented 3 years ago

Going to reopen this since it looks like there's an issue with zooming on errorbars when there are no facets, as in this spec:

https://user-images.githubusercontent.com/15895337/120213763-9b3aa600-c201-11eb-8d6b-89c3587e9adb.mov

giorgi-ghviniashvili commented 3 years ago

Sad.. It is gemini thing, not able to correctly update y axis.. Trying to figure it out, whether it is a gemini bug or ours.

giorgi-ghviniashvili commented 3 years ago

@sharlagelfand, so the reason of the issue is because we have different y-axis on last two specs.

Ok, I fixed it and now it correctly updates y-axis when animating last frame.


Ok, thats good. Now bad news, it does not correctly change width (to shift x-axis because of floating points) and still getting this:

image

Gemini recommend does same in gemini-editor, it just expands axis to the left:

e71bae0a-dff8-432c-8205-6b616a9f40b5


I tried to add this to gemini spec manually in code after recommend

{
    "component": "view",
    "change": {
      "signal": [
        "width", "height"
      ]
    },
    "timing": {
          "duration": {
              "ratio": 1
          }
      }
  }

and seems like it worked:

https://user-images.githubusercontent.com/6615532/120314113-f1841380-c2eb-11eb-8935-c0af02704432.mov

sharlagelfand commented 3 years ago

It looks good to me now, thanks @giorgi-ghviniashvili!

Just curious, do you know why the sizing of axes changes and overlaps in Firefox, but not in Chrome? Everything looks pretty nice in Chrome:

https://user-images.githubusercontent.com/15895337/120342827-27160600-c2c6-11eb-915f-c3f84b9144d1.mov

But a bit rough in Firefox (my main browser):

https://user-images.githubusercontent.com/15895337/120342841-2a10f680-c2c6-11eb-9a1b-4f4d16b5cdd5.mov

giorgi-ghviniashvili commented 3 years ago

No Idea, will try to debug and see why.