Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[skip-ci] Update vector styling docs for 7.6 UI changes and new features #55087

Merged
merged 5 commits into from
Jan 17, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/maps/images/extended_stats_config.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/maps/images/gear_icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/maps/images/gs_link_icon.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/maps/images/vector_style_class.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/maps/images/vector_style_dynamic.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/maps/images/vector_style_static.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 50 additions & 11 deletions docs/maps/vector-style.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 symbolization is consistent as you pan, zoom, and filter your map, quantitative data driven styling uses {ref}/search-aggregations-metrics-extendedstats-aggregation.html[extended_stats aggregation] to retrieve statistical metadata.
nreese marked this conversation as resolved.
Show resolved Hide resolved

Click image:maps/images/gear_icon.png[] to configure extended_stats. Set *Sigma* to a smaller value to minimize outliers by moving the symbolization range minimum and maximum closer to the averge. Clear the *Calculate range from indices* checkbox to turn off the extended_stats aggregation request.
nreese marked this conversation as resolved.
Show resolved Hide resolved

NOTE: When *Calculate range from indices* checkbox is cleared, symbolization may be inconsistent as users pan, zoom, and filter the map. Without extended_stats, the symbolization range is calulated from local layer data. The symbolization range is re-calulcated when layer data changes.
nreese marked this conversation as resolved.
Show resolved Hide resolved

[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 symbolization range minimum and maximum are the same and there is no range:
nreese marked this conversation as resolved.
Show resolved Hide resolved

* *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 like strings and ip addresses by category.
nreese marked this conversation as resolved.
Show resolved Hide resolved

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 {ref}/search-aggregations-bucket-terms-aggregation.html[terms aggregation] to retrieve the top nine categories for the property. Feature values within the top categories set are assigned a unique color. Feature values outside of the top categories set are grouped into the *Other* category. A feature is assigned the *Other* category when the property value is undefined.
nreese marked this conversation as resolved.
Show resolved Hide resolved

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]
Expand Down