Part 10: Visualize data using Kibana Lens
Published: 2022-09-07 15:15:21

[Table of Content](https://dev.to/lisahjung/beginners-guide-to-building-a-full-stack-app-nodejs-react-with-elasticsearch-5347) 

In this blog series, we have created a full stack app (Node.js and React)that enables users to search for earthquake data stored in Elasticsearch.

Searching for data is one way to learn about our dataset.

But we can learn so much more when we can visualize our data. 

To wrap up this series, we will learn how to use Kibana Lens to analyze and visualize earthquake data stored in Elasticsearch!

###Resources
*Would you rather watch a video to learn this content? Click on the link below!*

- [Episode 10: Visualize data with Kibana Lens](https://www.youtube.com/watch?v=siz0yqNXlBI)

###What are we creating today?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uyli08yl9u05tsruwgx.png)

We will create a Kibana dashboard that contains panels of various data visualizations. 

**Table**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuo46gkdr1gnhyx0fazb.png)
  
In the upper left corner(red box), we have a table that lists 10 locations with the highest frequency of earthquakes.

**Heat Map**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpdy8na4c4t3koj592ia.png)
 
To the right(orange box), we have an earthquake heat map. This allows you to view the world map and visualize the location and the frequency of earthquakes by color. 

**Metrics**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agifappoa7qd0qfita5f.png)
  
In the row below(yellow box), we have high level metrics about our earthquake data.

It shows you the number of earthquakes in our dataset, the maximum magnitude, and the average depth of earthquakes in our data.

**Histogram**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls0s8c0n9luahjqehnph.png)
  
In the next row, we have the earthquake magnitude histogram(green box). This graph displays different levels magnitude that exist in our dataset and how many earthquakes have exhibited this magnitude.  

**Donut Chart**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrzeuyvrr94oszqqnvr5.png)
  
To the right, we have a donut chart(blue box) that shows the types and percentage of quakes present in our dataset.

###Creating the Dashboard
Let’s go over how we can create this dashboard with Kibana.

#### Step 1: Open the Kibana home page 
*From the home page, click on the menu icon(red box). From the drop down menu, click on the `Dashboard` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5p1wl7fq2a5quebxs3l.png)
 
#### Step 2: Create a dashboard
[Kibana dashboard](https://www.elastic.co/kibana/kibana-dashboard) lets you easily create views that pull together charts, maps, and filters to display the full picture of your Elasticsearch data(excerpt from Kibana Dashboard page).

*Click on the `Create a dashboard` option(pink box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arny4cs3ilw71bpvpd9r.png)

It will take you to the dashboard where you can add and edit visualizations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpgwb4t93dmxbjea9lxr.png)
 
#### Step 3: Create a table
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejl0wldwvefpvmykiyl0.png)
 
The first visualization we will create is a table that lists 10 locations with the highest frequency of earthquakes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sflgxefdxvwpgdedjqu.png)

*From the dashboard page, click on the `Select type` option(blue box).*

It will display a drop down menu with various visualization tools.
  
*From the drop down menu, choose the `Lens` option(red box).*

[Kibana Lens](https://www.elastic.co/kibana/kibana-lens) is an intuitive UI that helps you create data visualization with ease!

Whenever possible, start with `Lens` as you can create majority of the visualizations with this tool. 

*First thing we must do is to select the correct data source and the time range in which we want to visualize the data. All of the panels in the dashboard will reflect earthquake data that falls within the chosen time range.*

**Data Source**
You will see that the dashboard has already chosen the `earthquakes` data view(red box) we have created in [part 7](https://dev.to/lisahjung/part-7-set-up-the-nodejs-server-to-retrieve-api-data-and-send-the-data-to-elasticsearch-50fm).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3x5mazwe0cytnvkj8hp.png)

If you have multiple data views, make sure the correct data source is selected. 

**Time Range**
*Click on the calendar icon(red box) to display the drop down menu.*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1bduslzrwj5s0iz7nw6.png)
 
In [part 7](https://dev.to/lisahjung/part-7-set-up-the-nodejs-server-to-retrieve-api-data-and-send-the-data-to-elasticsearch-50fm), we have retrieved USGS earthquake data from the past 30 days.  

*Select  the `Last 30 days` option(green box).*

**Table**
*Click on the downward arrow(red box) to display the menu of visualization type. Select the `Table` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j83heslk4cqaecyt409b.png)

We are creating a table that lists 10 locations with the highest frequency of earthquakes. Since location data is stored in the field `place`, drag and drop the field `place.keyword` (red box) into the editor(blue box).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54ts6qtewhhe3y49xy2e.png)

It will automatically create a table for you with two columns(red and blue boxes). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0c09rug47orcuezn02e.png)

The column `Top 5 values of place.keyword`(red box) lists 5 locations with the highest document(i.e. earthquake) counts. 

The column `Count of Records`(blue box) lists the number of documents(i.e. earthquakes) that have occurred in that particular location.  

Let's look at the table that we want to create. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejl0wldwvefpvmykiyl0.png)

Our final table contains two columns called `Location by frequency` and `# of earthquakes`. 

It lists 10 locations with the highest frequency of earthquakes in descending order. 

We will change our current table to mirror the final table.

**Column: Top 5 values of place.keyword**
From the table page, click on the `Top 5 values of place.keyword` option(blue box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubwkmeomtl65a0q6eheo.png)

It will display a pop up menu where you can customize the rows of the table. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t5nwutsgdc7bahya9t4.png)

*Red box*
You will see that the rows reflect data from the field `place.keyword`. 

*Orange box*
The number of values displayed is set to 5. 

*Change this value to 10 to display 10 locations with the highest frequency of earthquakes.* 

*Yellow and green boxes*
The rows are ranked by count of records in descending order. 

*Blue box*
The `Name` is set to `Top 5 values of place.keyword`.  
*Change this value to `Location by frequency`.*

The changes you make will be auto saved. You will also see that the table is auto updated as well.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz6ghpdm1wmlkrwtdlom.png)

Next, we will update the column `Count of records`. 

*Click on the `close` option(red box).* 

**Column: Count of records** 
*Click on the `Count of records` option(red box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ujowdb8o3wxgpvcb7u7.png)

From the pop up menu, change the `Name` to `# of earthquakes`(red box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr8accwumapeekl1ufmb.png)

As you make these changes, you will see that the changes are auto saved and the table is auto updated(blue box).

*Click on the `Save and Return` button(purple box) in the upper right corner.* 

You will see that the table has been added to the dashboard. 

Let's add a title to this table.  

*Click on the `[No Title]` section(red box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj38o287vp1mhgyg5trc.png)
  
*In the pop up menu, type in "10 locations with the highest frequency of earthquakes"(red box). Click on the `Save` button(green box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epgoovdk61zqvz3b44d3.png)

You will see that the title(red box) has been added to the table panel. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6irxan4rqd5de0s51mk.png)
   
####Step 4: Save and name the dashboard
*From the dashboard page, click on the `Save` button(green box) in the upper right corner.* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kttz854l4bgvn946zaf4.png)
 
*Name the dashboard to whatever it makes sense to you. I named mine "earthquakes_data_visualization"(red box). Click on the `Save` button(green box).*  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10bvax0z2l8hd1wsad5z.png)
  
You will see that our dashboard is now saved and has been named as `earthquakes_data_visualization`(red box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03fx17kbejufzxz381yq.png)

####Step 5: Create a heat map 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfkc3io5s8v2bicbemt7.png)
 
With heat maps, you can view the world map and visualize the location and the frequency of earthquakes by color. 

It is an effective way visualize earthquake hotspots around the world and easily detect patterns. 

*From the dashboard page, click on the select type option(red box) and click on `Maps`(blue box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdxb7tkm19pg136hd2v4.png)
 
The page will display a world map. 

*Click on the `Add layer` button(red box).*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apvmt7a98hofa3v3dv0r.png)

*Click on the `Heat map` option(blue box).*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c8wqltg0zmmx9t4z0ji.png)
 
*Click on the downward arrow(red box) to select the `earthquakes` data view(blue box) we created in [part 7](https://dev.to/lisahjung/part-7-set-up-the-nodejs-server-to-retrieve-api-data-and-send-the-data-to-elasticsearch-50fm) .*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rptlp9fnedfoowpqrzae.png)

You will see that `Lens` automatically selected the field `coordinates`(blue box below). This field contains inner fields `lat`(latitude) and `lon`(longtude). These fields were mapped to a geo_point to mark the location of earthquakes. 

*Click on the `Add layer` button(red box).* 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb8ij170j4vm0a7f7rnv.png)

It will display a pop up menu where you can further customize the heat map. 

*To create the heat map shown in the beginning of this blog, set the resolution to low(blue box) and click on the `Save & close` option(red box)*. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysqtvdn46k0cl6e6xxc1.png)

You will see that the earthquake locations are now marked with different colors on the map. 

Warm colors are associated with the maximum earthquake activity, whereas the cool colors are associated with minimum earthquake activity. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc5yfydqass9u4cusxr5.png)

By looking at our heat map, we can see that the states California and Utah seem to have frequent occurrences of quakes. 
 
*Click on the `Save and return` button(red box) in the upper right corner.*

You will see that the heat map has been added to our `earthquakes_data_visualization` dashboard.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js5zzb38qay7bh10nbvw.png)

Let's give this panel a title. 

*Click on the `[No Title]` section(red box).*

In the pop up menu, type in "Earthquake heat map"(blue box) and click on the `Save` button(red box).*  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tghjkygalxc187j2xlp.png)

You will see that the panel title(red box) has been added. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbuo9dep149k2e73c35u.png)

#### Step 6: Create metrics panels
Let's calculate and display high level metrics such as the number of earthquakes, maximum magnitude, and average depth. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af8vmi6dusgcbjf3dz9r.png)
 
*From the dashboard, click on the `Select type` option(red box) and click on the `Lens` option(blue box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0x4hhi0gdbsd4hb7oj5.png)

*In the next page, click on the downward arrow(red box) to reveal the `Visualization type` drop down menu. Scroll down on the menu until you see the `Metric` option(blue box) then click on it.*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i21k408m9pl8s8zytu2o.png)

**Number of earthquakes**
The first panel we will create is `Number of earthquakes`.    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2gydjhzgrplwhsscsid.png)
 
The number of documents(i.e. earthquakes) that fall within the chosen time range(last 30 days) will give us this value. 

To get this value, drag and drop  `Records`(red box) into the editor(orange box).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czoxyaed9vf3awh6v2qm.png)

You will see that we have a total of 8,181 documents that fall within the last 30 days time range. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpregi8h6w3kbggj2lsq.png)

Let's rename "Count of records"(red box) to "Number of earthquakes" as shown in the final dashboard.

*To make the changes, click on "Count of records"(orange box above) to display the pop up menu.*
 
*Under the `Name` section(green box), type in "Number of earthquakes". Click on the `Save and return` button(pink box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hydcuv3s8or58c0qdaap.png)

You will see that the panel for `Number of earthquakes` has been added to the dashboard. 

**Max magnitudes**
Let's create a panel that displays the maximum magnitude of earthquake that exist in our data.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imxhz1wafvn95y5fc3z9.png)

*From the dashboard, click on the `Select type` option(red box) and click on the `Lens` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kumkll8ilc9o8yei66pp.png)

*In the next page, click on the downward arrow(red box) and select the `Metric` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asp49fg35vvre1mk9zvi.png)

We are creating a panel for maximum magnitude of earthquakes found in our data set. 

*Drag the field `mag`(red box) into the editor(orange box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjfggiymejxe8244u82z.png)

You will see that it automatically displays "Median of mag"(red box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vzs783a1kfuiacgx28q.png)

However, we want to display the maximum value of magnitude found in our data set. 
 
*Click on "Median of mag"(orange box) in the edit menu to change this setting.* 

*In the pop up menu, click on the function `Maximum`(green box) to get the Maximum magnitude.* 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd4m6j0rd1mhj8rtn4bx.png)
 
*In the `Name` section(orange box), update the name to "Maximum magnitude".* 

*Click on the `Save and return` button(pink box) in the upper right corner to add this panel to the dashboard.* 
 
You will see that the panel `Maximum magnitude` has been added to the dashboard and that the maximum magnitude of earthquake in our data set is 7!  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swatukyzgo3y4oaexiqp.png)
  
**Average Depth**
Let's create a panel for `Average depth` of earthquakes in our data set. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beee2x0jnay710huizwg.png)

*From the dashboard, click on the `Select type` option(red box) and click on the `Lens` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z03kg8zg499cqv9ftgsq.png)

*Click on the downward arrow(red box) and select the `Metric` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asp49fg35vvre1mk9zvi.png)

We are creating a panel for average depth of earthquakes in our data. 

*Drag the field `depth`(red box) into the editor(orange box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trjtlcsierk2knmvd2ix.png)

You will see that it automatically displays the "Median of depth"(red box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ajup5cj2ieq9omwj9g.png)

However, we want to display the average depth of earthquakes found in our data set. 
  
*Click on "Median of depth"(orange box) in the edit menu to change this setting.* 

*In the pop up menu, click on the function `Average`(green box) to get the average depth of earthquakes.* 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a14zbhuqfn3no7vg0unp.png)
  
*In the `Name` section(orange box), update this to "Average depth (km)".* 

*Click on the `Save and return` button(pink box) in the upper right corner to add this panel to the dashboard.* 
 
You will see that the panel `Average depth (km)` of earthquakes has been added to the dashboard and that the average depth of earthquake in our data set is 20.46 km!    

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91444lbbw6bd1tam8ltp.png)
  
In our final dashboard, we see that these three metrics panels take up a row.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryhy6c4d8uu7wge9k5ai.png)
 
One of the cool things about the dashboard is that you can change the size of these panels and reorganize the panels in any way you want. 

*You can adjust the size of the panel by grabbing the lower right corner of the panel(green box) and adjusting the size of the panel.* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iwz5ck8ro1noh6nqfwl.png)

*You can move the panel by clicking the upper part of the panel(blue box) then by holding and dragging the panel wherever you wish.*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pskom4l8gnhjit1ow67q.png)

After resizing and reorganizing your metrics panels, your dashboard should look like the following. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n59b16aqnp4stokoni9n.png)
  
####Step 7: Create a magnitude histogram 
Next, we will create an earthquake magnitude histogram.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxgzr3hggf19zjdy9f50.png)
  
This panel displays different levels magnitude that exist in our dataset and how many earthquakes have exhibited this magnitude.  

*To create this histogram, click on the `Select type` option(red box) and select the `Lens` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9aaknox7lmo3cf1r9bu.png)
 
*Click on the downward arrow(red box) then select the `Bar vertical` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhcaibi63n1q8s3emiwh.png)

You will see the following page where you can add a field to a horizontal axis(red box) and vertical axis(blue box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkzsed50zztiqq9fdhj2.png)
 
Let's take a look at the magnitude histogram in the final dashboard. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxgzr3hggf19zjdy9f50.png)

On the horizontal axis, the levels of magnitude are displayed. On the vertical axis, we have the number of earthquakes that exhibit the corresponding magnitude. 

*Drag the field `mag`(green box) into the `Horizontal axis` section(red box).*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7u3s5yngrh1rfdo9w2o.png)

*Drag `Records`(orange box) into the `Vertical axis` section(blue box).*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77cvg5fzlo4jim65h2ai.png)
 
You will see that it automatically creates a histogram for you with `Count of records`(purple box) on the vertical axis and `mag`(green box) on the horizontal axis. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0prjwtasb0cp75dqj8y9.png)

Let's rename the vertical axis label `Count of records` to `Number of earthquakes`. 

*Click on Count of records(red box) from the edit menu.*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv6ev156ile64xle4ra1.png)
 
*In the `Name` section(purple box), type in "Number of earthquakes".*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj8lpjjbkswt6yqxvz6i.png)
 
Let's also change the color of the histogram to pink as shown in the final dashboard. 

*From the edit menu. click on the `Series color` option(orange box).* 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmdzes2ae2z8zrl0fhu7.png)
 
It will display the color options you can apply to the histogram. 

*Click on the pink color(black arrow).*

You will see that the color of the histogram has been changed to pink. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv6et15a12b180ahl5la.png)

Let's rename the horizontal axis label `mag` to `Magnitude`.

*Click on the `close` option(blue box).*

*Click on `mag`(orange box) from the edit menu.* 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzm07snvxo0oyom62gi9.png)

*In the `Name` section(purple box), type in "Magnitude". 

Click on the `Save and return` button(green box) in the upper right corner.*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tscxfzlfi4y0bsx0tsky.png)
 
You will see that the histogram has been added to the dashboard. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qbfzshj85j0poewmv80.png)

You see many earthquakes exhibiting magnitude level that fall between 0.8-1.2, which are pretty mild earthquakes that are not usually felt.

We also observe fewer number of earthquakes exhibiting higher magnitude levels that cause different levels of damage.
 
For more information on earthquake magnitude level and its effects, check out this [resource](https://www.mtu.edu/geo/community/seismology/learn/earthquake-measure/magnitude/)!

Let's give this panel a title!

*Click on the `[No Title]`section(orange box).*

*In the pop up menu, type in "Earthquake magnitude histogram"(green box) then click on the `Save` button(purple box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1139jlgpbqvn6lcqrdxk.png)

You will see that the panel title has been added.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm8znnd5p1e94s9s3a6q.png)

####Step 8: Create a donut chart
Lastly, let's create a donut chart that shows the types and percentage of quakes present in our dataset.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v97922q0les8u4t245j7.png)
 
*From the dashboard page, click on the `Select type` option(red box) and click on the `Lens` option(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc8sh06xxrjwusc1a1tj.png)

*In the next page, click on the downward arrow(red box). Scroll down until you see the `Donut` option(blue box) and click on it.*   
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02nv1n3cqpntms2f7vcl.png)

Let's look at the final Donut chart. 

The donut is divided into types of quakes. Each type is  represented by a slice of the donut. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0cict6qfkj5d5v68g2v.png)
 
*Drag the field `type`(orange box) and drop it into the `Slice by` section(blue box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huwf7oamkaljvjtvcvci.png)

The size of the slice is determined by how many earthquakes(`Records`) of each type exists in our data set. 

*Drag and drop `Records`(red box) into the `Slice by` section(green box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt0qy9j7wzzzsdjidh69.png)

You will see that `Lens` has automatically created a donut chart that shows the type and percentage of quakes that exists in our data. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1mzvnii16kvxw2r45jn.png)
 
As you can see, the majority of the quakes present in our data is of type earthquake(98.22%). 

Ice quake makes up 0.01% of our data.

Some of the quakes are man made:
- quarry blast(1.22%)
- explosion(0.54%) 
- chemical explosion(0.01%)

Let's create a legend for types of quakes and place it in the upper right side of the donut chart panel. 

*Click on the `legend` logo(green box).* 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxpol9b0211phi6g4ejb.png)
 
It will display a drop down menu where you can edit the legend. 

*In the `Display` section, click on the `Show` option(orange box).* 

You will see a legend(blue box) show up in the upper right corner. 

The `Alignment` section(purple box) allows you to specify where in the panel the legend should be displayed. Since we want the legend in the upper right corner, leave the default option(right facing arrow). 

*Click on the `Save and return` button(red box) in the upper right corner to add this panel to the dashboard.*

You will see that the donut chart has been added to the dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fblt77kp6jmoch3rif9.png)
   
If you hover over a slice(red box), it shows the quake type(quarry blast) this slice represents, how many documents(i.e. quakes) are of this type(100), and what percentage of documents are of this type(1.22%). 

Let's give this panel a title.

*Click on the `[No Title]` section(blue box).*

*In the pop up menu, type in "Quake types"(blue box) and click on the `Save` button(red box).* 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkhzfh1a5f71j9rkc3z4.png)
 
You will see that the panel title has been added(blue box). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yaoj8z6rj4v8kgq37v0t.png)

*Save the dashboard by clicking on the `Save` button(red box) in the upper right corner.* 

*Click on the `Switch to view mode`(orange box).*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auxrcjzg2cl6l046dcty.png)

You will see the dashboard in presentation mode as shown in the final dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqud4t1vf8kcjfl9y7y5.png)
 
Congratulations! You have completed season 2 of Mini Beginner's Crash Course to Elasticsearch and Kibana!

![image](https://media.giphy.com/media/8Iv5lqKwKsZ2g/giphy.gif)

In this series, you learned how to:
1. Build a full stack JavaScript app
2. Connect the app to Elasticsearch
3. Retrieve API data 
4. Transform the retrieved data
5. Ingest transformed data into Elasticsearch
6. Set up the app for search
7. Display search results for the app user
8. Visualize data with Kibana Lens 

Now that you’ve got the basics under your belt, build on what you've learned and see what you can create with Elasticsearch and Kibana!