# Data section in vega visualization - from example to working with elastic

**URL:** <https://discuss.elastic.co/t/data-section-in-vega-visualization-from-example-to-working-with-elastic/166870>\
**Category:** Kibana\
**Created:** [February 3, 2019, 3:57pm UTC](https://discuss.elastic.co/t/data-section-in-vega-visualization-from-example-to-working-with-elastic/166870 "2019-02-03T15:57:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shiranbi07](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/shiranbi07/32/32396_2.png) [@shiranbi07](https://discuss.elastic.co/u/shiranbi07)\
**Post date:** [February 3, 2019, 3:57pm UTC](https://discuss.elastic.co/t/data-section-in-vega-visualization-from-example-to-working-with-elastic/166870/1 "2019-02-03T15:57:34Z")

</div>

I copied the heatmap example from vega (not vega lite) to kibana vega visualization. So far so good (after updating the url to full path)  
I downloaded the data csv and loaded it as an index.  
Now I want to be able to update the example so it will read all of the values without aggregation.

I tried the following:  
"data": [  
{  
"name": "temperature",  
url: {  
index: temps  
"%context%": true,  
body: {  
// Set the size to load 10000 documents  
size: 10000,  
// Just ask for the fields we actually need for visualization  
\_source: ["date", "temp"]  
}  
},  
format: {property: "hits.hits"}  
"transform": [  
{"type": "formula", "as": "hour", "expr": "hours(datum.date)"},  
{ "type": "formula", "as": "day",  
"expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"}  
]  
}  
],

where url and format are my changes (my index name is "temps").  
I don't think it reads the data properly  
The error that i get is:

- Failed to execute 'addColorStop' on 'CanvasGradient': The provided float value is non-finite.
- Failed to execute 'addColorStop' on 'CanvasGradient': The provided float value is non-finite.

What do need to update for it to work?  
What do i need to read to properly understand how this works?  
thanks

---

<div class="post-metadata">

**Author:** ![shiranbi07](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/shiranbi07/32/32396_2.png) [@shiranbi07](https://discuss.elastic.co/u/shiranbi07)\
**Post date:** [February 14, 2019, 4:41pm UTC](https://discuss.elastic.co/t/data-section-in-vega-visualization-from-example-to-working-with-elastic/166870/2 "2019-02-14T16:41:10Z")

</div>

I figured it out,  
here is the answer in case anyone else needs this

{  
"$schema": "[https://vega.github.io/schema/vega/v3.3.0.json](https://vega.github.io/schema/vega/v3.3.0.json)",  
"title": "Event counts from all indexes",  
"data": {  
"name": "temperature"  
"url": {  
"%context%": true,  
"index": "temps", // name of index that i gave the data during import  
"body": {"\_source": ["date", "temp"], "size": 10000}  
},  
"format": {"property": "hits.hits"}  
"transform": [  
{"type": "formula", "as": "hour", "expr": "hours(datum.\_source.date)"},  
{ "type": "formula", "as": "day",  
"expr": "datetime(year(datum.\_source.date), month(datum.\_source.date), date(datum.\_source.date))"}  
]  
},

"signals": [  
{  
"name": "palette", "value": "Viridis",  
"bind": {  
"input": "select",  
"options": [  
"Viridis",  
"Magma",  
"Inferno",  
"Plasma",  
"Blues",  
"Greens",  
"Greys",  
"Purples",  
"Reds",  
"Oranges",  
"BlueOrange",  
"BrownBlueGreen",  
"PurpleGreen",  
"PinkYellowGreen",  
"PurpleOrange",  
"RedBlue",  
"RedGrey",  
"RedYellowBlue",  
"RedYellowGreen",  
"BlueGreen",  
"BluePurple",  
"GreenBlue",  
"OrangeRed",  
"PurpleBlueGreen",  
"PurpleBlue",  
"PurpleRed",  
"RedPurple",  
"YellowGreenBlue",  
"YellowGreen",  
"YellowOrangeBrown",  
"YellowOrangeRed"  
]  
}  
},  
{  
"name": "reverse", "value": false, "bind": {"input": "checkbox"}  
}  
],

"scales": [  
{  
"name": "x",  
"type": "time",  
"domain": {"data": "temperature", "field": "day"},  
"range": "width"  
},  
{  
"name": "y",  
"type": "band",  
"domain": [  
6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,  
0, 1, 2, 3, 4, 5  
],  
"range": "height"  
},  
{  
"name": "color",  
"type": "sequential",  
"range": {"scheme": {"signal": "palette"}},  
"domain": {"data": "temperature", "field": "\_source.temp"},  
"reverse": {"signal": "reverse"},  
"zero": false, "nice": true  
}  
],

"axes": [  
{"orient": "bottom", "scale": "x", "domain": false, "title": "Month", "format": "%b"},  
{  
"orient": "left", "scale": "y", "domain": false, "title": "Hour",  
"encode": {  
"labels": {  
"update": {  
"text": {"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value \< 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"}  
}  
}  
}  
}  
],

"legends": [  
{  
"fill": "color",  
"type": "gradient",  
"title": "Avg. Temp (°F)",  
"titleFontSize": 12,  
"titlePadding": 4,  
"gradientLength": {"signal": "height - 16"}  
}  
],

"marks": [  
{  
"type": "rect",  
"from": {"data": "temperature"},  
"encode": {  
"enter": {  
"x": {"scale": "x", "field": "day"},  
"y": {"scale": "y", "field": "hour"},  
"width": {"value": 5},  
"height": {"scale": "y", "band": 1},  
"tooltip": {"signal": "timeFormat(datum.date, '%b %d %I:00 %p') + ': ' + datum.\_source.temp + '°'"}  
},  
"update": {  
"fill": {"scale": "color", "field": "\_source.temp"}  
}  
}  
}  
]  
}

---

<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:** [March 14, 2019, 4:41pm UTC](https://discuss.elastic.co/t/data-section-in-vega-visualization-from-example-to-working-with-elastic/166870/3 "2019-03-14T16:41:12Z")

</div>

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