# Simple scatter plot - infinite extents when using transform **URL:** \ **Category:** Kibana\ **Tags:** vega\ **Created:** [May 5, 2022, 12:06am UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981 "2022-05-05T00:06:05Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![qd-danh](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@qd-danh](https://discuss.elastic.co/u/qd-danh)\ **Post date:** [May 5, 2022, 12:06am UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/1 "2022-05-05T00:06:05Z")
New to Kibana + Vega and going through lots of tutorials, landed on [this video](https://www.youtube.com/watch?v=4xAO01xCBpQ&ab_channel=TimRoes) to try to make a simple scatter plot. Using the sample eCommerce data. I am so close, but seemingly something slightly wrong. Comparing what I have to [the docs](https://vega.github.io/vega-lite/docs/calculate.html) and not seeing what I'm doing wrong. I have been adjusting what I see in the video to what seems like recent versions of vega / kibana based on docs and other examples. My understanding - after the transform, I should have a calculated field called **time** , and trying to use that in the encoding section throws error ```auto { calculate: "toDate(datum.order_date)" as: "time" } ``` . . . ```auto encoding: { x: { field: time type: temporal axis: { title: false } } y: { field: total_quantity type: quantitative axis: { title: "Order Quantity" } } } ``` **Infinite extent for field "time": [Infinity, -Infinity]** I have tried things like \_source.time, datum.time, ... I'm just not getting why the "time" property is not present (also looked through the debugging techniques in the "inspect" panel and the F12 browser dev tools and not seeing the calculated **time** property. here is [my full spec file](https://gist.githubusercontent.com/volleynerd/da135dc80c1cc6384b94cb058f655960/raw/e02543ff42e64f4b160a20123a14f14e88b56e25/vega-simple-scatterplot.hjson) Thank you in advance for any help! ---
**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\ **Post date:** [May 5, 2022, 3:32pm UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/2 "2022-05-05T15:32:58Z")
I see several errors: - The `format` key needs to go one level out of the `url` key. - The full `values` key is the response to the query and needs to be removed. - The `calculate` needs to refer to the `datum._source['order_date']` This reduced spec works: ```auto { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "mark": "point", "data": { "url": { "%context%": true, "%timefield%": "order_date", "index": "kibana_sample_data_ecommerce", "body": {"size": 10, "_source": ["order_date", "total_quantity"]}, }, "format": {"property": "hits.hits"} }, "transform": [ {"calculate": "toDate(datum._source['order_date'])", "as": "time"} ], "encoding": { "x": {"field": "time", "type": "temporal", "axis": {"title": false}}, "y": { "field": "_source.total_quantity", "type": "quantitative", "axis": {"title": "Order Quantity"} } } } ``` I took a look to compare to the scatter plot visualization from the logs sample dataset bundle ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/b/3b3df3642dd296e61b27fa8581a46cc24372df78.jpeg) ---
**Author:** ![qd-danh](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@qd-danh](https://discuss.elastic.co/u/qd-danh)\ **Post date:** [May 5, 2022, 6:45pm UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/3 "2022-05-05T18:45:25Z")
Big thank you Jorge for the fixes! Had a feeling they were small issues in formatting or understanding. Some follow up thoughts, perhaps to help others that come across this thread in the future: **Where is that scatter plot sample** that you screenshot? I have the web logs sample data imported into my elastic / kibana instance, and see a few other sample visualizations (screenshot below), but not that scatter plot. ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/8/98ef12f79a1304be69acf4d53772d0f8612b5991.png) After seeing **calculate** working with your code, I was playing around with alternatives to the syntax that I've seen around the web. Looks like both `toDate(datum._source.order_date)` works as well as the array/indexer syntax you provide ( `toDate(datum._source['order_date'])` ) . Any difference? The **values** key in the spec I provided. My understanding was to post the full spec, which includes data values instead of the query to Elastic. This way others can "run" the spec as is in something like the Vega editor. If asking for help about data that others wouldn't have or be able to repo, it's a stand-alone way to run the visualization. Totally understand that the values key is not used / wanted in the spec as written in the vega/kibana visualization spec. FYI - saw [the steps here suggesting to post the full spec](https://www.elastic.co/guide/en/kibana/current/vega.html#asking-for-help-with-a-vega-spec). Huge thanks again for getting me over the hurdles. ---
**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\ **Post date:** [May 6, 2022, 1:25pm UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/4 "2022-05-06T13:25:19Z")
> [@qd-danh](#): > > **Where is that scatter plot sample** that you screenshot? I have the web logs sample data imported into my elastic / kibana instance, and see a few other sample visualizations (screenshot below), but not that scatter plot. To be honest no idea when I added the sample data on my testing cluster, but as you, I've just re-added it in my `8.2.0` instance and that chart is gone in the new Logs dashboard. Anyways, sharing it here for future reference. ```auto { $schema: "https://vega.github.io/schema/vega-lite/v4.json" // Use points for drawing to actually create a scatterplot mark: point // Specify where to load data from data: { // By using an object to the url parameter we will // construct an Elasticsearch query url: { // Context == true means filters of the dashboard will be taken into account %context%: true // Specify on which field the time picker should operate %timefield%: timestamp // Specify the index pattern to load data from index: kibana_sample_data_logs // This body will be send to Elasticsearch's _search endpoint // You can use everything the ES Query DSL supports here body: { // Set the size to load 10000 documents size: 10000, // Just ask for the fields we actually need for visualization _source: ["timestamp", "bytes", "extension"] } } // Tell Vega, that the array of data will be inside hits.hits of the response // since the result returned from Elasticsearch fill have a format like: // { // hits: { // total: 42000, // max_score: 2, // hits: [ // < our individual documents > // ] // } // } format: { property: "hits.hits" } } // You can do transformation and calculation of the data before drawing it transform: [ // Since timestamp is a string value, we need to convert it to a unix timestamp // so that Vega can work on it properly. { // Convert _source.timestamp field to a date calculate: "toDate(datum._source['timestamp'])" // Store the result in a field named "time" in the object as: "time" } ] // Specify what data will be drawn on which axis encoding: { x: { // Draw the time field on the x-axis in temporal mode (i.e. as a time axis) field: time type: temporal // Hide the axis label for the x-axis axis: { title: false } } y: { // Draw the bytes of each document on the y-axis field: _source.bytes // Mark the y-axis as quantitative type: quantitative // Specify the label for this axis axis: { title: "Transferred bytes" } } color: { // Make the color of each point depend on the _source.extension field field: _source.extension // Treat different values as completely unrelated values to each other. // You could switch this to quantitative if you have a numeric field and // want to create a color scale from one color to another depending on that // field's value. type: nominal // Rename the legend title so it won't just state: "_source.extension" legend: { title: 'File type' } } shape: { // Also make the shape of each point dependent on the extension. field: _source.extension type: nominal } } } ``` > [@qd-danh](#): > > After seeing **calculate** working with your code, I was playing around with alternatives to the syntax that I've seen around the web. Looks like both `toDate(datum._source.order_date)` works as well as the array/indexer syntax you provide ( `toDate(datum._source['order_date'])` ) . Any difference? No difference, for properties that are valid [identifiers](https://developer.mozilla.org/en-US/docs/Glossary/Identifier) it's fine to use the dot notation. More details [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors). ---
**Author:** ![qd-danh](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@qd-danh](https://discuss.elastic.co/u/qd-danh)\ **Post date:** [May 6, 2022, 10:59pm UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/5 "2022-05-06T22:59:16Z")
Thanks for posting the spec for that logs visual. Filed it away for safekeeping. Thanks again for the help in general. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [June 3, 2022, 10:59pm UTC](https://discuss.elastic.co/t/simple-scatter-plot-infinite-extents-when-using-transform/303981/6 "2022-06-03T22:59:51Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.