[skip-ci] Update vector styling docs for 7.6 UI changes and new featu…

…res (elastic#55087) (elastic#55205) * Quantitative data driven styling * quantitative styling * clean up * clean up * review feedback
cjcenizal · Jan 17, 2020 · fa2ca4b · fa2ca4b
1 parent 6808e0f
commit fa2ca4b
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 11 deletions.
diff --git a/docs/maps/images/extended_stats_config.png b/docs/maps/images/extended_stats_config.png
diff --git a/docs/maps/images/gear_icon.png b/docs/maps/images/gear_icon.png
diff --git a/docs/maps/images/gs_link_icon.png b/docs/maps/images/gs_link_icon.png
diff --git a/docs/maps/images/quantitative_data_driven_styling.png b/docs/maps/images/quantitative_data_driven_styling.png
diff --git a/docs/maps/images/vector_style_class.png b/docs/maps/images/vector_style_class.png
diff --git a/docs/maps/images/vector_style_dynamic.png b/docs/maps/images/vector_style_dynamic.png
diff --git a/docs/maps/images/vector_style_static.png b/docs/maps/images/vector_style_static.png
diff --git a/docs/maps/vector-style.asciidoc b/docs/maps/vector-style.asciidoc
@@ -5,6 +5,7 @@
 When styling a vector layer, you can customize your data by property, such as size and color.
 For each property, you can specify whether to use a constant or data driven value for the style.
 
+
 [float]
 [[maps-vector-style-static]]
 ==== Static styling
@@ -17,36 +18,74 @@ The *kibana_sample_data_logs* layer uses static styling for all properties.
 [role="screenshot"]
 image::maps/images/vector_style_static.png[]
 
+
 [float]
 [[maps-vector-style-data-driven]]
 ==== Data driven styling
 
-Use data driven styling to symbolize features from a range of numeric property values.
-To enable data driven styling, click image:maps/images/gs_link_icon.png[] next to the property.
-This button is only available when vector features contain numeric properties.
+Use data driven styling to symbolize features by property values.
+To enable data driven styling for a style property, change the selected value from *Fixed* or *Solid* to *By value*.
+
+The image below shows an example of data driven styling using the <<add-sample-data, Kibana sample web logs>> data set.
+The *kibana_sample_data_logs* layer uses data driven styling for fill color and symbol size style properties.
+
+* The `hour_of_day` property determines the fill color for each feature based on where the value fits on a linear scale.
+Light green circles symbolize documents that occur earlier in the day, and dark green circles symbolize documents that occur later in the day.
+
+* The `bytes` property determines the size of each symbol based on where the value fits on a linear scale.
+Smaller circles symbolize documents with smaller payloads, and larger circles symbolize documents with larger payloads.
+
+[role="screenshot"]
+image::maps/images/vector_style_dynamic.png[]
+
+
+[float]
+[[maps-vector-style-quantitative-data-driven]]
+==== Quantitative data driven styling
+
+Quantitative data driven styling symbolizes features from a range of numeric property values.
+
+To ensure symbols are consistent as you pan, zoom, and filter the map, quantitative data driven styling uses {ref}/search-aggregations-metrics-extendedstats-aggregation.html[extended_stats aggregation] to retrieve statistical metadata.
+
+Click the gear icon image:maps/images/gear_icon.png[] to configure extended_stats. Set *Sigma* to a smaller value to minimize outliers by moving the range minimum and maximum closer to the average. Clear the *Calculate range from indices* checkbox to turn off the extended_stats aggregation request.
+
+NOTE: When the *Calculate range from indices* checkbox is cleared, symbols might be inconsistent as users pan, zoom, and filter the map. Without extended_stats, the range is calulated with data from the local layer. The range is recalulcated when layer data changes.
+
+[role="screenshot"]
+image::maps/images/extended_stats_config.png[]
 
 When the property value is undefined for a feature:
 
 * *Fill color* and *Border color* are set to transparent and are not visible.
 * *Border width* and *Symbol size* are set to the minimum size.
 * *Symbol orientation* is set to 0.
 
-When the minimum and maximum are the same and there is no range:
+When the symbol range minimum and maximum are the same and there is no range:
 
 * *Fill color* and *Border color* are set to last color in the color ramp.
 * *Border width* and *Symbol size* are set to the maximum size.
 
-The image below shows an example of data driven styling using the <<add-sample-data, Kibana sample web logs>> data set.
-The *kibana_sample_data_logs* layer uses data driven styling for fill color and symbol size style properties.
 
-* The `hour_of_day` property determines the fill color for each feature based on where the value fits on a linear scale.
-Light green circles symbolize documents that occur earlier in the day, and dark green circles symbolize documents that occur later in the day.
+[float]
+[[maps-vector-style-qualitative-data-driven]]
+==== Qualitative data driven styling
 
-* The `bytes` property determines the size of each symbol based on where the value fits on a linear scale.
-Smaller circles symbolize documents with smaller payloads, and larger circles symbolize documents with larger payloads.
+Qualitative data driven styling symbolizes non-numeric properties, such as strings and IP addresses, by category.
+
+Qualitative data driven styling is available for the following styling properties:
+
+* *Fill color*
+* *Border color*
+* *Label color*
+* *Label border color*
+
+Qualitative data driven styling uses a {ref}/search-aggregations-bucket-terms-aggregation.html[terms aggregation] to retrieve the top nine categories for the property. Feature values within the top categories are assigned a unique color. Feature values outside of the top categories are grouped into the *Other* category. A feature is assigned the *Other* category when the property value is undefined.
+
+The image below shows an example of quantitative data driven styling using the <<add-sample-data, Kibana sample web logs>> data set.
+The `machine.os.keyword` property determines the color of each symbol based on category.
 
 [role="screenshot"]
-image::maps/images/vector_style_dynamic.png[]
+image::maps/images/quantitative_data_driven_styling.png[]
 
 
 [float]