How to use all circle sizes in a punchcard?

删除回忆录丶 提交于 2021-01-24 11:43:15

问题


This VEGA-lite demo of Table Bubble Plot uses all sizes, from small to big circles.

My script, illustrated below, is not using, there are only 2 or 3 sizes. How to enforce or say to VEGA-lite use all circle sizes?

{
          "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
          "data": { "url":"/_sql/myTable"},
          "mark": "circle",
          "encoding": {
            "y": {
              "field": "instant",
              "type": "ordinal",
              "timeUnit": "day",
              "sort": ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]
            },
            "x": {
              "field": "instant",
              "type": "ordinal",
              "timeUnit": "hours"
            },
            "size": {
              "field": "n_pmin",
              "type": "quantitative",
              "aggregate": "avg"
            },
            "color": {
              "field": "n_pmin",
              "type": "quantitative",
              "aggregate": "avg"
            }           
          }
}

PS: ideal also change "only blue" gradient to "bluegreen", but I not see how to set color into color.


NOTES

for @Jim request, a sample:

[{"instant":"2020-04-23T14:46:42","n_pmin":2210086}, 
 {"instant":"2020-04-23T15:05:01","n_pmin":2214909}, 
 {"instant":"2020-04-23T16:05:01","n_pmin":2159652}, 
 {"instant":"2020-04-23T17:05:01","n_pmin":2290159}, 
 {"instant":"2020-04-23T18:05:01","n_pmin":2235739}, 
 {"instant":"2020-04-23T19:05:01","n_pmin":2505914}, 
 {"instant":"2020-04-23T20:05:01","n_pmin":2517069}, 
 {"instant":"2020-04-23T21:05:01","n_pmin":2492883}, 
 {"instant":"2020-04-23T22:05:01","n_pmin":2535839}, 
 {"instant":"2020-04-23T23:05:01","n_pmin":2519568}, 
 {"instant":"2020-04-24T00:05:02","n_pmin":2367309}, 
 {"instant":"2020-04-24T01:05:01","n_pmin":2384885}, 
 {"instant":"2020-04-24T02:05:01","n_pmin":2340421}, 
 {"instant":"2020-04-24T03:05:01","n_pmin":2369579}, 
 {"instant":"2020-04-24T04:05:01","n_pmin":2285203}, 
 {"instant":"2020-04-24T05:05:01","n_pmin":2206629}, 
 {"instant":"2020-04-24T06:05:01","n_pmin":2149411}, 
 {"instant":"2020-04-24T07:05:01","n_pmin":2218313}, 
 {"instant":"2020-04-24T08:05:01","n_pmin":2231320}, 
 {"instant":"2020-04-24T09:05:01","n_pmin":2163876}, 
 {"instant":"2020-04-24T10:05:01","n_pmin":2100388}, 
 {"instant":"2020-04-24T11:05:01","n_pmin":2040520}, 
 {"instant":"2020-04-24T12:05:02","n_pmin":2157928}, 
 {"instant":"2020-04-24T13:05:01","n_pmin":2099753}, 
 {"instant":"2020-04-24T15:05:01","n_pmin":2334844}, 
 {"instant":"2020-04-24T16:05:01","n_pmin":2430831}, 
 {"instant":"2020-04-24T17:05:01","n_pmin":2403722}, 
 {"instant":"2020-04-24T18:05:02","n_pmin":2468541}, 
 {"...":"..."},
 {"instant":"2020-05-13T16:05:01","n_pmin":2717164}, 
 {"instant":"2020-05-13T17:05:01","n_pmin":2794972}, 
 {"instant":"2020-05-13T18:05:01","n_pmin":2824981}, 
 {"instant":"2020-05-13T19:05:01","n_pmin":2852586}, 
 {"instant":"2020-05-13T20:05:01","n_pmin":2868170}]

回答1:


Short answer to the main question,

How to enforce or say to VEGA-lite use all circle sizes?

Say "zero": false.
But, let's see in more detail how to do it in a more handmade way, to understand when you can set scale.zero to false as faster solution.


You can adjust the properties you're interested using the scale specification in the relevant encodings.

For the color scheme, you can set scale.scheme to any of the options listed in Vega Color Schemes.

For the sizes, you can set the scale.domain and scale.range to desired values, where domain is the span of numbers in data space, and range is the area of associated legend marks in square pixels.

Alternatively, you can set scale.zero to false to automatically adjust the domain, and leave out the zero value (which is what is causing the "missing" circles in your chart).

Putting it together, it might look like this, using the sample data you provided (vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"instant": "2020-04-23T14:46:42", "n_pmin": 2210086},
      {"instant": "2020-04-23T15:05:01", "n_pmin": 2214909},
      {"instant": "2020-04-23T16:05:01", "n_pmin": 2159652},
      {"instant": "2020-04-23T17:05:01", "n_pmin": 2290159},
      {"instant": "2020-04-23T18:05:01", "n_pmin": 2235739},
      {"instant": "2020-04-23T19:05:01", "n_pmin": 2505914},
      {"instant": "2020-04-23T20:05:01", "n_pmin": 2517069},
      {"instant": "2020-04-23T21:05:01", "n_pmin": 2492883},
      {"instant": "2020-04-23T22:05:01", "n_pmin": 2535839},
      {"instant": "2020-04-23T23:05:01", "n_pmin": 2519568},
      {"instant": "2020-04-24T00:05:02", "n_pmin": 2367309},
      {"instant": "2020-04-24T01:05:01", "n_pmin": 2384885},
      {"instant": "2020-04-24T02:05:01", "n_pmin": 2340421},
      {"instant": "2020-04-24T03:05:01", "n_pmin": 2369579},
      {"instant": "2020-04-24T04:05:01", "n_pmin": 2285203},
      {"instant": "2020-04-24T05:05:01", "n_pmin": 2206629},
      {"instant": "2020-04-24T06:05:01", "n_pmin": 2149411},
      {"instant": "2020-04-24T07:05:01", "n_pmin": 2218313},
      {"instant": "2020-04-24T08:05:01", "n_pmin": 2231320},
      {"instant": "2020-04-24T09:05:01", "n_pmin": 2163876},
      {"instant": "2020-04-24T10:05:01", "n_pmin": 2100388},
      {"instant": "2020-04-24T11:05:01", "n_pmin": 2040520},
      {"instant": "2020-04-24T12:05:02", "n_pmin": 2157928},
      {"instant": "2020-04-24T13:05:01", "n_pmin": 2099753},
      {"instant": "2020-04-24T15:05:01", "n_pmin": 2334844},
      {"instant": "2020-04-24T16:05:01", "n_pmin": 2430831},
      {"instant": "2020-04-24T17:05:01", "n_pmin": 2403722},
      {"instant": "2020-04-24T18:05:02", "n_pmin": 2468541},
      {"instant": "2020-05-13T16:05:01", "n_pmin": 2717164},
      {"instant": "2020-05-13T17:05:01", "n_pmin": 2794972},
      {"instant": "2020-05-13T18:05:01", "n_pmin": 2824981},
      {"instant": "2020-05-13T19:05:01", "n_pmin": 2852586},
      {"instant": "2020-05-13T20:05:01", "n_pmin": 2868170}
    ]
  },
  "mark": "circle",
  "encoding": {
    "y": {
      "field": "instant",
      "type": "ordinal",
      "timeUnit": "day",
      "sort": ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]
    },
    "x": {"field": "instant", "type": "ordinal", "timeUnit": "hours"},
    "size": {
      "field": "n_pmin",
      "type": "quantitative",
      "aggregate": "mean",
      "scale": {"domain": [2200000, 3000000], "range": [100, 500]}
    },
    "color": {
      "field": "n_pmin",
      "type": "quantitative",
      "aggregate": "mean",
      "scale": {"domain": [2200000, 3000000], "scheme": "bluegreen"}
    }
  }
}


Automatic non-zero fit for dynamical data

Dynamical data (e.g. new data when refresh web page) is a typical case where we can't use constant domain ranges. In this other chart on VEGA editor both scale.zero (of color and size) are setting to false, resulting in an automatic scale range adjust:

    "size": {
      "field": "n_pmin",
      "type": "quantitative",
      "aggregate": "mean",
      "scale": {"zero": false }
    },
    "color": {
      "field": "n_pmin",
      "type": "quantitative",
      "aggregate": "mean",
      "scale": {"scheme": "bluegreen", "zero": false}
    }


来源:https://stackoverflow.com/questions/61646358/how-to-use-all-circle-sizes-in-a-punchcard

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!