# Vega animated scatter chart json file url vs elasticsearch index url - (2nd attempt) - source code completed

**URL:** <https://discuss.elastic.co/t/vega-animated-scatter-chart-json-file-url-vs-elasticsearch-index-url-2nd-attempt-source-code-completed/171524>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [March 8, 2019, 3:43pm UTC](https://discuss.elastic.co/t/vega-animated-scatter-chart-json-file-url-vs-elasticsearch-index-url-2nd-attempt-source-code-completed/171524 "2019-03-08T15:43:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mgolubov55](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@mgolubov55](https://discuss.elastic.co/u/mgolubov55)\
**Post date:** [March 8, 2019, 3:43pm UTC](https://discuss.elastic.co/t/vega-animated-scatter-chart-json-file-url-vs-elasticsearch-index-url-2nd-attempt-source-code-completed/171524/1 "2019-03-08T15:43:11Z")

</div>

here is the rest of the source code: (still a little truncated at the end)

```
  "name": "trackSettlementcurrencies",
  "on": [
    {"trigger": "active", "toggle": "{settlementcurrency: active.settlementcurrency}"}
  ]
}

```

],

"signals": [  
{ "name": "minMonth", "value": 6 },  
{ "name": "maxMonth", "value": 12 },  
{ "name": "stepMonth", "value": 1 },  
{  
"name": "active",  
"value": {},  
"on": [  
{"events": "@point:mousedown, @point:touchstart", "update": "datum"},  
{"events": "window:mouseup, window:touchend", "update": "{}"}  
]  
},  
{ "name": "isActive", "update": "active.settlementcurrency" },  
{  
"name": "timeline",  
"value": {},  
"on": [  
{"events": "@point:mouseover", "update": "isActive ? active : datum"},  
{"events": "@point:mouseout", "update": "active"},  
{"events": {"signal": "active"}, "update": "active"}  
]  
},  
{  
"name": "tX",  
"on": [{  
"events": "mousemove!, touchmove!",  
"update": "isActive ? scale('x', active.this.price) : tX"  
}]  
},  
{  
"name": "tY",  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? scale('y', active.this.quantity) : tY"  
}]  
},  
{  
"name": "pX",  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? scale('x', active.prev.price) : pX"  
}]  
},  
{  
"name": "pY",  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? scale('y', active.prev.quantity) : pY"  
}]  
},  
{  
"name": "nX",  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? scale('x', active.next.price) : nX"  
}]  
},  
{  
"name": "nY",  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? scale('y', active.next.quantity) : nY"  
}]  
},  
{  
"name": "thisDist",  
"value": 0,  
"on":[{  
"events": "mousemove, touchmove",  
"update": "isActive ? sqrt(pow(x()-tX, 2) + pow(y()-tY, 2)) : thisDist"  
}]  
},  
{  
"name": "prevDist",  
"value": 0,  
"on":[{  
"events": "mousemove, touchmove",  
"update": "isActive ? sqrt(pow(x()-pX, 2) + pow(y()-pY, 2)): prevDist"  
}]  
},  
{  
"name": "nextDist",  
"value": 0,  
"on":[{  
"events": "mousemove, touchmove",  
"update": "isActive ? sqrt(pow(x()-nX, 2) + pow(y()-nY, 2)) : nextDist"  
}]  
},  
{  
"name": "prevScore",  
"value": 0,  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? ((pX-tX) \* (x()-tX) + (pY-tY) \* (y()-tY))/prevDist || -999999 : prevScore"  
}]  
},  
{  
"name": "nextScore",  
"value": 0,  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? ((nX-tX) \* (x()-tX) + (nY-tY) \* (y()-tY))/nextDist || -999999 : nextScore"  
}]  
},  
{  
"name": "interMonth",  
"value": 9,  
"on": [{  
"events": "mousemove, touchmove",  
"update": "isActive ? (min(maxMonth, currentMonth+1, max(minMonth, currentMonth-1, prevScore \> nextScore ? (currentMonth - 0.5_prevScore/sqrt(pow(pX-tX, 2) + pow(pY-tY, 2))) : (currentMonth + 0.5_nextScore/sqrt(pow(nX-tX, 2) + pow(nY-tY, 2)))))) : interMonth"  
}]  
},  
{  
"name": "currentMonth",  
"value": 9,  
"on":[{  
"events": "mousemove, touchmove",  
"update": "isActive ? (min(maxMonth, max(minMonth, prevScore \> nextScore ? (thisDist \< prevDist ? currentMonth : currentMonth-1) : (thisDist \< nextDist ? currentMonth : currentMonth+1)))) : currentMonth"  
}]  
}  
],

"scales": [  
{  
"name": "x",  
"type": "linear", "nice": true,  
"domain": {"data": "fxtrades", "field": "price"},  
"range": "width"  
},  
{  
"name": "y",  
"type": "linear", "nice": true, "zero": false,  
"domain": {"data": "fxtrades", "field": "quantity"},  
"range": "height"  
},  
{  
"name": "color",  
"type": "ordinal",  
"domain": {"data": "fxtrades", "field": "cluster"},  
"range": "category"  
},  
{  
"name": "label",  
"type": "ordinal",  
"domain": {"data": "clusters", "field": "id"},  
"range": {"data": "clusters", "field": "name"}  
}  
],

"axes": [  
{  
"title": "MIN AdjustedSodPrice",  
"orient": "bottom", "scale": "x",  
"grid": true, "tickCount": 20,  
"gridOpacity": 0.6,  
"tickColor": "red"  
},  
{  
"title": "MAX Close Price",  
"orient": "left", "scale": "y",  
"grid": true, "tickCount": 24,  
"gridOpacity": 0.6  
}  
],

"legends": [  
{  
"fill": "color",  
"title": "Country",  
"orient": "right",  
"encode": {  
"symbols": {  
"enter": {  
"fillOpacity": {"value": 1.0}  
}  
},  
"labels": {  
"name": "legendLabel",  
"interactive": true,  
"update": {  
"text": {"scale": "label", "field": "value"}  
}  
}  
}  
}  
],

"marks": [  
{  
"type": "text",  
"encode": {  
"update": {  
"text": {"signal": "'month: ' + currentMonth"},  
"x": {"value": 250},  
"y": {"value": 300},  
"fill": {"value": "red"},  
"fillOpacity": {"value": 0.15},  
"fontSize": {"value": 70}  
}  
}  
},  
{  
"type": "text",  
"from": {"data": "settlementcurrency\_timeline"},  
"interactive": false,  
"encode": {  
"enter": {  
"x": {"scale": "x", "field": "price", "offset": 5},  
"y": {"scale": "y", "field": "quantity"},  
"fill": {"value": "#555"},  
"fillOpacity": {"value": 0.6},  
"text": {"field": "year"}  
}  
}  
},  
{  
"type": "line",  
"from": {"data": "settlementcurrency\_timeline"},  
"encode": {  
"update": {  
"x": {"scale": "x", "field": "price"},  
"y": {"scale": "y", "field": "quantity"},  
"stroke": {"value": "#bbb"},  
"strokeWidth": {"value": 1},  
"strokeOpacity": {"value": 0.75}  
}  
}  
},  
{  
"name": "point",  
"type": "symbol",  
"from": {"data": "interpolate"},  
"encode": {  
"enter": {  
"fill": {"scale": "color", "field": "this.cluster"},  
"size": {"value": 150}  
},  
"update": {  
"x": {"scale": "x", "field": "inter\_price"},  
"y": {"scale": "y", "field": "inter\_quantity"},  
"fillOpacity": [  
{  
"test": "datum.settlementcurrency==timeline.settlementcurrency || indata('trackSettlementcurrencies', 'settlementcurrency', datum.settlementcurrency)",  
"value": 1  
},  
{"value": 0.75}  
]  
}

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [March 8, 2019, 4:05pm UTC](https://discuss.elastic.co/t/vega-animated-scatter-chart-json-file-url-vs-elasticsearch-index-url-2nd-attempt-source-code-completed/171524/2 "2019-03-08T16:05:01Z")

</div>

@nyuriks - can you shed some light on this please ?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 5, 2019, 4:05pm UTC](https://discuss.elastic.co/t/vega-animated-scatter-chart-json-file-url-vs-elasticsearch-index-url-2nd-attempt-source-code-completed/171524/3 "2019-04-05T16:05:04Z")

</div>

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