Vega Lite Custom Charts

Help
11

I admit it took me a while but I finally figured this out.

Here I’ve configured a custom chart with two time series queries for the temperature in Boston and the temperature in Cincinnati.

43%20AM
Screen Shot 2018-12-01 at 11.56.43 AM.png1248×1070 55.2 KB

Then I set my Vega-Lite spec to the following …

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
      "name": "boston"
  },
  "transform": [{
    "lookup": "time",
    "from": {
      "data": {"name": "cincinnati"},
      "key": "time",
      "fields": ["value"]
    },
    "as": ["cincinnatiTemp"]
  }],
"mark": "point",
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative",
      "scale": { "domain": [30, 60] }
    },
    "y": {
      "field": "cincinnatiTemp",
      "type": "quantitative",
      "scale": { "domain": [30, 60] }
    }
  }
}

Which results in this scatterplot comparing Boston temperature vs. Cincinnati temperature.

47%20AM
Screen Shot 2018-12-01 at 11.56.47 AM.png892×680 36.6 KB

Inline are some comments for parts of the spec above to better explain what’s going on …

{

  "data": {
      "name": "boston" // our primary data source, onto which we will add our other values. either query can be the primary, and we treat the other as the secondary
  },
  "transform": [{
    "lookup": "time", // the key to look up against in the primary data source. for comparing two time series queries in losant, you'll probably never change this. the value of this must match the value of from.key in the secondary data source to successfully match. i.e. if we have an entry for time 1234567890 in the primary source but not the secondary, we won't be able to plot the comparison
    "from": {
      "data": {"name": "cincinnati"}, // referencing our secondary data source, which is the second time series query we configured
      "key": "time", // the key to look up against in the primary data source. for comparing two time series queries in losant, you'll probably never change this
      "fields": ["value"] // we include this because we only want this property and not the whole object
    },
    "as": ["cincinnatiTemp"]  // matched by index against from.fields above, this is what we want to call the property we're appending to our primary data source
  }],
"mark": "point",
  "encoding": {
    "x": {
      "field": "value", // this is the name of the property on the primary data source, which we did not transform
      "type": "quantitative",
      "scale": { "domain": [30, 60] }  // not necessary, but included to make the graph prettier
    },
    "y": {
      "field": "cincinnatiTemp", // this is the name of the property to which we mapped our secondary data above
      "type": "quantitative",
      "scale": { "domain": [30, 60] } // not necessary, but included to make the graph prettier
    }
  }
}
1 Like