Infinite extent for field

Elastic Stack Kibana
1

I copy and paste from Population Pyramid Example | Vega to Kibana and I got Infinite extent for field "people": [Infinity, -Infinity]

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A population pyramid showing U.S. demographics from 1850 to 2000.",
  "autosize": "none",
  "height": 400,
  "padding": 5,
  "signals": [
    {"name": "chartWidth", "value": 300},
    {"name": "chartPad", "value": 20},
    {"name": "width", "update": "2 * chartWidth + chartPad"},
    {
      "name": "year",
      "value": 2000,
      "bind": {"input": "range", "min": 1850, "max": 2000, "step": 10}
    }
  ],
  "data": [
    {"name": "population", "url": {"index": "population"}},
    {
      "name": "popYear",
      "source": "population",
      "transform": [{"type": "filter", "expr": "datum.year == year"}]
    },
    {
      "name": "males",
      "source": "popYear",
      "transform": [{"type": "filter", "expr": "datum.sex == 1"}]
    },
    {
      "name": "females",
      "source": "popYear",
      "transform": [{"type": "filter", "expr": "datum.sex == 2"}]
    },
    {
      "name": "ageGroups",
      "source": "population",
      "transform": [{"type": "aggregate", "groupby": ["age"]}]
    }
  ],
  "scales": [
    {
      "name": "y",
      "type": "band",
      "range": [{"signal": "height"}, 0],
      "round": true,
      "domain": {"data": "ageGroups", "field": "age"}
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": [1, 2],
      "range": ["#d5855a", "#6c4e97"]
    }
  ],
  "marks": [
    {
      "type": "text",
      "interactive": false,
      "from": {"data": "ageGroups"},
      "encode": {
        "enter": {
          "x": {"signal": "chartWidth + chartPad / 2"},
          "y": {"scale": "y", "field": "age", "band": 0.5},
          "text": {"field": "age"},
          "baseline": {"value": "middle"},
          "align": {"value": "center"},
          "fill": {"value": "#000"}
        }
      }
    },
    {
      "type": "group",
      "encode": {"update": {"x": {"value": 0}, "height": {"signal": "height"}}},
      "scales": [
        {
          "name": "x",
          "type": "linear",
          "range": [{"signal": "chartWidth"}, 0],
          "nice": true,
          "zero": true,
          "domain": {"data": "population", "field": "people"}
        }
      ],
      "axes": [
        {"orient": "bottom", "scale": "x", "format": "s", "title": "Females"}
      ],
      "marks": [
        {
          "type": "rect",
          "from": {"data": "females"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "people"},
              "x2": {"scale": "x", "value": 0},
              "y": {"scale": "y", "field": "age"},
              "height": {"scale": "y", "band": 1, "offset": -1},
              "fillOpacity": {"value": 0.6},
              "fill": {"scale": "c", "field": "sex"}
            }
          }
        }
      ]
    },
    {
      "type": "group",
      "encode": {
        "update": {
          "x": {"signal": "chartWidth + chartPad"},
          "height": {"signal": "height"}
        }
      },
      "scales": [
        {
          "name": "x",
          "type": "linear",
          "range": [0, {"signal": "chartWidth"}],
          "nice": true,
          "zero": true,
          "domain": {"data": "population", "field": "people"}
        }
      ],
      "axes": [
        {"orient": "bottom", "scale": "x", "format": "s", "title": "Males"}
      ],
      "marks": [
        {
          "type": "rect",
          "from": {"data": "males"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "people"},
              "x2": {"scale": "x", "value": 0},
              "y": {"scale": "y", "field": "age"},
              "height": {"scale": "y", "band": 1, "offset": -1},
              "fillOpacity": {"value": 0.6},
              "fill": {"scale": "c", "field": "sex"}
            }
          }
        }
      ]
    }
  ]
}
2

I created an index using json data before and want to use it on this query.

3

If you do a search on the population index, it will return a full search response, not just an array. You have to pluck the relevant data out of that response before using it. Use the "Inspect" menu and the "vega debug" view in there to see how the data you get from Elasticsearch looks like.

5

Is there an example how to pluck the relevant data?

6

I followed the instruction from Use Vega Visualization with Dynamic Data (Index) - #2 by suhasgupta1 but the data became only one column.

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A population pyramid showing U.S. demographics from 1850 to 2000.",
"height": 400,
"padding": 5,
"signals": [
{"name": "chartWidth", "value": 300},
{"name": "chartPad", "value": 20},
{"name": "width", "update": "2 * chartWidth + chartPad"},
{
"name": "year",
"value": 2000,
"bind": {"input": "range", "min": 1850, "max": 2000, "step": 10}
}
],
"data": [
{
"name": "population",
"url": {
"%context%": true,
"index": "population",
"body": {
"aggs": {
"eqpt_buckets": {
"composite": {
"size": 5000,
"sources": [
{"year": {"terms": {"field": "year"}}},
{"sex": {"terms": {"field": "sex"}}},
{"age": {"terms": {"field": "age"}}},
{"people": {"terms": {"field": "people"}}}
]
}
}
}
}
},
"format": {"property": "aggregations.eqpt_buckets.buckets"}
},
{
"name": "popYear",
"source": "population",
"transform": [{"type": "filter", "expr": "datum.year == year"}]
},
{
"name": "males",
"source": "popYear",
"transform": [{"type": "filter", "expr": "datum.sex == 1"}]
},
{
"name": "females",
"source": "popYear",
"transform": [{"type": "filter", "expr": "datum.sex == 2"}]
},
{
"name": "ageGroups",
"source": "population",
"transform": [{"type": "aggregate", "groupby": ["age"]}]
}
],
"transform": [
{"calculate": "datum.key.year", "as": "year"},
{"calculate": "datum.key.sex", "as": "sex"},
{"calculate": "datum.key.age", "as": "age"},
{"calculate": "datum.key.people", "as": "people"}
],
"scales": [
{
"name": "y",
"type": "band",
"range": [{"signal": "height"}, 0],
"round": true,
"domain": {"data": "ageGroups", "field": "age"}
},
{
"name": "c",
"type": "ordinal",
"domain": [1, 2],
"range": ["#d5855a", "#6c4e97"]
}
],
"marks": [
{
"type": "text",
"interactive": false,
"from": {"data": "ageGroups"},
"encode": {
"enter": {
"x": {"signal": "chartWidth + chartPad / 2"},
"y": {"scale": "y", "field": "age", "band": 0.5},
"text": {"field": "age"},
"baseline": {"value": "middle"},
"align": {"value": "center"},
"fill": {"value": "#000"}
}
}
},
{
"type": "group",
"encode": {"update": {"x": {"value": 0}, "height": {"signal": "height"}}},
"scales": [
{
"name": "x",
"type": "linear",
"range": [{"signal": "chartWidth"}, 0],
"nice": true,
"zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Females"}
],
"marks": [
{
"type": "rect",
"from": {"data": "females"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"x": {"signal": "chartWidth + chartPad"},
"height": {"signal": "height"}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"range": [0, {"signal": "chartWidth"}],
"nice": true,
"zero": true,
"domain": {"data": "population", "field": "people"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "format": "s", "title": "Males"}
],
"marks": [
{
"type": "rect",
"from": {"data": "males"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "people"},
"x2": {"scale": "x", "value": 0},
"y": {"scale": "y", "field": "age"},
"height": {"scale": "y", "band": 1, "offset": -1},
"fillOpacity": {"value": 0.6},
"fill": {"scale": "c", "field": "sex"}
}
}
}
]
}
]
}

image
image902×731 68.9 KB

7

That should be OK, vega can look up values from complex objects - in the places where you are using the field people at the moment, it should work if you change that to key.people (and so on)

8

Is it need to change for all field like age, sex, and year also? Because when I added to every field, it shown an error again.

9

image
image1297×44 2.7 KB

10

Could you share the spec with inlined data by clicking Inspect, changing View to "Vega debug", then switching to "Spec"? This way I can play around with the spec without access to the source data.

11

Emm.. I can't type it here because more than 35.000 characters. Is there any others way?

12

image
image1920×935 91.7 KB

I changed the yellow circle into 'population' (should be ageGroups) and can show the chart but look like doubly for the y-axis number.
Is it possible to change the data into every column (not in one 'key' variable)?

13

You could put the spec into a github gist or something like this

14

Hi, you can check here.

15

Now it can. I used vega-lite format to done it.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A population pyramid for the US in 2000, created using stack. See https://vega.github.io/vega-lite/examples/concat_population_pyramid.html for a variant of this created using concat.",
  "params": [
    {
      "name": "Year",
      "value": 2000,
      "bind": {"input": "range", "min": 1850, "max": 2000, "step": 10}
    }
  ],
  "data": {
    "url": {
      "%context%": true,
      "index": "population",
      "body": {
        "aggs": {
          "eqpt_buckets": {
            "composite": {
              "size": 5000,
              "sources": [
                {"age": {"terms": {"field": "age"}}},
                {"year": {"terms": {"field": "year"}}},
                {"sex": {"terms": {"field": "sex"}}},
                {"people": {"terms": {"field": "people"}}}
              ]
            }
          }
        }
      }
    },
    "format": {"property": "aggregations.eqpt_buckets.buckets"}
  },
  "transform": [
    {"calculate": "datum.key.age", "as": "age"},
    {"calculate": "datum.key.year", "as": "year"},
    {"calculate": "datum.key.sex", "as": "sex"},
    {"calculate": "datum.key.people", "as": "people"},
    {"filter": "datum.year == Year"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "spacing": 0,
  "hconcat": [
    {
      "width": 400,
      "height": "container",
      "transform": [{"filter": {"field": "gender", "equal": "Female"}}],
      "mark": "bar",
      "encoding": {
        "y": {"field": "age", "axis": null, "sort": "descending"},
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "Females",
          "axis": {"format": "s"},
          "sort": "descending"
        },
        "color": {"field": "gender", "scale": {"range": ["#d5855a", "#6c4e97"]}}
      }
    },
    {
      "width": 0,
      "height": "container",
      "view": {"stroke": null},
      "mark": {"type": "text", "align": "center"},
      "encoding": {
        "y": {
          "field": "age",
          "type": "ordinal",
          "axis": null,
          "sort": "descending"
        },
        "text": {"field": "age", "type": "quantitative"}
      }
    },
    {
      "width": 400,
      "height": "container",
      "transform": [{"filter": {"field": "gender", "equal": "Male"}}],
      "mark": "bar",
      "encoding": {
        "y": {"field": "age", "axis": null, "sort": "descending"},
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "Males",
          "axis": {"format": "s"}
        },
        "color": {"field": "gender", "legend": null}
      }
    }
  ]
}
16

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.