final_graphs_slider.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import AppLayout, Button, Layout, Image\n",
    "\n",
    "def create_expanded_button(description, button_style):\n",
    "    return Button(description=description, button_style=button_style, layout=Layout(height='auto', width='auto'))\n",
    "\n",
    "from ipywidgets import Layout, Button, Box, FloatText, Textarea, Dropdown, Label, IntSlider\n",
    "from ipywidgets import HBox, VBox\n",
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "from ipywidgets import GridspecLayout\n",
    "import ipywidgets as widgets\n",
    "import scipy.io\n",
    "import numpy as np\n",
    "import tkinter\n",
    "from sys import executable, argv\n",
    "from subprocess import check_output\n",
    "import pandas as pd\n",
    "import matplotlib.pyplot as plt\n",
    "import math\n",
    "import time\n",
    "from ipywidgets import HTML\n",
    "import os\n",
    "import cartopy.feature as cfeature\n",
    "import cartopy.crs as ccrs\n",
    "import seaborn as sns\n",
    "import markdown \n",
    "from matplotlib.widgets import Slider, Button, RadioButtons\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# save np.load\n",
    "np_load_old = np.load\n",
    "\n",
    "# modify the default parameters of np.load\n",
    "np.load = lambda *a,**k: np_load_old(*a, allow_pickle=True, **k)\n",
    "\n",
    "final_graph_inp_arr = np.load('final_graph_inp_arr.npy')\n",
    "final_graph_inp_arr.shape\n",
    "\n",
    "# restore np.load for future normal usage\n",
    "np.load = np_load_old\n",
    "final_graph_inp_arr.shape\n",
    "\n",
    "all_arr = []\n",
    "for x in final_graph_inp_arr:\n",
    "    if len(x) > 1:\n",
    "        all_arr.append(np.array(x))\n",
    "\n",
    "all_arr = np.array(all_arr[1:])\n",
    "all_arr.shape\n",
    "\n",
    "unique_st = np.unique(all_arr[:,2:3])[:-1]\n",
    "\n",
    "sets = []\n",
    "\n",
    "for st in unique_st: \n",
    "    sets.append([])\n",
    "    #print(st)\n",
    "    for each_record in all_arr:\n",
    "        try:\n",
    "            if st == each_record[2]:        \n",
    "                sets[-1].append(each_record)\n",
    "        except:\n",
    "            continue\n",
    "            \n",
    "sets_arr = np.array(sets)\n",
    "sets_arr.shape\n",
    "\n",
    "city_names = open('city_coordinates.txt',encoding=\"utf8\").readlines()\n",
    "city_coords = []\n",
    "for lines in city_names:\n",
    "    city_coords.append([lines.replace('\\n','').split(',')[1],float(lines.replace('\\n','').split(',')[2]),float(lines.replace('\\n','').split(',')[3])])\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = markdown.markdown(\"\"\"<html>\n",
    "<head>\n",
    "<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>\n",
    "<style>\n",
    "body {\n",
    "    font-family: 'Roboto';font-size: 22px;\n",
    "}\n",
    "</style>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "\n",
    "  <h1 style=\"text-align: center;\"><span style=\"font-size: \n",
    "      26px;\">CMP684 Project</span></h1>\n",
    "  <h1 style=\"text-align: center;\"><span style=\"font-size: 26px;\"><strong>V<sub>s30</sub> Prediction from Earthquake Accelerograms</strong></span></h1>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-size: 19px;\"><strong><span class=\"fontstyle0\" style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;\">Earthquakes are recorded with seismograph devices all over the world especially at countries with high seismicity (eg. Turkey, Japan). Records of these devices, namely accelerograms (t</span></strong><strong><span style=\"float: none; color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important;\">he recording of the acceleration of the ground during an earthquake</span></strong><strong><span class=\"fontstyle0\" style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;\">), vaguely reflects some characteristics of seismograph site.</span></strong><strong><span style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;\">&nbsp;In this study, a parameter of site, average shear wave velocity of top 30 meters of soil (V<sub>s30</sub>) predicted using accelerograms recorded at the same site with the help of a neural network.</span></strong></span></p>\n",
    "  <p style=\"text-align: center;\"><span style=\"font-size: 19px;\"><strong><span style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;\">\n",
    "          <img src=\"./img/AFAD_istassyonlar.PNG\" style=\"width: 637px;\">\n",
    "          </span></strong></span></p>\n",
    "  <p style=\"text-align: center;\"><span style=\"font-size: 16px;\"><strong><span style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;\"><em>AFAD strong ground motion seismograph network [1].</em></span></strong></span></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">In Turkey there are 679 seismograph devices actively working in AFAD's (Disaster &amp; Emergency Management Authority) strong ground motion seismograph network.</span><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">&nbsp;For 68 of those 679 seismographs the geological borehole log reports are available online [2] and for 258 seismographs the V<sub>s30</sub> value of site is known. V<sub>s30</sub> is accepted as a indicator of the hardness of soil of a site. If site has rock-type properties, V<sub>s30</sub> is high and if site has soil-type properties V<sub>s30</sub> is low. An example soil classification according to V<sub>s30&nbsp;</sub>values is shown below:</span></p>\n",
    "  <p style=\"text-align: justify;\">\n",
    "    <br>\n",
    "  </p>\n",
    "\n",
    "\n",
    "\n",
    "</body>\n",
    "</html>\"\"\")\n",
    "HTML(html) \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = markdown.markdown(\"\"\"<html>\n",
    "<head>\n",
    "<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>\n",
    "<style>\n",
    "body {\n",
    "    font-family: 'Roboto';font-size: 22px;\n",
    "}\n",
    "</style>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "<p style=\"text-align: center;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">\n",
    "    <img src=\"./img/Site-Class-descriptions-and-their-V-S-30-ranges.png\" style=\"width: 436px;\">\n",
    "    </span></p>\n",
    "<p style=\"text-align: center;\"><em>Soil classification table according to V<sub>s30</sub> values [3]</em></p>\n",
    "<p style=\"text-align: center;\">\n",
    "  <br>\n",
    "</p>\n",
    "<p style=\"text-align: center;\">\n",
    "   <img src=\"./img/image001-1.gif\" style=\"width: 436px;\">\n",
    "   </p>\n",
    "<p style=\"text-align: center;\"><em>Shear wave propagation in soil medium [4].</em></p>\n",
    "<p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\"><span style=\"color: rgb(0, 0, 0); font-family: Tahoma, Geneva, sans-serif; font-size: 19px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">In this study,</span> earthquakes recorded by seismographs with known V<sub>s30</sub> values are used. By the date 26.11.2019 (cut-off date for data gathering) there were around 20.000 earthquake records (Magnitude ≥ 3) caught by these 258 seismographs. Each of these records have three accelerograms in three perpendicular directions (north-south (<em>ns</em>), east-west (<em>ew</em>), up-down(<em>ud</em>)). A sample record shown below.</span></p>\n",
    "<p style=\"text-align: center;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">\n",
    "    <img src=\"./img/acc_sample.PNG\" style=\"width: 639px;\">\n",
    "    </span></p>\n",
    "<p style=\"text-align: center;\"><em>North-South, East-West and Up-Down records of earthquake recorded at station no 1009 at 2008.</em></p>\n",
    "<p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">These records are not used directly in the training of neural network model. In order to standardize the input and to reflect the frequency dependent behavior better, accelerogram records converted to spectra using Niggam-Jennings methodology [5]. Spectra calculated for sample accelerograms are given below.</span></p>\n",
    "<p style=\"text-align: center;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">\n",
    "    <br>\n",
    "    <img src=\"./img/rs_sample.PNG\" style=\"width: 675px;\">\n",
    "    </span></p>\n",
    "\n",
    "</body>\n",
    "</html>\"\"\")\n",
    "HTML(html) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = markdown.markdown(\"\"\"<html>\n",
    "<head>\n",
    "<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>\n",
    "<style>\n",
    "body {\n",
    "    font-family: 'Roboto';font-size: 22px;\n",
    "}\n",
    "</style>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "  <p style=\"text-align: center;\"><em>Spectra calculated for North-South, East-West and Up-Down records of earthquake recorded at station no 1009 at 2008.</em></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\"><span class=\"fontstyle0\">Using the spectra derived from over 20.000 earthquake records a neural network model formed and trained in a way to <strong><u>extract&nbsp;</u></strong></span><strong><u><span class=\"fontstyle2\">V</span><span class=\"fontstyle3\"><sub>s</sub></span><span class=\"fontstyle4\"><sub>30</sub>&nbsp;</span></u></strong><span class=\"fontstyle0\"><u><strong>value from the relation between horizontal and vertical components of earthquake recordings.</strong></u> Thus North-South_Up-Down (<em>ns-ud</em> ) and East-West_Up-Down (<em>ew-ud</em> ) spectrum couples used as input and&nbsp;</span><span class=\"fontstyle2\">V</span><span class=\"fontstyle3\"><sub>s</sub></span><span class=\"fontstyle4\"><sub>30</sub>&nbsp;</span><span class=\"fontstyle0\">value used as output.</span>&nbsp;</span></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\"><u><strong>Neural Network Model</strong></u></span></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">Schematic of neural network model is given below:</span></p>\n",
    "  <p style=\"text-align: center;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">\n",
    "      <img src=\"./img/model.PNG\">&nbsp; \n",
    "      </span><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 16px;\"><em>&nbsp;Neural network model used in this study.</em></span></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\"><u><strong>Predictions:</strong></u></span></p>\n",
    "  <p style=\"text-align: justify;\"><span style=\"font-family: Tahoma, Geneva, sans-serif; font-size: 19px;\">At the below graph prediction results of the neural network model can be reviewed. At each graph blue circle shows the station and all other circles represents the earthquakes recorded by that station. Colors of earthquake circles changes via error in prediction. For each earthquake there are two circles at same point, one for North-South_Up-Down (ns-ud) and one for East-West_Up-Down (ew-ud). Size of outer circles represents the magnitude of the corresponding earthquake. And finally real and predicted V<sub>s30</sub> values can be seen with mouse hover circle (with related radiobutton selected).</span></p>\n",
    "  <p style=\"text-align: center;\">\n",
    "    <br>\n",
    "  </p>\n",
    "  <p style=\"text-align: justify;\">\n",
    "    <br>\n",
    "  </p>\n",
    "\n",
    "\n",
    "</body>\n",
    "</html>\"\"\")\n",
    "HTML(html) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#grid = GridspecLayout(1, 5, height='50px')\n",
    "#grid[0, 0] = create_expanded_button('Main', 'info')\n",
    "#grid[0, 1] = create_expanded_button('Input', 'info')\n",
    "#grid[0, 2] = create_expanded_button('Analysis', 'info')\n",
    "#grid[0, 3] = create_expanded_button('Plot', 'info')\n",
    "#grid[0, 4] = create_expanded_button('Other', 'info')\n",
    "#display(grid)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "#x = np.random.rand(15)\n",
    "#y = np.random.rand(15)\n",
    "#names = np.array(list(\"ABCDEFGHIJKLMNO\"))\n",
    "#c = np.random.randint(1,5,size=15)\n",
    "\n",
    "#norm = plt.Normalize(1,4)\n",
    "#cmap = plt.cm.RdYlGn\n",
    "\n",
    "#fig,ax = plt.subplots()\n",
    "#sc = plt.scatter(x,y,c=c, s=100, cmap=cmap, norm=norm)\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%matplotlib notebook\n",
    "\n",
    "\n",
    "#fig = plt.figure()\n",
    "#ax = fig.add_subplot(111)\n",
    "fig,ax = plt.subplots(num='Vs30 Predictions')\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "def f_slider(station): \n",
    "    #try:\n",
    "        global points, points2\n",
    "        #1. çalışan\n",
    "        \n",
    "        stt = cfeature.NaturalEarthFeature(category='cultural', \n",
    "            name='admin_0_boundary_lines_land',\n",
    "            scale='10m',facecolor='none')\n",
    "        stt_prv = cfeature.NaturalEarthFeature(category='cultural', \n",
    "            name='admin_1_states_provinces_lines',\n",
    "            scale='10m',facecolor='none')\n",
    "\n",
    "\n",
    "        st_no = station\n",
    "        my_set = np.array(sets_arr[st_no])\n",
    "        my_set_nsud = []\n",
    "        my_set_ewud = []\n",
    "        for i in range(len(sets_arr[st_no])):\n",
    "            if i % 2 == 0:\n",
    "                my_set_nsud.append(sets_arr[st_no][i])\n",
    "            else:\n",
    "                my_set_ewud.append(sets_arr[st_no][i])\n",
    "\n",
    "        my_set_nsud = np.array(my_set_nsud)\n",
    "        my_set_nsud.shape        \n",
    "\n",
    "        my_set_ewud = np.array(my_set_ewud)\n",
    "        my_set_ewud.shape\n",
    "\n",
    "        #print(my_set.shape[0])\n",
    "        #print(my_set[:,13:14])\n",
    "        my_set.shape\n",
    "        st_n = float(my_set[:,6:7][0])\n",
    "        st_e = float(my_set[:,7:8][0])\n",
    "        eq_n = np.array(my_set[:,8:9],dtype=float).reshape(-1,)\n",
    "        eq_e = np.array(my_set[:,9:10],dtype=float).reshape(-1,)\n",
    "        res = 5\n",
    "\n",
    "        #print(BBox)        \n",
    "        #cmap = sns.cubehelix_palette(as_cmap=True)\n",
    "        # Generate a custom diverging colormap\n",
    "        #cmap = sns.diverging_palette(220, 10, as_cmap=True)\n",
    "        #cmap = sns.cubehelix_palette(rot=-.2, as_cmap=True)\n",
    "        #plt.figure(figsize=(12, 6))\n",
    "        def update_annot(ind):\n",
    "\n",
    "            pos = points.get_offsets()[ind[\"ind\"][0]]\n",
    "            annot.xy = pos\n",
    "            if my_rdbtn.value == 1:\n",
    "                text = \"{}\".format(np.array(my_set_nsud[:,3:4],dtype=float)[int(list(map(str,ind[\"ind\"]))[0])][0])\n",
    "            elif my_rdbtn.value == 2:\n",
    "                text = \"{}\".format(np.array(my_set[:,0:1])[int(list(map(str,ind[\"ind\"]))[0])][0])\n",
    "            elif my_rdbtn.value == 3:\n",
    "                text = \"R: {} NS: {} EW: {}\".format(round(np.array(my_set[:,13:14],dtype=float)[int(list(map(str,ind[\"ind\"]))[0])][0],0),\n",
    "                                            round(np.array(my_set_nsud[:,14:15],dtype=float)[int(list(map(str,ind[\"ind\"]))[0])][0],0),\n",
    "                                           round(np.array(my_set_ewud[:,14:15],dtype=float)[int(list(map(str,ind[\"ind\"]))[0])][0],0))\n",
    "                \n",
    "            annot.set_text(text)\n",
    "            #annot.get_bbox_patch().set_facecolor(cmap(norm(c[ind[\"ind\"][0]])))\n",
    "            annot.get_bbox_patch().set_alpha(0.4)\n",
    "\n",
    "\n",
    "        def hover(event):\n",
    "            vis = annot.get_visible()\n",
    "            if event.inaxes == ax:\n",
    "                cont, ind = points.contains(event)\n",
    "                if cont:\n",
    "                    update_annot(ind)\n",
    "                    annot.set_visible(True)\n",
    "                    fig.canvas.draw_idle()\n",
    "                else:\n",
    "                    if vis:\n",
    "                        annot.set_visible(False)\n",
    "                        fig.canvas.draw_idle()\n",
    "\n",
    "        #fig, ax = plt.subplots()\n",
    "        fig.clf()\n",
    "        prr = ccrs.PlateCarree(globe=None)\n",
    "\n",
    "        ax = plt.axes(projection=prr)\n",
    "\n",
    "        my_n = np.array(my_set[:,8:9],dtype=float)\n",
    "        my_e = np.array(my_set[:,9:10],dtype=float)\n",
    "        my_n_nsud = np.array(my_set_nsud[:,8:9],dtype=float)\n",
    "        my_e_nsud = np.array(my_set_nsud[:,9:10],dtype=float)\n",
    "        my_n_ewud = np.array(my_set_ewud[:,8:9],dtype=float)\n",
    "        my_e_ewud = np.array(my_set_ewud[:,9:10],dtype=float)\n",
    "        my_mag_nsud = np.array(my_set_nsud[:,3:4],dtype=float)**3.5\n",
    "        my_mag_ewud = (np.array(my_set_nsud[:,3:4],dtype=float)**3.5) / 3  # magnitude iki yönde de aynı olduğu için ikisinde de nsud\n",
    "        my_c_nsud = np.abs(np.array(my_set_nsud[:,13:14],dtype=float) - np.array(my_set_nsud[:,14:15],dtype=float))/np.array(my_set_nsud[:,13:14],dtype=float) \n",
    "        my_c_ewud = np.abs(np.array(my_set_ewud[:,13:14],dtype=float) - np.array(my_set_ewud[:,14:15],dtype=float))/np.array(my_set_ewud[:,13:14],dtype=float) \n",
    "        my_c_nsud = np.clip(my_c_nsud, 0, 0.5) # dikkat max error u 0.5 de fixliyor. Colorbar için gerekti.\n",
    "        my_c_ewud = np.clip(my_c_ewud, 0, 0.5) \n",
    "        BBox = [np.min(my_e_nsud)-1, np.max(my_e_nsud)+1, np.min(my_n_nsud)-1, np.max(my_n_nsud)+1] #ewud veya nsud farketmediği (aynı koordinatlar) için nsud yaptım\n",
    "        my_c = np.abs(np.array(my_set[:,13:14],dtype=float) - np.array(my_set[:,14:15],dtype=float))/np.array(my_set[:,13:14],dtype=float)\n",
    "        ax.set_extent(BBox)\n",
    "        my_c = np.clip(my_c, 0, 0.5) \n",
    "        my_c = np.append(my_c, [0,0.5])\n",
    "        my_c_nsud = np.append(my_c_nsud, [0,0.5])\n",
    "        my_c_ewud = np.append(my_c_ewud, [0,0.5])\n",
    "        my_n_nsud = np.append(my_n_nsud, [1,2]) # dummy points for colorbar scale correction\n",
    "        my_n_ewud = np.append(my_n_ewud, [1,2])\n",
    "        my_e_nsud = np.append(my_e_nsud, [1,2]) # dummy points for colorbar scale correction\n",
    "        my_e_ewud = np.append(my_e_ewud, [1,2])\n",
    "        my_mag_nsud = np.append(my_mag_nsud, [1,2])\n",
    "        my_mag_ewud = np.append(my_mag_ewud, [1,2])\n",
    "\n",
    "\n",
    "        cmap = sns.diverging_palette(160, 10, s=80, l=50, n=90, as_cmap=True)\n",
    "        points = plt.scatter(my_e_nsud, my_n_nsud, zorder=1, alpha= 0.9,c = my_c_nsud, s=my_mag_nsud, cmap=cmap)\n",
    "        points2 = plt.scatter(my_e_ewud, my_n_ewud, zorder=1, alpha= 0.9,c = my_c_ewud, s=my_mag_ewud, cmap=cmap)\n",
    "        ax.scatter(st_e, st_n, zorder=1, alpha= 0.8, c='b', s=100)\n",
    "        ax.text(st_e, st_n, str(my_set[0][2]), size=9, ha='left', va='top',position=(st_e*1.004, st_n*1.004))\n",
    "        #ax.scatter(st_e, st_n, zorder=1, alpha= 0.8, c=0, s=100)\n",
    "        #ax.scatter(st_e, st_n, zorder=1, alpha= 0.8, c=0.5, s=100)\n",
    "        ax.set_title(\"Station no: \" + str(my_set[0][2]) + \" # of eqs: \" + str(my_set.shape[0]))       \n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "        fig.canvas.mpl_connect(\"motion_notify_event\", hover)\n",
    "\n",
    "        fig.colorbar(points, label='Error')        \n",
    "        \n",
    "        annot = ax.annotate(\"\", xy=(0,0), xytext=(20,20),textcoords=\"offset points\",\n",
    "            bbox=dict(boxstyle=\"round\", fc=\"w\"),\n",
    "            arrowprops=dict(arrowstyle=\"->\"))\n",
    "        annot.set_visible(False)\n",
    "        ax.gridlines()\n",
    "        ax.coastlines('10m')\n",
    "        ax.add_feature(stt,     linewidth=0.5, edgecolor='black', zorder=0)\n",
    "        ax.add_feature(stt_prv, linewidth=0.2, edgecolor='black', zorder=5)\n",
    "        for i in range(len(city_coords)):\n",
    "            if city_coords[i][2] > BBox[0] and city_coords[i][2] < BBox[1] and city_coords[i][1] > BBox[2] and city_coords[i][1] < BBox[3]: # kutu dışına çıkan isimleri engellemek için\n",
    "                ax.text(city_coords[i][2], city_coords[i][1], city_coords[i][0], size=7, ha='center', va='center', color='grey')\n",
    "            #ax.annotate(city_coords[i][0], (city_coords[i][2], city_coords[i][1]))\n",
    "        plt.show()\n",
    "        #fig.draw()\n",
    "\n",
    "    #except Exception as e:\n",
    "        #print(e)\n",
    "        #pass\n",
    "\n",
    "f_slider(110)\n",
    "slider=widgets.IntSlider(min=0, max=223, step=1, value=110)    \n",
    "#slider = widgets.IntSlider()\n",
    "#display(slider)\n",
    "\n",
    "\n",
    "interactive_plot = interactive(f_slider, station=slider)\n",
    "\n",
    "bck_button=widgets.Button(description='',button_style='',icon='chevron-left',layout=Layout(width='40px'))\n",
    "fwd_button=widgets.Button(description='',button_style='',icon='chevron-right',layout=Layout(width='40px'))\n",
    "\n",
    "AppL1 = AppLayout(header=None,\n",
    "          left_sidebar=bck_button,\n",
    "          center=slider,\n",
    "          right_sidebar=fwd_button,\n",
    "          footer=None,\n",
    "          pane_widths=['40px', '300px', '40px'],\n",
    "          pane_heights=[1, 1, 1])\n",
    "\n",
    "\n",
    "my_rdbtn = widgets.RadioButtons(\n",
    "    options=[('Magnitude', 1),('Eq_id', 2), ('Vs30', 3)],\n",
    "#    value='pineapple', # Defaults to 'pineapple'\n",
    "    layout={'width': 'max-content'}, # If the items' names are long\n",
    "    description='Annotations:',\n",
    "    disabled=False\n",
    ")\n",
    "#display(my_rdbtn)\n",
    "grid0 = GridspecLayout(1, 5, height='100px',width='100%',justify_items='center',align_items = 'center')\n",
    "grid0[0, 2:4] = AppL1\n",
    "\n",
    "grid0[0, 0:2] = my_rdbtn\n",
    "#grid0[0, 1] = slider\n",
    "#grid0[0, 2] = fwd_button\n",
    "display(grid0)\n",
    "#display(AppL1)\n",
    "    \n",
    "def bck_click(b):\n",
    "    slider.value=slider.value-1\n",
    "    \n",
    "def fwd_click(b):\n",
    "    slider.value=slider.value+1\n",
    "    \n",
    "    \n",
    "bck_button.on_click(bck_click)\n",
    "fwd_button.on_click(fwd_click)\n",
    "\n",
    "#output = interactive_plot.children[-1]\n",
    "\n",
    "#display(interactive_plot)\n",
    "    \n",
    "    \n",
    "\n",
    "#click(None) # boş çalıştırmak için\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html = markdown.markdown(\"\"\"<html>\n",
    "<head>\n",
    "<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>\n",
    "<style>\n",
    "body {\n",
    "    font-family: 'Roboto';font-size: 22px;\n",
    "}\n",
    "</style>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "<p style=\"text-align: justify;\"><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">This study done by&nbsp;</span><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">Ali AKGÖZ (</span>\n",
    "  <a href=\"mailto:aliakgoz@gmail.com\"><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">aliakgoz@gmail.com</span></a><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">)</span><span style=\"font-size: 19px; font-family: Tahoma, Geneva, sans-serif;\">&nbsp;as a term project for \n",
    "    <a href=\"https://web.cs.hacettepe.edu.tr/~onderefe/bil684/\" rel=\"noopener noreferrer\" target=\"_blank\">CMP684 - Neural Networks Course</a> (Hacettepe University - Computer Engineering) under supervision of the instructor of the course \n",
    "    <a href=\"https://web.cs.hacettepe.edu.tr/~onderefe/\" rel=\"noopener noreferrer\" target=\"_blank\">Prof. Dr. M.Önder EFE</a>.&nbsp;\n",
    "  </span></p>\n",
    "<p>\n",
    "  <br>\n",
    "</p>\n",
    "<p>\n",
    "  <br>\n",
    "</p>\n",
    "<p style=\"text-align: justify;\"><strong>References:</strong></p>\n",
    "<p style=\"text-align: justify;\">[1] \n",
    "  <a href=\"https://deprem.afad.gov.tr/istasyonlar\">https://deprem.afad.gov.tr/istasyonlar</a> &nbsp;\n",
    "</p>\n",
    "<p style=\"text-align: justify;\">[2] \n",
    "  <a href=\"http://kyhdata.deprem.gov.tr/\">http://kyhdata.deprem.gov.tr/</a>&nbsp; (currently unavailable due to maintenance. 17.03.2020)&nbsp;\n",
    "</p>\n",
    "<p style=\"text-align: justify;\">[3] Building Seismic Safety Council, NEHRP Recommended Provisions for Seismic Regulations for New Buildings and Other Structures (Fema 450),\" Part 1, no. Fema 450, p. 338, 2003.</p>\n",
    "<p style=\"text-align: justify;\">[4] \n",
    "  <a href=\"https://web.ics.purdue.edu/~braile/edumod/waves/Swave.gif\">https://web.ics.purdue.edu/~braile/edumod/waves/Swave.gif</a> &nbsp;\n",
    "</p>\n",
    "<p style=\"text-align: justify;\">[5] N. Nigam, P. Jennings, and C. I. of Technology Earthquake Engineering Research Laboratory, Digital calculation of response spectra from strong-motion earthquake records. California Institute of Technology, Earthquake Engineering Research Laboratory, 1968</p>\n",
    "\n",
    "\n",
    "</body>\n",
    "</html>\"\"\")\n",
    "HTML(html) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}