Data URL with a signal

588 views
Skip to first unread message

jay0...@gmail.com

unread,
Feb 5, 2018, 4:07:02 AM2/5/18
to vega-js
I have a case in which I want the data to be loaded from a URL that is to be fed from a signal.
url param doesn't seem to like signals. Below is a modified version of Country Unemployment from examples version on which I tried.
How can I achieve this.

{
 "width": 960,
 "height": 500,
 "autosize": "none",

  "data": [
   {
     "name": "unemp",
     "url": "data/unemployment.tsv",
     "format": {"type": "tsv", "parse": "auto"}
   },
   {
     "name": "counties",
     "url": {"signal": "dataURL"},
     "format": {"type": "topojson", "feature": "counties"},
     "transform": [
       { "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] },
       { "type": "filter", "expr": "datum.rate != null" }
     ]
   }
 ],

  "signals": [
   {
     "name": "dataURL",
     "value": "data/us-10m.json"
   }
 ],

  "projections": [
   {
     "name": "projection",
     "type": "albersUsa"
   }
 ],

  "scales": [
   {
     "name": "color",
     "type": "quantize",
     "domain": [0, 0.15],
     "range": {"scheme": "blues-9"}
   }
 ],

  "legends": [
   {
     "fill": "color",
     "orient": "bottom-right",
     "title": "Unemployment",
     "format": "0.1%",
     "encode": {
       "symbols": {
         "update": {
           "shape": {"value": "square"},
           "stroke": {"value": "#ccc"},
           "strokeWidth": {"value": 0.2}
         }
       }
     }
   }
 ],

  "marks": [
   {
     "type": "shape",
     "from": {"data": "counties"},
     "encode": {
       "enter": { "tooltip": {"signal": "format(datum.rate, '0.1%')"}},
       "update": { "fill": {"scale": "color", "field": "rate"} },
       "hover": { "fill": {"value": "red"} }
     },
     "transform": [
       { "type": "geoshape", "projection": "projection" }
     ]
   }
 ]
}





Roy I

unread,
Feb 5, 2018, 11:04:32 AM2/5/18
to vega-js
Vega (v3.0.10) data url only accepts string value:

If your intent is to replace dynamically the data in the dataset, then take a look at Vega 3 datalib and View API:

jay0...@gmail.com

unread,
Feb 6, 2018, 12:53:55 AM2/6/18
to vega-js
I am aware of change, update & insert methods. 

My case is to use the spec across multiple applications. 
Since they are structured different , the URL's tend to change,
I need a signal to control it dynamically by giving the freedom to the app to set this URL.

Any other ways to achieve the same?

Bryony Miles

unread,
Feb 6, 2018, 5:42:50 AM2/6/18
to vega-js
Hello - I am working on a similar problem.

I want the chart to transform on a different field depending on a signal value.  

I tried to get round this by creating two different data elements but I can't work out how I can get the next step 

{
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table_sorted",
          "groupby": "image"
        }
      } 

to change depending on the signal value.   I've tried this:

{"expr": "publisher.value == 'all' ? 'table_sorted_all' : 'table_sorted'"} 

but to no avail.  I thought if this  is solvable it might be a solution for you too jay?

Roy I

unread,
Feb 6, 2018, 1:00:11 PM2/6/18
to vega-js
jay0: Another option is to use javascript to replace (interpolate) the url string in Vega spec template, and have Vega re-parse the modified spec and render a new plot. 

You can submit feature requests for Vega at:

-----------
Bryony: There is a solution. Please ask the question again in a separate post.




On Monday, February 5, 2018 at 4:07:02 AM UTC-5, jay0...@gmail.com wrote:

Yuri Astrakhan

unread,
Feb 13, 2018, 12:12:40 AM2/13/18
to vega-js
I think this could be relatively easy to implement with #893 -- allow observable datasources. Override the default data loader to handle magical "signal://myurl" url protocol. Loader would subscribe to "myurl" signal change, and on the new value, it will load the data and notify vega via the observable object.

Vega modification would be relatively simple: if data loader returns an observable instead of a thenable object, delete all existing values and push the new dataset through the pipes (see #893).  I don't think it would be as easy to implement it without #893 because data loader does not know the ID (name) of the dataset that it needs to inject.



On Monday, February 5, 2018 at 4:07:02 AM UTC-5, jay0...@gmail.com wrote:

Roy I

unread,
Jul 18, 2018, 8:26:12 AM7/18/18
to vega-js
New version of Vega (v4.2.0) supports "dynamic data loading: data url and format now accept signal values."





On Monday, February 5, 2018 at 4:07:02 AM UTC-5, jay0...@gmail.com wrote:
Reply all
Reply to author
Forward
0 new messages