[[tutorial-visualizing]]
=== Visualize your data

In *Visualize*, you can shape your data using a variety
of charts, tables, and maps, and more. In this tutorial, you'll create four
visualizations:

* <<tutorial-visualize-pie, Pie chart>>
* <<tutorial-visualize-bar, Bar chart>>
* <<tutorial-visualize-map, Map>>
* <<tutorial-visualize-markdown, Markdown widget>>

[float]
[[tutorial-visualize-pie]]
=== Pie chart

Use the pie chart to
gain insight into the account balances in the bank account data.

. Open then menu, then go to *Visualize*.
. Click *Create visualization*.
+
[role="screenshot"]
image::images/tutorial-visualize-wizard-step-1.png[]
. Click *Pie*.

. On the *Choose a source* window, select `ba*`.
+
Initially, the pie contains a single "slice."
That's because the default search matches all documents.
+
To specify which slices to display in the pie, you use an Elasticsearch
{ref}/search-aggregations.html[bucket aggregation]. This aggregation
sorts the documents that match your search criteria into different
categories. You'll use a bucket aggregation to establish
multiple ranges of account balances and find out how many accounts fall into
each range.

. In the *Buckets* pane, click *Add > Split slices.*
+
.. From the *Aggregation* dropdown, select *Range*.
.. From the *Field* dropdown, select *balance*.
.. Click *Add range* four times to bring the total number of ranges to six.
.. Define the following ranges:
+
[source,text]
0             999
1000         2999
3000         6999
7000        14999
15000       30999
31000       50000

. Click *Update*.
+
Now you can see what proportion of the 1000 accounts fall into each balance
range.
+
[role="screenshot"]
image::images/tutorial-visualize-pie-2.png[]

. Add another bucket aggregation that looks at the ages of the account
holders.

.. In the *Buckets* pane, click *Add*, then click *Split slices*.
.. From the *Sub aggregation* dropdown, select *Terms*.
.. From the *Field* dropdown, select *age*.

. Click  *Update*.
+
The break down of the ages of the account holders are displayed
in a ring around the balance ranges.
+
[role="screenshot"]
image::images/tutorial-visualize-pie-3.png[]

. Click *Save*, then enter `Pie Example` in the *Title* field.

[float]
[[tutorial-visualize-bar]]
=== Bar chart

Use a bar chart to look at the Shakespeare data set and compare
the number of speaking parts in the plays.

. Click *Create visualization > Vertical Bar*, then set the source to `shakes*`.
+
Initially, the chart is a single bar that shows the total count
of documents that match the default wildcard query.

. Show the number of speaking parts per play along the y-axis.

.. In the *Metrics* pane, expand *Y-axis*.
.. From the *Aggregation* dropdown, select *Unique Count*.
.. From the *Field* dropdown, select *speaker*.
.. In the *Custom label* field, enter `Speaking Parts`.

. Click *Update*.

. Show the plays along the x-axis.

.. In the *Buckets* pane, click *Add > X-axis*.
.. From the *Aggregation* dropdown, select *Terms*.
.. From the *Field* dropdown, select *play_name*.
.. To list the plays alphabetically, select *Ascending* from the *Order* dropdown.
.. In the *Custom label* field, enter `Play Name`.

. Click *Update*.
+
[role="screenshot"]
image::images/tutorial-visualize-bar-1.5.png[]
. *Save* the chart with the name `Bar Example`.
+
Hovering over a bar shows a tooltip with the number of speaking parts for
that play.
+
Notice how the individual play names show up as whole phrases, instead of
broken into individual words. This is the result of the mapping
you did at the beginning of the tutorial, when you marked the `play_name` field
as `not analyzed`.

[float]
[[tutorial-visualize-markdown]]
=== Markdown

Add formatted text to your dashboard with a markdown tool.

. Click *Create visualization > Markdown*.
. In the text field, enter the following:
+
[source,markdown]
# This is a tutorial dashboard!
The Markdown widget uses **markdown** syntax.
> Blockquotes in Markdown use the > character.

. Click *Update*.
+
The Markdown renders in the preview pane.
+
[role="screenshot"]
image::images/tutorial-visualize-md-2.png[]

. *Save* the tool with the name `Markdown Example`.

[float]
[[tutorial-visualize-map]]
=== Map

Using <<maps>>, you can visualize geographic information in the log file sample data.

. Click *Create visualization > Maps*.

. Set the time.
.. In the time filter, click *Show dates*.
.. Click the start date, then *Absolute*.
.. Set the *Start date* to May 18, 2015.
.. Click *now*, then *Absolute*.
.. Set the *End date* to May 20, 2015.
.. Click *Update*

. Map the geo coordinates from the log files.

.. Click *Add layer > Clusters and Grids*.
.. From the *Index pattern* dropdown, select *logstash*.
.. Click *Add layer*.

. Set the *Layer Style*.
.. From the *Fill color* dropdown, select the yellow to red color ramp.
.. From the *Border color* dropdown, select white.
.. Click *Save & close*.
+
The map looks like this:
+
[role="screenshot"]
image::images/tutorial-visualize-map-2.png[]

. Navigate the map by clicking and dragging.  Use the controls
to zoom the map and set filters.
. *Save* the map with the name `Map Example`.