Dataviz builder Github.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# <span style=\"color:#285c8c\"> &#9733; </span> <span style=\"color:#00acee;\">Dataviz Generator </span><span style=\"color:#285c8c\">  &#9733;<span style=\"color:#285c8c\"><i>Python + Highcharts + Json</i></span> \n",
    "*Version 2.1 May 8th, 2016*\n",
    "\n",
    "![image](http://stats4dev.com/img/constructionWorker.jpg)\n",
    "\n",
    "#### &#9733;<i>Thomas Roca, PhD - AFD Research Direction &#9733;</i>\n",
    "Dataviz available\n",
    "+ Line charts (1 and 2 variables + Convergence)\n",
    "+ Radar Charts\n",
    "+ Maps\n",
    "##### What remain on the to-do-list:\n",
    "+ ?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### What is it ?\n",
    "+ Python tools to create datavisualizations based on highchart library: http://www.highcharts.com/\n",
    "+ Data behind the scene are hosted on json files with the following specifications:\n",
    "    + One json file per country (for World Bank WDI and IMF WEO, for Gallup WP, one json per variable)\n",
    "    + data stored in keys variable country iso3code and date. e.g. [VAR1][USA][2015]: value\n",
    "    + exemple of data structure for Yemen for World Bank WDI and IMF WEO\n",
    "    ```javascript\n",
    "{\n",
    "  \"SP.POP.TOTL\": {\n",
    "    \"label\": \"Total Population (in number of people)\",\n",
    "    \"info\": \" \",\n",
    "    \"YEM\": {\n",
    "      \"2013\": 25533217,\n",
    "      \"2014\": 26183676,\n",
    "      \"2015\": null,\n",
    "      \"YearMin\": 1980,\n",
    "      \"YearMax\": 2014\n",
    "    },\n",
    "    \"LMC\": {\n",
    "      \"2013\": 2835699886,\n",
    "      \"2014\": 2878467298,\n",
    "      \"2015\": null,\n",
    "      \"YearMin\": 1980,\n",
    "      \"YearMax\": 2014\n",
    "    },\n",
    "    \"MEA\": {\n",
    "      \"2013\": 409324396,\n",
    "      \"2014\": 417451788,\n",
    "      \"2015\": null,\n",
    "      \"YearMin\": 1980,\n",
    "      \"YearMax\": 2014\n",
    "    },\n",
    "    \"WLD\": {\n",
    "      \"2013\": 7175391594,\n",
    "      \"2014\": 7259691769,\n",
    "      \"2015\": null,\n",
    "      \"YearMin\": 1980,\n",
    "      \"YearMax\": 2014\n",
    "        }\n",
    "    }```\n",
    "    + exemple of a json file: http://www.stats4dev.com/glance/data/WB_WDI_BRA.json\n",
    "    \n",
    "For Gallup World Poll Data, the Json structure differs. Each json correspond to a variable (vs a country)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## &#9733; Line chart &#9733;: <span style=\"color:#285c8c\">One variable time series</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#================================================ Options ==============================================================\n",
    "iso3list=['']#, 'AGO', 'FRA', 'USA','MEX'] #Country code to expand at will\n",
    "indicatorlist=['FM.AST.DOMS.CN'] #FM.AST.DOMS.CN #SP.POP.1564.TO.ZS','NY.GDP.PCAP.PP.KD','NY.GDP.PCAP.CD', 'NE.EXP.GNFS.CD'] #Indicator code (as existing in json datasets)\n",
    "duration=23 #length of the time serie\n",
    "color = ['#6e9fc5', '#ffdf51' ,'#a6ca6d' ,'#ad46d6' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "dataset=\"data/WB_WDI2_\" #dataset url - minus iso3 country code\n",
    "\n",
    "#========================================================================================================================\n",
    "\n",
    "iso3list=['ABW', 'AFG', 'AGO', 'ALB', 'AND', 'ARE', 'ARG', 'ARM', 'ASM', 'ATG', 'AUS', 'AUT', 'AZE', 'BDI', 'BEL', 'BEN', 'BFA', 'BGD', \\\n",
    "         'BGR', 'BHR', 'BHS', 'BIH', 'BLR', 'BLZ', 'BMU', 'BOL', 'BRA', 'BRB', 'BRN', 'BTN', 'BWA', 'CAF', 'CAN', 'CHE', 'CHL', 'CHN', \\\n",
    "         'CIV', 'CMR', 'COD', 'COG', 'COL', 'COM', 'CPV', 'CRI', 'CUB', 'CUW', 'CYM', 'CYP', 'CZE', 'DEU', 'DJI', 'DMA', 'DNK', 'DOM', \\\n",
    "         'DZA', 'ECU', 'EGY', 'ERI', 'ESP', 'EST', 'ETH', 'FIN', 'FJI', 'FRA', 'FSM', 'GAB', 'GBR', 'GEO', 'GHA', 'GIN', 'GMB', \\\n",
    "         'GNB', 'GNQ', 'GRC', 'GRD', 'GRL', 'GTM', 'GUM', 'GUY', 'HKG', 'HND', 'HRV', 'HTI', 'HUN', 'IDN', 'IMN', 'IND', 'IRL', 'IRN', \\\n",
    "         'IRQ', 'ISL', 'ISR', 'ITA', 'JAM', 'JOR', 'JPN', 'KAZ', 'KEN', 'KGZ', 'KHM', 'KNA', 'KOR', 'KWT', 'LAO', 'LBN', 'LBR', 'LBY', \\\n",
    "         'LCA', 'LIE', 'LKA', 'LSO', 'LTU', 'LUX', 'LVA', 'MAC', 'MAF', 'MAR', 'MCO', 'MDA', 'MDG', 'MDV', 'MEX', 'MHL', 'MKD', 'MLI', \\\n",
    "         'MLT', 'MMR', 'MNE', 'MNG', 'MNP', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYS', 'NAM', 'NCL', 'NER', 'NGA', 'NIC', 'NLD', 'NOR', 'NPL', \\\n",
    "         'NZL', 'OMN', 'PAK', 'PAN', 'PER', 'PHL', 'PLW', 'PNG', 'POL', 'PRI', 'PRT', 'PRY', 'PSE', 'PYF', 'QAT', 'ROU', 'RUS', 'RWA', \\\n",
    "         'SAU', 'SDN', 'SEN', 'SGP', 'SLB', 'SLE', 'SLV', 'SMR', 'SOM', 'SRB', 'SSD', 'STP', 'SUR', 'SVK', 'SVN', 'SWE', 'SWZ', 'SXM',\\\n",
    "         'SYC', 'SYR', 'TCA', 'TCD', 'TGO', 'THA', 'TJK', 'TKM', 'TLS', 'TON', 'TTO', 'TUN', 'TUR', 'TUV', 'TWN', 'TZA', 'UGA', 'UKR', \\\n",
    "         'URY', 'USA', 'UZB', 'VCT', 'VEN', 'VIR', 'VNM', 'VUT', 'WSM', 'YEM', 'ZAF', 'ZMB', 'ZWE', 'ZAF']\n",
    "#iso3list=['USA']\n",
    "#Loop over indicator list\n",
    "for indicator in indicatorlist:\n",
    "    \n",
    "    #Loop over country list (iso3)\n",
    "    for iso3 in iso3list:\n",
    "\n",
    "        #iso codes dictionnary (contains income group code and region code associated to country code)\n",
    "        region_dict= {\"ASM\":\"UMC,EAS\",\"AUS\":\"OEC,EAS\",\"BRN\":\"NOC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"NOC,EAS\",\"HKG\":\"NOC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"OEC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"OEC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"NOC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"NOC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"NOC,EAS\",\"NZL\":\"OEC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"NOC,EAS\",\"SGP\":\"NOC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"NOC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"\":\"LMC,ECS\",\"ALB\":\"UMC,ECS\",\"AND\":\"NOC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"OEC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"OEC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"OEC,ECS\",\"CHI\":\"NOC,ECS\",\"CYP\":\"NOC,ECS\",\"CZE\":\"OEC,ECS\",\"DEU\":\"OEC,ECS\",\"DNK\":\"OEC,ECS\",\"ESP\":\"OEC,ECS\",\"EST\":\"OEC,ECS\",\"FIN\":\"OEC,ECS\",\"FRA\":\"OEC,ECS\",\"FRO\":\"NOC,ECS\",\"GBR\":\"OEC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"OEC,ECS\",\"GRL\":\"NOC,ECS\",\"HRV\":\"NOC,ECS\",\"HUN\":\"OEC,ECS\",\"IMN\":\"NOC,ECS\",\"IRL\":\"OEC,ECS\",\"ISL\":\"OEC,ECS\",\"ITA\":\"OEC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"NOC,ECS\",\"LTU\":\"NOC,ECS\",\"LUX\":\"OEC,ECS\",\"LVA\":\"NOC,ECS\",\"MCO\":\"NOC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"OEC,ECS\",\"NOR\":\"OEC,ECS\",\"POL\":\"OEC,ECS\",\"PRT\":\"OEC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"NOC,ECS\",\"SMR\":\"NOC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"OEC,ECS\",\"SVN\":\"OEC,ECS\",\"SWE\":\"OEC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"NOC,LCN\",\"ARG\":\"NOC,LCN\",\"ATG\":\"NOC,LCN\",\"BHS\":\"NOC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"NOC,LCN\",\"CHL\":\"OEC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"NOC,LCN\",\"CYM\":\"NOC,LCN\",\"DMA\":\"UMC,LCN\",\"DOM\":\"UMC,LCN\",\"ECU\":\"UMC,LCN\",\"GRD\":\"UMC,LCN\",\"GTM\":\"LMC,LCN\",\"GUY\":\"LMC,LCN\",\"HND\":\"LMC,LCN\",\"HTI\":\"LIC,LCN\",\"JAM\":\"UMC,LCN\",\"KNA\":\"NOC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"NOC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"NOC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"NOC,LCN\",\"TCA\":\"NOC,LCN\",\"TTO\":\"NOC,LCN\",\"URY\":\"NOC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"NOC,LCN\",\"VIR\":\"NOC,LCN\",\"ARE\":\"NOC,MEA\",\"BHR\":\"NOC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"OEC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"NOC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"NOC,MEA\",\"OMN\":\"NOC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"NOC,MEA\",\"SAU\":\"NOC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"NOC,NAC\",\"CAN\":\"OEC,NAC\",\"USA\":\"OEC,NAC\",\"AFG\":\"LIC,SAS\",\"BGD\":\"LMC,SAS\",\"BTN\":\"LMC,SAS\",\"IND\":\"LMC,SAS\",\"LKA\":\"LMC,SAS\",\"MDV\":\"UMC,SAS\",\"NPL\":\"LIC,SAS\",\"PAK\":\"LMC,SAS\",\"AGO\":\"UMC,SSF\",\"BDI\":\"LIC,SSF\",\"BEN\":\"LIC,SSF\",\"BFA\":\"LIC,SSF\",\"BWA\":\"UMC,SSF\",\"CAF\":\"LIC,SSF\",\"CIV\":\"LMC,SSF\",\"CMR\":\"LMC,SSF\",\"COD\":\"LIC,SSF\",\"COG\":\"LMC,SSF\",\"COM\":\"LIC,SSF\",\"CPV\":\"LMC,SSF\",\"ERI\":\"LIC,SSF\",\"ETH\":\"LIC,SSF\",\"GAB\":\"UMC,SSF\",\"GHA\":\"LMC,SSF\",\"GIN\":\"LIC,SSF\",\"GMB\":\"LIC,SSF\",\"GNB\":\"LIC,SSF\",\"GNQ\":\"NOC,SSF\",\"KEN\":\"LMC,SSF\",\"LBR\":\"LIC,SSF\",\"LSO\":\"LMC,SSF\",\"MDG\":\"LIC,SSF\",\"MLI\":\"LIC,SSF\",\"MOZ\":\"LIC,SSF\",\"MRT\":\"LMC,SSF\",\"MUS\":\"UMC,SSF\",\"MWI\":\"LIC,SSF\",\"NAM\":\"UMC,SSF\",\"NER\":\"LIC,SSF\",\"NGA\":\"LMC,SSF\",\"RWA\":\"LIC,SSF\",\"SDN\":\"LMC,SSF\",\"SEN\":\"LMC,SSF\",\"SLE\":\"LIC,SSF\",\"SOM\":\"LIC,SSF\",\"SSD\":\"LIC,SSF\",\"STP\":\"LMC,SSF\",\"SWZ\":\"LMC,SSF\",\"SYC\":\"NOC,SSF\",\"TCD\":\"LIC,SSF\",\"TGO\":\"LIC,SSF\",\"TZA\":\"LIC,SSF\",\"UGA\":\"LIC,SSF\",\"ZAF\":\"UMC,SSF\",\"ZMB\":\"LMC,SSF\",\"ZWE\":\"LIC,SSF\"}\n",
    "        \n",
    "        #Explore region dictionnary to store income and regional code associated to country code (iso3)  \n",
    "        for iso,region_iso in region_dict.items(): \n",
    "            if iso3==iso:\n",
    "                item=region_iso.split(',') #split the 2nd element of the dict by (,)\n",
    "                iso3inc=item[0] # store income code \n",
    "                iso3region=item[1] # store region code \n",
    "\n",
    "        #create empty arrays\n",
    "        category,serie,serie_inc,serie_region,serie_world=[],[],[],[],[]\n",
    "\n",
    "        #create the series\n",
    "        for t in range(-duration,1):    \n",
    "            category.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie.append('json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_inc.append('json[\"'+indicator+'\"][\"'+iso3inc+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_region.append('json[\"'+indicator+'\"][\"'+iso3region+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_world.append('json[\"'+indicator+'\"][\"WLD\"][json[\"'+indicator+'\"][\"WLD\"][\"YearMax\"]+' + str(t)+']',)\n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie=','.join(serie)\n",
    "        serie_inc=','.join(serie_inc)\n",
    "        serie_region=','.join(serie_region)\n",
    "        serie_world=','.join(serie_world)\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'dataset':dataset,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region, 'indicator':indicator, 'category':category, 'serie':serie,'serie_inc':serie_inc,'serie_region':serie_region ,'serie_world':serie_world}\n",
    "\n",
    "        #Starting  writing HTML code\n",
    "        html='''\n",
    "        <!DOCTYPE html>\n",
    "        <html><head>\n",
    "        <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript'>\n",
    "\n",
    "        $(window).load(function() {\n",
    "\n",
    "           var data = \"$dataset$iso3.json\"; // link to the dataset\n",
    "\n",
    "           $.getJSON(data, function(json) {\n",
    "             $(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                //plotOptions: { column: { colorByPoint: true } },\n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text: json[\"$indicator\"][\"label\"], x: -20 //center\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"], x: -20\n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1,labels: {step:5},\n",
    "                   categories: [ $category] //python created array \n",
    "                 },\n",
    "                 yAxis: {\n",
    "                   title: {\n",
    "                     text: json[\"$indicator\"][\"label\"]\n",
    "                     \n",
    "                   },\n",
    "                   plotLines: [{\n",
    "                     value: 0,\n",
    "                     width: 1,\n",
    "                     color: '#808080'\n",
    "                   }]\n",
    "                 },\n",
    "                 tooltip: {\n",
    "                   valueSuffix: '',\n",
    "                   valueDecimals: 2\n",
    "                 },\n",
    "                   series: [{\n",
    "                   name: json[\"$iso3\"][\"country\"],\n",
    "                   data: [$serie]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"incomegroup\"],\n",
    "                   data: [$serie_inc]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"region\"],\n",
    "                   data: [ $serie_region]\n",
    "                 }, {\n",
    "                   name: 'World',\n",
    "                   data: [$serie_world]\n",
    "                 }]\n",
    "               });\n",
    "             });\n",
    "           });\n",
    "         });\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <div id=\"container\" style=\"width: 100%; height: 380px; margin: 0 auto\"></div>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/TimeSerie_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\",'w')\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        #generate an html file\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         ! Done => print chart address, display in ipython\n",
    "#=====================================================================================================================\n",
    "HTML('<iframe src=\"'+\"dataviz/TimeSerie_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"400px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## &#9733; Line chart &#9733;: <span style=\"color:#285c8c\">Two variables time series</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "indicatorlist='SL.EMP.INSV.FE.ZS;SL.TLF.CACT.FE.ZS','SL.UEM.TOTL.FE.ZS;SL.UEM.TOTL.MA.ZS' #indicator code by couples i.e. \";\"\n",
    "duration=10 #length of the time serie\n",
    "duration_end=0 #-3 #Value substracted from YearMax -1 in the time serie eg \n",
    "color = ['#bc456b', '#e2a1b5','#355ca8',  '#b7bee5']\n",
    "dataset=\"data/WB_WDI2_\" #IMF_WEO\n",
    "#========================================================================================================================\n",
    "\n",
    "\n",
    "iso3list=['ABW', 'AFG', 'AGO', 'ALB', 'AND', 'ARE', 'ARG', 'ARM', 'ASM', 'ATG', 'AUS', 'AUT', 'AZE', 'BDI', 'BEL', 'BEN', 'BFA', 'BGD', \\\n",
    "         'BGR', 'BHR', 'BHS', 'BIH', 'BLR', 'BLZ', 'BMU', 'BOL', 'BRA', 'BRB', 'BRN', 'BTN', 'BWA', 'CAF', 'CAN', 'CHE', 'CHL', 'CHN', \\\n",
    "         'CIV', 'CMR', 'COD', 'COG', 'COL', 'COM', 'CPV', 'CRI', 'CUB', 'CUW', 'CYM', 'CYP', 'CZE', 'DEU', 'DJI', 'DMA', 'DNK', 'DOM', \\\n",
    "         'DZA', 'ECU', 'EGY', 'ERI', 'ESP', 'EST', 'ETH', 'FIN', 'FJI', 'FRA', 'FSM', 'GAB', 'GBR', 'GEO', 'GHA', 'GIN', 'GMB', \\\n",
    "         'GNB', 'GNQ', 'GRC', 'GRD', 'GRL', 'GTM', 'GUM', 'GUY', 'HKG', 'HND', 'HRV', 'HTI', 'HUN', 'IDN', 'IMN', 'IND', 'IRL', 'IRN', \\\n",
    "         'IRQ', 'ISL', 'ISR', 'ITA', 'JAM', 'JOR', 'JPN', 'KAZ', 'KEN', 'KGZ', 'KHM', 'KNA', 'KOR', 'KWT', 'LAO', 'LBN', 'LBR', 'LBY', \\\n",
    "         'LCA', 'LIE', 'LKA', 'LSO', 'LTU', 'LUX', 'LVA', 'MAC', 'MAF', 'MAR', 'MCO', 'MDA', 'MDG', 'MDV', 'MEX', 'MHL', 'MKD', 'MLI', \\\n",
    "         'MLT', 'MMR', 'MNE', 'MNG', 'MNP', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYS', 'NAM', 'NCL', 'NER', 'NGA', 'NIC', 'NLD', 'NOR', 'NPL', \\\n",
    "         'NZL', 'OMN', 'PAK', 'PAN', 'PER', 'PHL', 'PLW', 'PNG', 'POL', 'PRI', 'PRT', 'PRY', 'PSE', 'PYF', 'QAT', 'ROU', 'RUS', 'RWA', \\\n",
    "         'SAU', 'SDN', 'SEN', 'SGP', 'SLB', 'SLE', 'SLV', 'SMR', 'SOM', 'SRB', 'SSD', 'STP', 'SUR', 'SVK', 'SVN', 'SWE', 'SWZ', 'SXM',\\\n",
    "         'SYC', 'SYR', 'TCA', 'TCD', 'TGO', 'THA', 'TJK', 'TKM', 'TLS', 'TON', 'TTO', 'TUN', 'TUR', 'TUV', 'TWN', 'TZA', 'UGA', 'UKR', \\\n",
    "         'URY', 'USA', 'UZB', 'VCT', 'VEN', 'VIR', 'VNM', 'VUT', 'WSM', 'YEM', 'ZAF', 'ZMB', 'ZWE']\n",
    "#iso3list=['COL']\n",
    "for ind in indicatorlist:\n",
    "    item=ind.split(';')\n",
    "    indicator1=item[0]\n",
    "    indicator2=item[1]    \n",
    "    \n",
    "    for iso3 in iso3list:\n",
    "\n",
    "        #iso codes dictionnary (contains income group code and region code associated to country code)\n",
    "        region_dict= {\"ASM\":\"UMC,EAS\",\"AUS\":\"OEC,EAS\",\"BRN\":\"NOC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"NOC,EAS\",\"HKG\":\"NOC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"OEC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"OEC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"NOC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"NOC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"NOC,EAS\",\"NZL\":\"OEC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"NOC,EAS\",\"SGP\":\"NOC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"NOC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"\":\"LMC,ECS\",\"ALB\":\"UMC,ECS\",\"AND\":\"NOC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"OEC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"OEC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"OEC,ECS\",\"CHI\":\"NOC,ECS\",\"CYP\":\"NOC,ECS\",\"CZE\":\"OEC,ECS\",\"DEU\":\"OEC,ECS\",\"DNK\":\"OEC,ECS\",\"ESP\":\"OEC,ECS\",\"EST\":\"OEC,ECS\",\"FIN\":\"OEC,ECS\",\"FRA\":\"OEC,ECS\",\"FRO\":\"NOC,ECS\",\"GBR\":\"OEC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"OEC,ECS\",\"GRL\":\"NOC,ECS\",\"HRV\":\"NOC,ECS\",\"HUN\":\"OEC,ECS\",\"IMN\":\"NOC,ECS\",\"IRL\":\"OEC,ECS\",\"ISL\":\"OEC,ECS\",\"ITA\":\"OEC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"NOC,ECS\",\"LTU\":\"NOC,ECS\",\"LUX\":\"OEC,ECS\",\"LVA\":\"NOC,ECS\",\"MCO\":\"NOC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"OEC,ECS\",\"NOR\":\"OEC,ECS\",\"POL\":\"OEC,ECS\",\"PRT\":\"OEC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"NOC,ECS\",\"SMR\":\"NOC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"OEC,ECS\",\"SVN\":\"OEC,ECS\",\"SWE\":\"OEC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"NOC,LCN\",\"ARG\":\"NOC,LCN\",\"ATG\":\"NOC,LCN\",\"BHS\":\"NOC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"NOC,LCN\",\"CHL\":\"OEC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"NOC,LCN\",\"CYM\":\"NOC,LCN\",\"DMA\":\"UMC,LCN\",\"DOM\":\"UMC,LCN\",\"ECU\":\"UMC,LCN\",\"GRD\":\"UMC,LCN\",\"GTM\":\"LMC,LCN\",\"GUY\":\"LMC,LCN\",\"HND\":\"LMC,LCN\",\"HTI\":\"LIC,LCN\",\"JAM\":\"UMC,LCN\",\"KNA\":\"NOC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"NOC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"NOC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"NOC,LCN\",\"TCA\":\"NOC,LCN\",\"TTO\":\"NOC,LCN\",\"URY\":\"NOC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"NOC,LCN\",\"VIR\":\"NOC,LCN\",\"ARE\":\"NOC,MEA\",\"BHR\":\"NOC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"OEC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"NOC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"NOC,MEA\",\"OMN\":\"NOC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"NOC,MEA\",\"SAU\":\"NOC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"NOC,NAC\",\"CAN\":\"OEC,NAC\",\"USA\":\"OEC,NAC\",\"AFG\":\"LIC,SAS\",\"BGD\":\"LMC,SAS\",\"BTN\":\"LMC,SAS\",\"IND\":\"LMC,SAS\",\"LKA\":\"LMC,SAS\",\"MDV\":\"UMC,SAS\",\"NPL\":\"LIC,SAS\",\"PAK\":\"LMC,SAS\",\"AGO\":\"UMC,SSF\",\"BDI\":\"LIC,SSF\",\"BEN\":\"LIC,SSF\",\"BFA\":\"LIC,SSF\",\"BWA\":\"UMC,SSF\",\"CAF\":\"LIC,SSF\",\"CIV\":\"LMC,SSF\",\"CMR\":\"LMC,SSF\",\"COD\":\"LIC,SSF\",\"COG\":\"LMC,SSF\",\"COM\":\"LIC,SSF\",\"CPV\":\"LMC,SSF\",\"ERI\":\"LIC,SSF\",\"ETH\":\"LIC,SSF\",\"GAB\":\"UMC,SSF\",\"GHA\":\"LMC,SSF\",\"GIN\":\"LIC,SSF\",\"GMB\":\"LIC,SSF\",\"GNB\":\"LIC,SSF\",\"GNQ\":\"NOC,SSF\",\"KEN\":\"LMC,SSF\",\"LBR\":\"LIC,SSF\",\"LSO\":\"LMC,SSF\",\"MDG\":\"LIC,SSF\",\"MLI\":\"LIC,SSF\",\"MOZ\":\"LIC,SSF\",\"MRT\":\"LMC,SSF\",\"MUS\":\"UMC,SSF\",\"MWI\":\"LIC,SSF\",\"NAM\":\"UMC,SSF\",\"NER\":\"LIC,SSF\",\"NGA\":\"LMC,SSF\",\"RWA\":\"LIC,SSF\",\"SDN\":\"LMC,SSF\",\"SEN\":\"LMC,SSF\",\"SLE\":\"LIC,SSF\",\"SOM\":\"LIC,SSF\",\"SSD\":\"LIC,SSF\",\"STP\":\"LMC,SSF\",\"SWZ\":\"LMC,SSF\",\"SYC\":\"NOC,SSF\",\"TCD\":\"LIC,SSF\",\"TGO\":\"LIC,SSF\",\"TZA\":\"LIC,SSF\",\"UGA\":\"LIC,SSF\",\"ZAF\":\"UMC,SSF\",\"ZMB\":\"LMC,SSF\",\"ZWE\":\"LIC,SSF\"}\n",
    "\n",
    "        for iso,region_iso in region_dict.items(): \n",
    "            if iso3==iso:\n",
    "                item=region_iso.split(',')\n",
    "                iso3inc=item[0]\n",
    "                iso3region=item[1]\n",
    "\n",
    "        #create empty arrays\n",
    "        category,serie1,serie2,serie1_region,serie2_region=[],[],[],[],[]\n",
    "\n",
    "        #create the series (use negative number to go frop yearmax to yearmax - n)\n",
    "        for t in range(-duration,duration_end):    \n",
    "            category.append('json[\"'+indicator1+'\"][\"'+iso3+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie1.append('json[\"'+indicator1+'\"][\"'+iso3+'\"][json[\"'+indicator1+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2.append('json[\"'+indicator2+'\"][\"'+iso3+'\"][json[\"'+indicator2+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie1_region.append('json[\"'+indicator1+'\"][\"'+iso3region+'\"][json[\"'+indicator1+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2_region.append('json[\"'+indicator2+'\"][\"'+iso3region+'\"][json[\"'+indicator1+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "\n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie1=','.join(serie1)\n",
    "        serie2=','.join(serie2)\n",
    "        serie1_region=','.join(serie1_region)\n",
    "        serie2_region=','.join(serie2_region)\n",
    "        \n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'dataset':dataset,'color':color,'iso3':iso3,'iso3region':iso3region,'indicator1':indicator1,'indicator2':indicator2,\\\n",
    "                 'category':category, 'serie1':serie1,'serie2':serie2,'serie1_region':serie1_region,'serie2_region':serie2_region}\n",
    "\n",
    "        #Starting HTML code\n",
    "        html='''\n",
    "        <!DOCTYPE html>\n",
    "        <html><head>\n",
    "        <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript'>\n",
    "\n",
    "        $(window).load(function() {\n",
    "\n",
    "           var data = \"$dataset$iso3.json\"; // link to the dataset\n",
    "\n",
    "           $.getJSON(data, function(json) {\n",
    "             $(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                //plotOptions: { column: { colorByPoint: true } },\n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text: json[\"$indicator1\"][\"label\"] +' <br> '+json[\"$indicator2\"][\"label\"], x: -20, \n",
    "                   style: {\"fontSize\": \"14px\"}\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"], x: -20, \n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1,\n",
    "                   categories: [ $category], //python created array\n",
    "                   \n",
    "                 },\n",
    "                 yAxis: {\n",
    "                   title: {\n",
    "                     text:\"\"\n",
    "                   },\n",
    "                   plotLines: [{\n",
    "                     value: 0,\n",
    "                     width: 1,\n",
    "                     color: '#808080'\n",
    "                   }]\n",
    "                 },\n",
    "                  legend: {\n",
    "                  itemStyle: {fontSize: '10px',fontWeight: 'normal'}                \n",
    "            },\n",
    "                 tooltip: {\n",
    "                   valueSuffix: '',\n",
    "                   valueDecimals: 2\n",
    "                 },\n",
    "                 \n",
    "                   series: [{\n",
    "                   name: json[\"$iso3\"][\"country\"] + \" - \" + json[\"$indicator1\"][\"label\"],\n",
    "                   data: [$serie1]\n",
    "                 }, {\n",
    "                     name:  json[\"$iso3\"][\"region\"] + \" - \" + json[\"$indicator1\"][\"label\"],\n",
    "                   data: [ $serie1_region]\n",
    "                 }, {\n",
    "                 name: json[\"$iso3\"][\"country\"] + \" - \" + json[\"$indicator2\"][\"label\"],\n",
    "                   data: [$serie2]\n",
    "                 }, {\n",
    "                    name: json[\"$iso3\"][\"region\"]+ \" - \" + json[\"$indicator2\"][\"label\"],\n",
    "                   data: [ $serie2_region]\n",
    "                 }]\n",
    "               });\n",
    "             });\n",
    "           });\n",
    "         });\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <div id=\"container\" style=\"width: 100%; height: 425px;; margin: 0 auto\"></div>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/TimeSerie_\"+indicator1.replace('.','_')+'_&_'+indicator2.replace('.','_')+\"_\"+iso3+\".html\",'w')\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        #generate an html file\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         ! Done => print chart address, display in ipython\n",
    "#=====================================================================================================================\n",
    "\n",
    "HTML('<iframe src=\"'+\"dataviz/TimeSerie_\"+indicator1.replace('.','_')+'_&_'+indicator2.replace('.','_')+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## &#9733; highchart &#9733;: <span style=\"color:#285c8c\">Radar chart</span>\n",
    " still to be done: add yearMax value to each tooltip"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "iso3list=['FRA']\n",
    "#the first item of the the lists below is the title and filename\n",
    "#indicator code by couples i.e. \";\"\n",
    "indicatorlist=['Biodiversité;EN.HPT.THRD.NO;EN.FSH.THRD.NO;EN.MAM.THRD.NO',\\\n",
    "                'Biodiversité;EN.HPT.THRD.NO;EN.FSH.THRD.NO;EN.MAM.THRD.NO']\n",
    "\n",
    "color = ['#bc456b', '#e2a1b5','#355ca8','#b7bee5']\n",
    "dataset=\"data/WB_WDI2_\"\n",
    "#========================================================================================================================\n",
    "iso3list=['ABW', 'AFG', 'AGO', 'ALB', 'AND', 'ARE', 'ARG', 'ARM', 'ASM', 'ATG', 'AUS', 'AUT', 'AZE', 'BDI', 'BEL', 'BEN', 'BFA', 'BGD', \\\n",
    "         'BGR', 'BHR', 'BHS', 'BIH', 'BLR', 'BLZ', 'BMU', 'BOL', 'BRA', 'BRB', 'BRN', 'BTN', 'BWA', 'CAF', 'CAN', 'CHE', 'CHL', 'CHN', \\\n",
    "         'CIV', 'CMR', 'COD', 'COG', 'COL', 'COM', 'CPV', 'CRI', 'CUB', 'CUW', 'CYM', 'CYP', 'CZE', 'DEU', 'DJI', 'DMA', 'DNK', 'DOM', \\\n",
    "         'DZA', 'ECU', 'EGY', 'ERI', 'ESP', 'EST', 'ETH', 'FIN', 'FJI', 'FRA', 'FSM', 'GAB', 'GBR', 'GEO', 'GHA', 'GIN', 'GMB', \\\n",
    "         'GNB', 'GNQ', 'GRC', 'GRD', 'GRL', 'GTM', 'GUM', 'GUY', 'HKG', 'HND', 'HRV', 'HTI', 'HUN', 'IDN', 'IMN', 'IND', 'IRL', 'IRN', \\\n",
    "         'IRQ', 'ISL', 'ISR', 'ITA', 'JAM', 'JOR', 'JPN', 'KAZ', 'KEN', 'KGZ', 'KHM', 'KNA', 'KOR', 'KWT', 'LAO', 'LBN', 'LBR', 'LBY', \\\n",
    "         'LCA', 'LIE', 'LKA', 'LSO', 'LTU', 'LUX', 'LVA', 'MAC', 'MAF', 'MAR', 'MCO', 'MDA', 'MDG', 'MDV', 'MEX', 'MHL', 'MKD', 'MLI', \\\n",
    "         'MLT', 'MMR', 'MNE', 'MNG', 'MNP', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYS', 'NAM', 'NCL', 'NER', 'NGA', 'NIC', 'NLD', 'NOR', 'NPL', \\\n",
    "         'NZL', 'OMN', 'PAK', 'PAN', 'PER', 'PHL', 'PLW', 'PNG', 'POL', 'PRI', 'PRT', 'PRY', 'PSE', 'PYF', 'QAT', 'ROU', 'RUS', 'RWA', \\\n",
    "         'SAU', 'SDN', 'SEN', 'SGP', 'SLB', 'SLE', 'SLV', 'SMR', 'SOM', 'SRB', 'SSD', 'STP', 'SUR', 'SVK', 'SVN', 'SWE', 'SWZ', 'SXM',\\\n",
    "         'SYC', 'SYR', 'TCA', 'TCD', 'TGO', 'THA', 'TJK', 'TKM', 'TLS', 'TON', 'TTO', 'TUN', 'TUR', 'TUV', 'TWN', 'TZA', 'UGA', 'UKR', \\\n",
    "         'URY', 'USA', 'UZB', 'VCT', 'VEN', 'VIR', 'VNM', 'VUT', 'WSM', 'YEM', 'ZAF', 'ZMB', 'ZWE','ZAF']\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    ind=indicator.split(';')\n",
    "    indlenght=len(ind)\n",
    "    item=indicator.split(';')\n",
    "    title=item[0]\n",
    "    print(title+': Done !')\n",
    " \n",
    "    #count the number of var in each serie, assign names i.e. indicator1... indicatorn\n",
    "    for var in range (1,indlenght):\n",
    "        vars()['indicator'+str(var)]=item[var]\n",
    "\n",
    "    for iso3 in iso3list:\n",
    "\n",
    "        #iso codes dictionnary (contains income group code and region code associated to country code)\n",
    "        region_dict= {\"ASM\":\"UMC,EAS\",\"AUS\":\"OEC,EAS\",\"BRN\":\"NOC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"NOC,EAS\",\"HKG\":\"NOC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"OEC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"OEC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"NOC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"NOC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"NOC,EAS\",\"NZL\":\"OEC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"NOC,EAS\",\"SGP\":\"NOC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"NOC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"\":\"LMC,ECS\",\"ALB\":\"UMC,ECS\",\"AND\":\"NOC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"OEC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"OEC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"OEC,ECS\",\"CHI\":\"NOC,ECS\",\"CYP\":\"NOC,ECS\",\"CZE\":\"OEC,ECS\",\"DEU\":\"OEC,ECS\",\"DNK\":\"OEC,ECS\",\"ESP\":\"OEC,ECS\",\"EST\":\"OEC,ECS\",\"FIN\":\"OEC,ECS\",\"FRA\":\"OEC,ECS\",\"FRO\":\"NOC,ECS\",\"GBR\":\"OEC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"OEC,ECS\",\"GRL\":\"NOC,ECS\",\"HRV\":\"NOC,ECS\",\"HUN\":\"OEC,ECS\",\"IMN\":\"NOC,ECS\",\"IRL\":\"OEC,ECS\",\"ISL\":\"OEC,ECS\",\"ITA\":\"OEC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"NOC,ECS\",\"LTU\":\"NOC,ECS\",\"LUX\":\"OEC,ECS\",\"LVA\":\"NOC,ECS\",\"MCO\":\"NOC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"OEC,ECS\",\"NOR\":\"OEC,ECS\",\"POL\":\"OEC,ECS\",\"PRT\":\"OEC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"NOC,ECS\",\"SMR\":\"NOC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"OEC,ECS\",\"SVN\":\"OEC,ECS\",\"SWE\":\"OEC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"NOC,LCN\",\"ARG\":\"NOC,LCN\",\"ATG\":\"NOC,LCN\",\"BHS\":\"NOC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"NOC,LCN\",\"CHL\":\"OEC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"NOC,LCN\",\"CYM\":\"NOC,LCN\",\"DMA\":\"UMC,LCN\",\"DOM\":\"UMC,LCN\",\"ECU\":\"UMC,LCN\",\"GRD\":\"UMC,LCN\",\"GTM\":\"LMC,LCN\",\"GUY\":\"LMC,LCN\",\"HND\":\"LMC,LCN\",\"HTI\":\"LIC,LCN\",\"JAM\":\"UMC,LCN\",\"KNA\":\"NOC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"NOC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"NOC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"NOC,LCN\",\"TCA\":\"NOC,LCN\",\"TTO\":\"NOC,LCN\",\"URY\":\"NOC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"NOC,LCN\",\"VIR\":\"NOC,LCN\",\"ARE\":\"NOC,MEA\",\"BHR\":\"NOC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"OEC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"NOC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"NOC,MEA\",\"OMN\":\"NOC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"NOC,MEA\",\"SAU\":\"NOC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"NOC,NAC\",\"CAN\":\"OEC,NAC\",\"USA\":\"OEC,NAC\",\"AFG\":\"LIC,SAS\",\"BGD\":\"LMC,SAS\",\"BTN\":\"LMC,SAS\",\"IND\":\"LMC,SAS\",\"LKA\":\"LMC,SAS\",\"MDV\":\"UMC,SAS\",\"NPL\":\"LIC,SAS\",\"PAK\":\"LMC,SAS\",\"AGO\":\"UMC,SSF\",\"BDI\":\"LIC,SSF\",\"BEN\":\"LIC,SSF\",\"BFA\":\"LIC,SSF\",\"BWA\":\"UMC,SSF\",\"CAF\":\"LIC,SSF\",\"CIV\":\"LMC,SSF\",\"CMR\":\"LMC,SSF\",\"COD\":\"LIC,SSF\",\"COG\":\"LMC,SSF\",\"COM\":\"LIC,SSF\",\"CPV\":\"LMC,SSF\",\"ERI\":\"LIC,SSF\",\"ETH\":\"LIC,SSF\",\"GAB\":\"UMC,SSF\",\"GHA\":\"LMC,SSF\",\"GIN\":\"LIC,SSF\",\"GMB\":\"LIC,SSF\",\"GNB\":\"LIC,SSF\",\"GNQ\":\"NOC,SSF\",\"KEN\":\"LMC,SSF\",\"LBR\":\"LIC,SSF\",\"LSO\":\"LMC,SSF\",\"MDG\":\"LIC,SSF\",\"MLI\":\"LIC,SSF\",\"MOZ\":\"LIC,SSF\",\"MRT\":\"LMC,SSF\",\"MUS\":\"UMC,SSF\",\"MWI\":\"LIC,SSF\",\"NAM\":\"UMC,SSF\",\"NER\":\"LIC,SSF\",\"NGA\":\"LMC,SSF\",\"RWA\":\"LIC,SSF\",\"SDN\":\"LMC,SSF\",\"SEN\":\"LMC,SSF\",\"SLE\":\"LIC,SSF\",\"SOM\":\"LIC,SSF\",\"SSD\":\"LIC,SSF\",\"STP\":\"LMC,SSF\",\"SWZ\":\"LMC,SSF\",\"SYC\":\"NOC,SSF\",\"TCD\":\"LIC,SSF\",\"TGO\":\"LIC,SSF\",\"TZA\":\"LIC,SSF\",\"UGA\":\"LIC,SSF\",\"ZAF\":\"UMC,SSF\",\"ZMB\":\"LMC,SSF\",\"ZWE\":\"LIC,SSF\"}\n",
    "\n",
    "        for iso,region_iso in region_dict.items(): \n",
    "             if iso3==iso:\n",
    "                item=region_iso.split(',')\n",
    "                iso3inc=item[0]\n",
    "                iso3region=item[1]\n",
    "\n",
    "        #create empty arrays\n",
    "        category,serie,serie_region,serie_inc, serie_world=[],[],[],[],[]\n",
    "\n",
    "        #create the series\n",
    "        for i in range(1,indlenght):    \n",
    "            serie.append('json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3+'\"][json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3+'\"][\"YearMax\"]]',)\n",
    "            serie_region.append('json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3region+'\"][json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3region+'\"][\"YearMax\"]]',)\n",
    "            serie_inc.append('json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3inc+'\"][json[\"'+vars()['indicator'+str(i)]+'\"][\"'+iso3inc+'\"][\"YearMax\"]]',)\n",
    "            serie_world.append('json[\"'+vars()['indicator'+str(i)]+'\"][\"'+\"WLD\"+'\"][json[\"'+vars()['indicator'+str(i)]+'\"][\"'+\"WLD\"+'\"][\"YearMax\"]]',)\n",
    "            category.append('json[\"'+vars()['indicator'+str(i)]+'\"][\"label\"]')\n",
    "\n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie=','.join(serie)\n",
    "        serie_region=','.join(serie_region)\n",
    "        serie_inc=','.join(serie_inc)\n",
    "        serie_world=','.join(serie_world)\n",
    "        \n",
    "        #category=\"Nurses and midwives (per 1,000 people), Latest:2010','Physicians (per 1,000 people), Latest:2010','Hospital beds (per 1,000 people), Latest: 2010\"\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'dataset':dataset,'color':color,'title':title, 'iso3':iso3,'iso3region':iso3region,'indicator1':indicator1,'indicator2':indicator2,'category':category, 'serie_world':serie_world,'serie_region':serie_region, 'serie_inc':serie_inc, 'serie':serie, }#,'serie2':serie2,'serie1_region':serie1_region,'serie2_region':serie2_region}\n",
    "\n",
    "        #Starting HTML code\n",
    "        html= '''\n",
    "            <!DOCTYPE html>\n",
    "            <html><head>\n",
    "            <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "            <title>Country Dashboard </title>\n",
    "            <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "            <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>\n",
    "            <script type='text/javascript'>\n",
    "\n",
    "            $(window).load(function() {\n",
    "\n",
    "               var data = \"$dataset$iso3.json\"; // link to the dataset\n",
    "\n",
    "               $.getJSON(data, function(json) {\n",
    "                 $(function() {\n",
    "      window.chart = new Highcharts.Chart({\n",
    "        chart: {renderTo: 'containerRADAR', polar: true, type: 'line'},\n",
    "        title: {text: \"$title\",x: 0}, <!-- single quote has been replaced by double quote to allow displaying single quote in country name ony for highchart--> \n",
    "        subtitle: {text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"]+', Year: last availables'},\n",
    "        pane: {size: '90%'},\n",
    "\n",
    "       xAxis: {\n",
    "         categories:[$category],\n",
    "          tickmarkPlacement: 'on',lineWidth: 0\n",
    "        },\n",
    "\n",
    "       yAxis: {gridLineInterpolation: 'polygon', lineWidth: 0, tickInterval:500},\n",
    "        tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "        formatter: function() { return Highcharts.numberFormat(this.points, 2)}, \n",
    "\n",
    "        series: [{\n",
    "         type: \"area\",\n",
    "          name: json[\"$iso3\"][\"country\"],\n",
    "          data:  [$serie], \n",
    "          color: '#83b3ea',\n",
    "          pointPlacement: \"on\"\n",
    "        }, {\n",
    "          name: json[\"$iso3\"][\"region\"],\n",
    "          data: [$serie_region], \n",
    "          color: '#4572A7'\n",
    "        }, {\n",
    "          name: json[\"$iso3\"][\"incomegroup\"],\n",
    "          data: [$serie_inc], \n",
    "          color: '#c3d69b'\n",
    "        }, {\n",
    "          name: 'World',\n",
    "          data: [$serie_world],\n",
    "          color: '#f4bb90',\n",
    "          pointPlacement: 'on'\n",
    "        }]\n",
    "      });\n",
    "    });\n",
    "               });\n",
    "             });\n",
    "\n",
    "            </script></head><body>\n",
    "            <script src=\"highcharts.js\"></script>\n",
    "            <script src=\"exporting.js\"></script>\n",
    "            <script src=\"highcharts-more.js\"></script>\n",
    "            <div id=\"containerRADAR\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "          </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\",'w')\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        #generate an html file\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         ! Done => print chart address, display in ipython\n",
    "#=====================================================================================================================\n",
    "\n",
    "HTML('<iframe src=\"'+\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bar chart - HDI by gender"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html='''\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "  <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "   <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "  <style type=\"text/css\">\n",
    "    \n",
    "  </style>\n",
    "\n",
    "  <title></title>\n",
    "\n",
    "<script type='text/javascript'>//<![CDATA[\n",
    "\n",
    "$(function () {\n",
    "    $('#container').highcharts({\n",
    "\n",
    "        chart: {\n",
    "            type: 'column'\n",
    "        },\n",
    "\n",
    "        title: {\n",
    "            text: 'Human Development Index, by gender'\n",
    "        },\n",
    "\n",
    "        xAxis: {\n",
    "            categories: ['Country', 'Region', 'income', 'World']\n",
    "        },\n",
    "\n",
    "        yAxis: {\n",
    "            allowDecimals: false,\n",
    "            min: 0,\n",
    "            title: {\n",
    "                text: 'HDI value, last available'\n",
    "            }\n",
    "        },\n",
    "\n",
    "        tooltip: {\n",
    "            formatter: function () {\n",
    "                return '<b>' + this.x + '</b><br/>' +\n",
    "                    this.series.name + ': ' + this.y + '<br/>' +\n",
    "                    'Total: ' + this.point.stackTotal;\n",
    "            }\n",
    "        },\n",
    "\n",
    "        plotOptions: {\n",
    "            column: {\n",
    "                stacking: 'normal'\n",
    "            }\n",
    "        },\n",
    "\n",
    "        series: [{\n",
    "            name: 'HDI Men',\n",
    "            data: [5, 3, 4, 7],\n",
    "            stack: 'male'\n",
    "        }, {\n",
    "            name: 'HDI women',\n",
    "            data: [2, 5, 6, 2],\n",
    "            stack: 'female',\n",
    "            color:'rgb(236, 99, 90)'\n",
    "        },]\n",
    "    });\n",
    "});\n",
    "//]]> \n",
    "\n",
    "</script>\n",
    "  \n",
    "</head>\n",
    "\n",
    "<body>\n",
    "  <script src=\"highcharts.js\"></script>\n",
    "<script src=\"exporting.js\"></script>\n",
    "\n",
    "<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>\n",
    "  \n",
    "</body>\n",
    "\n",
    "</html>\n",
    "\n",
    "'''"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## &#9733; Maps &#9733;: <span style=\"color:#285c8c\">World and regional Maps</span>\n",
    "\n",
    "The following scripts draw 7 regional maps using *Highmaps* collection maps: http://code.highcharts.com/mapdata/\n",
    "\n",
    "+ Africa\n",
    "+ Asia\n",
    "+ Europe\n",
    "+ Middle East\n",
    "+ North America\n",
    "+ South America\n",
    "+ Oceania"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1. Map <span style=\"color:#285c8c\">Africa"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "africa_dict={\"AGO\":\"ao\",\"BFA\":\"bf\",\"BDI\":\"bi\",\"BEN\":\"bj\",\"BWA\":\"bw\",\"COD\":\"cd\",\"CAF\":\"cf\",\"COG\":\"cg\",\"CIV\":\"ci\",\"CMR\":\"cm\",\"CPV\":\"cv\",\"DJI\":\"dj\",\"DZA\":\"dz\",\"EGY\":\"eg\",\"ESH\":\"eh\",\"ERI\":\"er\",\"ETH\":\"et\",\"GAB\":\"ga\",\"GHA\":\"gh\",\"GMB\":\"gm\",\"GIN\":\"gn\",\"GNQ\":\"gq\",\"GNB\":\"gw\",\"KEN\":\"ke\",\"COM\":\"km\",\"LBR\":\"lr\",\"LSO\":\"ls\",\"LBY\":\"ly\",\"MAR\":\"ma\",\"MDG\":\"mg\",\"MLI\":\"ml\",\"MRT\":\"mr\",\"MUS\":\"mu\",\"MWI\":\"mw\",\"MOZ\":\"mz\",\"NAM\":\"na\",\"NER\":\"ne\",\"NGA\":\"ng\",\"RWA\":\"rw\",\"SYC\":\"sc\",\"SDN\":\"sd\",\"SLE\":\"sl\",\"SEN\":\"sn\",\"SOM\":\"so\",\"SSD\":\"ss\",\"STP\":\"st\",\"SXM\":\"sx\",\"SWZ\":\"sz\",\"TCD\":\"td\",\"TGO\":\"tg\",\"TUN\":\"tn\",\"TZA\":\"tz\",\"UGA\":\"ug\",\"ZAF\":\"za\",\"ZMB\":\"zm\",\"ZWE\":\"zw\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    print(indicator)\n",
    "    for iso3,iso2 in africa_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "   \n",
    "    Input0={'value_et': value_et,'value_cf': value_cf,'value_cd': value_cd,'value_zm': value_zm,'value_bw': value_bw,'value_lr': value_lr,'value_sz': value_sz,'value_bj': value_bj,'value_so': value_so,'value_gn': value_gn,'value_bf': value_bf,'value_ls': value_ls,'value_gh': value_gh,'value_ao': value_ao,'value_mw': value_mw,'value_ne': value_ne,'value_ly': value_ly,'value_tn': value_tn,'value_ng': value_ng,'value_tz': value_tz,'value_bi': value_bi,'value_ci': value_ci,'value_mg': value_mg,'value_sl': value_sl,'value_sc': value_sc,'value_mr': value_mr,'value_eh': value_eh,'value_rw': value_rw,'value_tg': value_tg,'value_ss': value_ss,'value_eg': value_eg,'value_zw': value_zw,'value_km': value_km,'value_mz': value_mz,'value_sd': value_sd,'value_td': value_td,'value_mu': value_mu,'value_cm': value_cm,'value_st': value_st,'value_gm': value_gm,'value_ke': value_ke,'value_cg': value_cg,'value_za': value_za,'value_ug': value_ug,'value_dj': value_dj,'value_ga': value_ga,'value_ma': value_ma,'value_sn': value_sn,'value_sx': value_sx,'value_na': value_na,'value_cv': value_cv,'value_dz': value_dz,'value_er': value_er,'value_gw': value_gw,'value_ml': value_ml,'value_gq': value_gq}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    \n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>Africa - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"DZA.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"DZA.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"DZA.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"AGO.json\", function(json) {value_ao = $value_ao; if (value_ao==undefined) {value_ao=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BFA.json\", function(json) {value_bf = $value_bf; if (value_bf==undefined) {value_bf=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BDI.json\", function(json) {value_bi = $value_bi; if (value_bi==undefined) {value_bi=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BEN.json\", function(json) {value_bj = $value_bj; if (value_bj==undefined) {value_bj=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BWA.json\", function(json) {value_bw = $value_bw; if (value_bw==undefined) {value_bw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"COD.json\", function(json) {value_cd = $value_cd; if (value_cd==undefined) {value_cd=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CAF.json\", function(json) {value_cf = $value_cf; if (value_cf==undefined) {value_cf=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"COG.json\", function(json) {value_cg = $value_cg; if (value_cg==undefined) {value_cg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CIV.json\", function(json) {value_ci = $value_ci; if (value_ci==undefined) {value_ci=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CMR.json\", function(json) {value_cm = $value_cm; if (value_cm==undefined) {value_cm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CPV.json\", function(json) {value_cv = $value_cv; if (value_cv==undefined) {value_cv=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DJI.json\", function(json) {value_dj = $value_dj; if (value_dj==undefined) {value_dj=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DZA.json\", function(json) {value_dz = $value_dz; if (value_dz==undefined) {value_dz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"EGY.json\", function(json) {value_eg = $value_eg; if (value_eg==undefined) {value_eg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ERI.json\", function(json) {value_er = $value_er; if (value_er==undefined) {value_er=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ETH.json\", function(json) {value_et = $value_et; if (value_et==undefined) {value_et=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GAB.json\", function(json) {value_ga = $value_ga; if (value_ga==undefined) {value_ga=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GHA.json\", function(json) {value_gh = $value_gh; if (value_gh==undefined) {value_gh=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GMB.json\", function(json) {value_gm = $value_gm; if (value_gm==undefined) {value_gm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GIN.json\", function(json) {value_gn = $value_gn; if (value_gn==undefined) {value_gn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GNQ.json\", function(json) {value_gq = $value_gq; if (value_gq==undefined) {value_gq=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GNB.json\", function(json) {value_gw = $value_gw; if (value_gw==undefined) {value_gw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KEN.json\", function(json) {value_ke = $value_ke; if (value_ke==undefined) {value_ke=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"COM.json\", function(json) {value_km = $value_km; if (value_km==undefined) {value_km=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LBR.json\", function(json) {value_lr = $value_lr; if (value_lr==undefined) {value_lr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LSO.json\", function(json) {value_ls = $value_ls; if (value_ls==undefined) {value_ls=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LBY.json\", function(json) {value_ly = $value_ly; if (value_ly==undefined) {value_ly=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MAR.json\", function(json) {value_ma = $value_ma; if (value_ma==undefined) {value_ma=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MDG.json\", function(json) {value_mg = $value_mg; if (value_mg==undefined) {value_mg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MLI.json\", function(json) {value_ml = $value_ml; if (value_ml==undefined) {value_ml=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MRT.json\", function(json) {value_mr = $value_mr; if (value_mr==undefined) {value_mr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MUS.json\", function(json) {value_mu = $value_mu; if (value_mu==undefined) {value_mu=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MWI.json\", function(json) {value_mw = $value_mw; if (value_mw==undefined) {value_mw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MOZ.json\", function(json) {value_mz = $value_mz; if (value_mz==undefined) {value_mz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NAM.json\", function(json) {value_na = $value_na; if (value_na==undefined) {value_na=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NER.json\", function(json) {value_ne = $value_ne; if (value_ne==undefined) {value_ne=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NGA.json\", function(json) {value_ng = $value_ng; if (value_ng==undefined) {value_ng=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"RWA.json\", function(json) {value_rw = $value_rw; if (value_rw==undefined) {value_rw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SYC.json\", function(json) {value_sc = $value_sc; if (value_sc==undefined) {value_sc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SDN.json\", function(json) {value_sd = $value_sd; if (value_sd==undefined) {value_sd=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SLE.json\", function(json) {value_sl = $value_sl; if (value_sl==undefined) {value_sl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SEN.json\", function(json) {value_sn = $value_sn; if (value_sn==undefined) {value_sn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SOM.json\", function(json) {value_so = $value_so; if (value_so==undefined) {value_so=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SSD.json\", function(json) {value_ss = $value_ss; if (value_ss==undefined) {value_ss=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"STP.json\", function(json) {value_st = $value_st; if (value_st==undefined) {value_st=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SXM.json\", function(json) {value_sx = $value_sx; if (value_sx==undefined) {value_sx=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SWZ.json\", function(json) {value_sz = $value_sz; if (value_sz==undefined) {value_sz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TCD.json\", function(json) {value_td = $value_td; if (value_td==undefined) {value_td=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TGO.json\", function(json) {value_tg = $value_tg; if (value_tg==undefined) {value_tg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TUN.json\", function(json) {value_tn = $value_tn; if (value_tn==undefined) {value_tn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TZA.json\", function(json) {value_tz = $value_tz; if (value_tz==undefined) {value_tz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"UGA.json\", function(json) {value_ug = $value_ug; if (value_ug==undefined) {value_ug=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ZAF.json\", function(json) {value_za = $value_za; if (value_za==undefined) {value_za=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ZMB.json\", function(json) {value_zm = $value_zm; if (value_zm==undefined) {value_zm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ZWE.json\", function(json) {value_zw = $value_zw; if (value_zw==undefined) {value_zw=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"ao\",\"value\":value_ao},\n",
    "    {\"hc-key\": \"bf\",\"value\":value_bf},\n",
    "    {\"hc-key\": \"bi\",\"value\":value_bi},\n",
    "    {\"hc-key\": \"bj\",\"value\":value_bj},\n",
    "    {\"hc-key\": \"bw\",\"value\":value_bw},\n",
    "    {\"hc-key\": \"cd\",\"value\":value_cd},\n",
    "    {\"hc-key\": \"cf\",\"value\":value_cf},\n",
    "    {\"hc-key\": \"cg\",\"value\":value_cg},\n",
    "    {\"hc-key\": \"ci\",\"value\":value_ci},\n",
    "    {\"hc-key\": \"cm\",\"value\":value_cm},\n",
    "    {\"hc-key\": \"cv\",\"value\":value_cv},\n",
    "    {\"hc-key\": \"dj\",\"value\":value_dj},\n",
    "    {\"hc-key\": \"dz\",\"value\":value_dz},\n",
    "    {\"hc-key\": \"eg\",\"value\":value_eg},\n",
    "    {\"hc-key\": \"er\",\"value\":value_er},\n",
    "    {\"hc-key\": \"et\",\"value\":value_et},\n",
    "    {\"hc-key\": \"ga\",\"value\":value_ga},\n",
    "    {\"hc-key\": \"gh\",\"value\":value_gh},\n",
    "    {\"hc-key\": \"gm\",\"value\":value_gm},\n",
    "    {\"hc-key\": \"gn\",\"value\":value_gn},\n",
    "    {\"hc-key\": \"gq\",\"value\":value_gq},\n",
    "    {\"hc-key\": \"gw\",\"value\":value_gw},\n",
    "    {\"hc-key\": \"ke\",\"value\":value_ke},\n",
    "    {\"hc-key\": \"km\",\"value\":value_km},\n",
    "    {\"hc-key\": \"lr\",\"value\":value_lr},\n",
    "    {\"hc-key\": \"ls\",\"value\":value_ls},\n",
    "    {\"hc-key\": \"ly\",\"value\":value_ly},\n",
    "    {\"hc-key\": \"ma\",\"value\":value_ma},\n",
    "    {\"hc-key\": \"mg\",\"value\":value_mg},\n",
    "    {\"hc-key\": \"ml\",\"value\":value_ml},\n",
    "    {\"hc-key\": \"mr\",\"value\":value_mr},\n",
    "    {\"hc-key\": \"mu\",\"value\":value_mu},\n",
    "    {\"hc-key\": \"mw\",\"value\":value_mw},\n",
    "    {\"hc-key\": \"mz\",\"value\":value_mz},\n",
    "    {\"hc-key\": \"na\",\"value\":value_na},\n",
    "    {\"hc-key\": \"ne\",\"value\":value_ne},\n",
    "    {\"hc-key\": \"ng\",\"value\":value_ng},\n",
    "    {\"hc-key\": \"rw\",\"value\":value_rw},\n",
    "    {\"hc-key\": \"sc\",\"value\":value_sc},\n",
    "    {\"hc-key\": \"sd\",\"value\":value_sd},\n",
    "    {\"hc-key\": \"sl\",\"value\":value_sl},\n",
    "    {\"hc-key\": \"sn\",\"value\":value_sn},\n",
    "    {\"hc-key\": \"so\",\"value\":value_so},\n",
    "    {\"hc-key\": \"ss\",\"value\":value_ss},\n",
    "    {\"hc-key\": \"st\",\"value\":value_st},\n",
    "    {\"hc-key\": \"sx\",\"value\":value_sx},\n",
    "    {\"hc-key\": \"sz\",\"value\":value_sz},\n",
    "    {\"hc-key\": \"td\",\"value\":value_td},\n",
    "    {\"hc-key\": \"tg\",\"value\":value_tg},\n",
    "    {\"hc-key\": \"tn\",\"value\":value_tn},\n",
    "    {\"hc-key\": \"tz\",\"value\":value_tz},\n",
    "    {\"hc-key\": \"ug\",\"value\":value_ug},\n",
    "    {\"hc-key\": \"za\",\"value\":value_za},\n",
    "    {\"hc-key\": \"zm\",\"value\":value_zm},\n",
    "    {\"hc-key\": \"zw\",\"value\":value_zw}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/africa'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"africa.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/africa.js\"></script>\n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_africa.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_africa.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2. Map <span style=\"color:#285c8c\">Asia"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "\n",
    "asia_dict={\"ARE\":\"ae\",\"AFG\":\"af\",\"ARM\":\"am\",\"AZE\":\"az\",\"BGD\":\"bd\",\"BHR\":\"bh\",\"BRN\":\"bn\",\"BTN\":\"bt\",\"CHN\":\"cn\",\"CYP\":\"cy\",\"GEO\":\"ge\",\"IDN\":\"id\",\"ISR\":\"il\",\"IND\":\"in\",\"IRQ\":\"iq\",\"IRN\":\"ir\",\"JOR\":\"jo\",\"JPN\":\"jp\",\"KGZ\":\"kg\",\"KHM\":\"kh\",\"PRK\":\"kp\",\"KOR\":\"kr\",\"KWT\":\"kw\",\"KAZ\":\"kz\",\"LAO\":\"la\",\"LBN\":\"lb\",\"LKA\":\"lk\",\"MMR\":\"mm\",\"MNG\":\"mn\",\"MYS\":\"my\",\"NCL\":\"nc\",\"NPL\":\"np\",\"OMN\":\"om\",\"PHL\":\"ph\",\"PAK\":\"pk\",\"QAT\":\"qa\",\"RUS\":\"ru\",\"SAU\":\"sa\",\"SGP\":\"sg\",\"SHN\":\"sh\",\"SYR\":\"sy\",\"THA\":\"th\",\"TJK\":\"tj\",\"TLS\":\"tl\",\"TKM\":\"tm\",\"TUR\":\"tr\",\"TWN\":\"tw\",\"UZB\":\"uz\",\"VNM\":\"vn\",\"YEM\":\"ye\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in asia_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_ae': value_ae,'value_cy': value_cy,'value_tj': value_tj,'value_lk': value_lk,'value_tw': value_tw,'value_kw': value_kw,'value_ge': value_ge,'value_ph': value_ph,'value_ir': value_ir,'value_jp': value_jp,'value_sa': value_sa,'value_tl': value_tl,'value_az': value_az,'value_mm': value_mm,'value_kz': value_kz,'value_cn': value_cn,'value_in': value_in,'value_my': value_my,'value_kg': value_kg,'value_sy': value_sy,'value_id': value_id,'value_la': value_la,'value_sh': value_sh,'value_iq': value_iq,'value_np': value_np,'value_il': value_il,'value_nc': value_nc,'value_kh': value_kh,'value_tm': value_tm,'value_bn': value_bn,'value_th': value_th,'value_sg': value_sg,'value_mn': value_mn,'value_ye': value_ye,'value_bh': value_bh,'value_bt': value_bt,'value_uz': value_uz,'value_tr': value_tr,'value_pk': value_pk,'value_vn': value_vn,'value_bd': value_bd,'value_kr': value_kr,'value_am': value_am,'value_kp': value_kp,'value_jo': value_jo,'value_af': value_af,'value_om': value_om,'value_qa': value_qa,'value_ru': value_ru,'value_lb': value_lb}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>Asia - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"JPN.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"JPN.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"JPN.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"ARE.json\", function(json) {value_ae = $value_ae; if (value_ae==undefined) {value_ae=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"AFG.json\", function(json) {value_af = $value_af; if (value_af==undefined) {value_af=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ARM.json\", function(json) {value_am = $value_am; if (value_am==undefined) {value_am=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"AZE.json\", function(json) {value_az = $value_az; if (value_az==undefined) {value_az=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BGD.json\", function(json) {value_bd = $value_bd; if (value_bd==undefined) {value_bd=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BHR.json\", function(json) {value_bh = $value_bh; if (value_bh==undefined) {value_bh=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BRN.json\", function(json) {value_bn = $value_bn; if (value_bn==undefined) {value_bn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BTN.json\", function(json) {value_bt = $value_bt; if (value_bt==undefined) {value_bt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CHN.json\", function(json) {value_cn = $value_cn; if (value_cn==undefined) {value_cn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CYP.json\", function(json) {value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GEO.json\", function(json) {value_ge = $value_ge; if (value_ge==undefined) {value_ge=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IDN.json\", function(json) {value_id = $value_id; if (value_id==undefined) {value_id=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ISR.json\", function(json) {value_il = $value_il; if (value_il==undefined) {value_il=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IND.json\", function(json) {value_in = $value_in; if (value_in==undefined) {value_in=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IRQ.json\", function(json) {value_iq = $value_iq; if (value_iq==undefined) {value_iq=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IRN.json\", function(json) {value_ir = $value_ir; if (value_ir==undefined) {value_ir=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"JOR.json\", function(json) {value_jo = $value_jo; if (value_jo==undefined) {value_jo=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"JPN.json\", function(json) {value_jp = $value_jp; if (value_jp==undefined) {value_jp=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KGZ.json\", function(json) {value_kg = $value_kg; if (value_kg==undefined) {value_kg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KHM.json\", function(json) {value_kh = $value_kh; if (value_kh==undefined) {value_kh=null;}}),\n",
    "     //$.getJSON(\"$dataset\"+\"PRK.json\", function(json) {value_kp = $value_kp; if (value_kp==undefined) {value_kp=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KOR.json\", function(json) {value_kr = $value_kr; if (value_kr==undefined) {value_kr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KWT.json\", function(json) {value_kw = $value_kw; if (value_kw==undefined) {value_kw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KAZ.json\", function(json) {value_kz = $value_kz; if (value_kz==undefined) {value_kz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LAO.json\", function(json) {value_la = $value_la; if (value_la==undefined) {value_la=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LBN.json\", function(json) {value_lb = $value_lb; if (value_lb==undefined) {value_lb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LKA.json\", function(json) {value_lk = $value_lk; if (value_lk==undefined) {value_lk=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MMR.json\", function(json) {value_mm = $value_mm; if (value_mm==undefined) {value_mm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MNG.json\", function(json) {value_mn = $value_mn; if (value_mn==undefined) {value_mn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MYS.json\", function(json) {value_my = $value_my; if (value_my==undefined) {value_my=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NCL.json\", function(json) {value_nc = $value_nc; if (value_nc==undefined) {value_nc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NPL.json\", function(json) {value_np = $value_np; if (value_np==undefined) {value_np=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"OMN.json\", function(json) {value_om = $value_om; if (value_om==undefined) {value_om=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PHL.json\", function(json) {value_ph = $value_ph; if (value_ph==undefined) {value_ph=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PAK.json\", function(json) {value_pk = $value_pk; if (value_pk==undefined) {value_pk=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"QAT.json\", function(json) {value_qa = $value_qa; if (value_qa==undefined) {value_qa=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"RUS.json\", function(json) {value_ru = $value_ru; if (value_ru==undefined) {value_ru=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SAU.json\", function(json) {value_sa = $value_sa; if (value_sa==undefined) {value_sa=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SGP.json\", function(json) {value_sg = $value_sg; if (value_sg==undefined) {value_sg=null;}}),\n",
    "     //$.getJSON(\"$dataset\"+\"SHN.json\", function(json) {value_sh = $value_sh; if (value_sh==undefined) {value_sh=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SYR.json\", function(json) {value_sy = $value_sy; if (value_sy==undefined) {value_sy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"THA.json\", function(json) {value_th = $value_th; if (value_th==undefined) {value_th=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TJK.json\", function(json) {value_tj = $value_tj; if (value_tj==undefined) {value_tj=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TLS.json\", function(json) {value_tl = $value_tl; if (value_tl==undefined) {value_tl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TKM.json\", function(json) {value_tm = $value_tm; if (value_tm==undefined) {value_tm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TUR.json\", function(json) {value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TWN.json\", function(json) {value_tw = $value_tw; if (value_tw==undefined) {value_tw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"UZB.json\", function(json) {value_uz = $value_uz; if (value_uz==undefined) {value_uz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"VNM.json\", function(json) {value_vn = $value_vn; if (value_vn==undefined) {value_vn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"YEM.json\", function(json) {value_ye = $value_ye; if (value_ye==undefined) {value_ye=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"ae\",\"value\":value_ae},\n",
    "    {\"hc-key\": \"af\",\"value\":value_af},\n",
    "    {\"hc-key\": \"am\",\"value\":value_am},\n",
    "    {\"hc-key\": \"az\",\"value\":value_az},\n",
    "    {\"hc-key\": \"bd\",\"value\":value_bd},\n",
    "    {\"hc-key\": \"bh\",\"value\":value_bh},\n",
    "    {\"hc-key\": \"bn\",\"value\":value_bn},\n",
    "    {\"hc-key\": \"bt\",\"value\":value_bt},\n",
    "    {\"hc-key\": \"cn\",\"value\":value_cn},\n",
    "    {\"hc-key\": \"cy\",\"value\":value_cy},\n",
    "    {\"hc-key\": \"ge\",\"value\":value_ge},\n",
    "    {\"hc-key\": \"id\",\"value\":value_id},\n",
    "    {\"hc-key\": \"il\",\"value\":value_il},\n",
    "    {\"hc-key\": \"in\",\"value\":value_in},\n",
    "    {\"hc-key\": \"iq\",\"value\":value_iq},\n",
    "    {\"hc-key\": \"ir\",\"value\":value_ir},\n",
    "    {\"hc-key\": \"jo\",\"value\":value_jo},\n",
    "    {\"hc-key\": \"jp\",\"value\":value_jp},\n",
    "    {\"hc-key\": \"kg\",\"value\":value_kg},\n",
    "    {\"hc-key\": \"kh\",\"value\":value_kh},\n",
    "    //{\"hc-key\": \"kp\",\"value\":value_kp},\n",
    "    {\"hc-key\": \"kr\",\"value\":value_kr},\n",
    "    {\"hc-key\": \"kw\",\"value\":value_kw},\n",
    "    {\"hc-key\": \"kz\",\"value\":value_kz},\n",
    "    {\"hc-key\": \"la\",\"value\":value_la},\n",
    "    {\"hc-key\": \"lb\",\"value\":value_lb},\n",
    "    {\"hc-key\": \"lk\",\"value\":value_lk},\n",
    "    {\"hc-key\": \"mm\",\"value\":value_mm},\n",
    "    {\"hc-key\": \"mn\",\"value\":value_mn},\n",
    "    {\"hc-key\": \"my\",\"value\":value_my},\n",
    "    {\"hc-key\": \"nc\",\"value\":value_nc},\n",
    "    {\"hc-key\": \"np\",\"value\":value_np},\n",
    "    {\"hc-key\": \"om\",\"value\":value_om},\n",
    "    {\"hc-key\": \"ph\",\"value\":value_ph},\n",
    "    {\"hc-key\": \"pk\",\"value\":value_pk},\n",
    "    {\"hc-key\": \"qa\",\"value\":value_qa},\n",
    "    {\"hc-key\": \"ru\",\"value\":value_ru},\n",
    "    {\"hc-key\": \"sa\",\"value\":value_sa},\n",
    "    {\"hc-key\": \"sg\",\"value\":value_sg},\n",
    "    //{\"hc-key\": \"sh\",\"value\":value_sh},\n",
    "    {\"hc-key\": \"sy\",\"value\":value_sy},\n",
    "    {\"hc-key\": \"th\",\"value\":value_th},\n",
    "    {\"hc-key\": \"tj\",\"value\":value_tj},\n",
    "    {\"hc-key\": \"tl\",\"value\":value_tl},\n",
    "    {\"hc-key\": \"tm\",\"value\":value_tm},\n",
    "    {\"hc-key\": \"tr\",\"value\":value_tr},\n",
    "    {\"hc-key\": \"tw\",\"value\":value_tw},\n",
    "    {\"hc-key\": \"uz\",\"value\":value_uz},\n",
    "    {\"hc-key\": \"vn\",\"value\":value_vn},\n",
    "    {\"hc-key\": \"ye\",\"value\":value_ye}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/asia'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"asia.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/asia.js\"></script> \n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_asia.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_asia.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 3. Map <span style=\"color:#285c8c\">Europe"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "europe_dict={\"VAT\":\"va\",\"UKR\":\"ua\",\"TUR\":\"tr\",\"SMR\":\"sm\",\"SVK\":\"sk\",\"SVN\":\"si\",\"SWE\":\"se\",\"RUS\":\"ru\",\"SRB\":\"rs\",\"ROU\":\"ro\",\"PRT\":\"pt\",\"POL\":\"pl\",\"NOR\":\"no\",\"NLD\":\"nl\",\"NCL\":\"nc\",\"MLT\":\"mt\",\"MKD\":\"mk\",\"MNE\":\"me\",\"MDA\":\"md\",\"MCO\":\"mc\",\"LVA\":\"lv\",\"LUX\":\"lu\",\"LTU\":\"lt\",\"LIE\":\"li\",\"UNK\":\"kv\",\"ITA\":\"it\",\"ISL\":\"is\",\"IRL\":\"ie\",\"HUN\":\"hu\",\"HRV\":\"hr\",\"GRC\":\"gr\",\"GBR\":\"gb\",\"FRA\":\"fr\",\"FRO\":\"fo\",\"FIN\":\"fi\",\"ESP\":\"es\",\"EST\":\"ee\",\"DNK\":\"dk\",\"DEU\":\"de\",\"CZE\":\"cz\",\"CYP\":\"cy\",\"CHE\":\"ch\",\"BLR\":\"by\",\"BGR\":\"bg\",\"BEL\":\"be\",\"BIH\":\"ba\",\"AUT\":\"at\",\"ALB\":\"al\",\"AND\":\"ad\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in europe_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_be': value_be,'value_cy': value_cy,'value_is': value_is,'value_dk': value_dk,'value_nl': value_nl,'value_mt': value_mt,'value_sk': value_sk,'value_lt': value_lt,'value_ad': value_ad,'value_at': value_at,'value_es': value_es,'value_mk': value_mk,'value_va': value_va,'value_gr': value_gr,'value_al': value_al,'value_ro': value_ro,'value_sm': value_sm,'value_fo': value_fo,'value_pt': value_pt,'value_lv': value_lv,'value_ch': value_ch,'value_ie': value_ie,'value_ba': value_ba,'value_lu': value_lu,'value_cz': value_cz,'value_nc': value_nc,'value_bg': value_bg,'value_de': value_de,'value_fi': value_fi,'value_ua': value_ua,'value_kv': value_kv,'value_md': value_md,'value_tr': value_tr,'value_fr': value_fr,'value_si': value_si,'value_rs': value_rs,'value_hr': value_hr,'value_mc': value_mc,'value_by': value_by,'value_no': value_no,'value_se': value_se,'value_ru': value_ru,'value_hu': value_hu,'value_li': value_li,'value_gb': value_gb,'value_ee': value_ee,'value_pl': value_pl,'value_me': value_me,'value_it': value_it}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>Europe - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"FRA.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"FRA.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"FRA.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"UKR.json\", function(json) {value_ua = $value_ua; if (value_ua==undefined) {value_ua=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TUR.json\", function(json) {value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SMR.json\", function(json) {value_sm = $value_sm; if (value_sm==undefined) {value_sm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SVK.json\", function(json) {value_sk = $value_sk; if (value_sk==undefined) {value_sk=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SVN.json\", function(json) {value_si = $value_si; if (value_si==undefined) {value_si=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SWE.json\", function(json) {value_se = $value_se; if (value_se==undefined) {value_se=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"RUS.json\", function(json) {value_ru = $value_ru; if (value_ru==undefined) {value_ru=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SRB.json\", function(json) {value_rs = $value_rs; if (value_rs==undefined) {value_rs=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ROU.json\", function(json) {value_ro = $value_ro; if (value_ro==undefined) {value_ro=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PRT.json\", function(json) {value_pt = $value_pt; if (value_pt==undefined) {value_pt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"POL.json\", function(json) {value_pl = $value_pl; if (value_pl==undefined) {value_pl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NOR.json\", function(json) {value_no = $value_no; if (value_no==undefined) {value_no=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NLD.json\", function(json) {value_nl = $value_nl; if (value_nl==undefined) {value_nl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NCL.json\", function(json) {value_nc = $value_nc; if (value_nc==undefined) {value_nc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MLT.json\", function(json) {value_mt = $value_mt; if (value_mt==undefined) {value_mt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MKD.json\", function(json) {value_mk = $value_mk; if (value_mk==undefined) {value_mk=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MNE.json\", function(json) {value_me = $value_me; if (value_me==undefined) {value_me=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MDA.json\", function(json) {value_md = $value_md; if (value_md==undefined) {value_md=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MCO.json\", function(json) {value_mc = $value_mc; if (value_mc==undefined) {value_mc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LVA.json\", function(json) {value_lv = $value_lv; if (value_lv==undefined) {value_lv=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LUX.json\", function(json) {value_lu = $value_lu; if (value_lu==undefined) {value_lu=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LTU.json\", function(json) {value_lt = $value_lt; if (value_lt==undefined) {value_lt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LIE.json\", function(json) {value_li = $value_li; if (value_li==undefined) {value_li=null;}}),\n",
    "     //$.getJSON(\"$dataset\"+\"UNK.json\", function(json) {value_kv = $value_kv; if (value_kv==undefined) {value_kv=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ITA.json\", function(json) {value_it = $value_it; if (value_it==undefined) {value_it=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ISL.json\", function(json) {value_is = $value_is; if (value_is==undefined) {value_is=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IRL.json\", function(json) {value_ie = $value_ie; if (value_ie==undefined) {value_ie=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"HUN.json\", function(json) {value_hu = $value_hu; if (value_hu==undefined) {value_hu=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"HRV.json\", function(json) {value_hr = $value_hr; if (value_hr==undefined) {value_hr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GRC.json\", function(json) {value_gr = $value_gr; if (value_gr==undefined) {value_gr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GBR.json\", function(json) {value_gb = $value_gb; if (value_gb==undefined) {value_gb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"FRA.json\", function(json) {value_fr = $value_fr; if (value_fr==undefined) {value_fr=null;}}),\n",
    "     //$.getJSON(\"$dataset\"+\"FRO.json\", function(json) {value_fo = $value_fo; if (value_fo==undefined) {value_fo=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"FIN.json\", function(json) {value_fi = $value_fi; if (value_fi==undefined) {value_fi=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ESP.json\", function(json) {value_es = $value_es; if (value_es==undefined) {value_es=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"EST.json\", function(json) {value_ee = $value_ee; if (value_ee==undefined) {value_ee=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DNK.json\", function(json) {value_dk = $value_dk; if (value_dk==undefined) {value_dk=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DEU.json\", function(json) {value_de = $value_de; if (value_de==undefined) {value_de=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CZE.json\", function(json) {value_cz = $value_cz; if (value_cz==undefined) {value_cz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CYP.json\", function(json) {value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CHE.json\", function(json) {value_ch = $value_ch; if (value_ch==undefined) {value_ch=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BLR.json\", function(json) {value_by = $value_by; if (value_by==undefined) {value_by=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BGR.json\", function(json) {value_bg = $value_bg; if (value_bg==undefined) {value_bg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BEL.json\", function(json) {value_be = $value_be; if (value_be==undefined) {value_be=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BIH.json\", function(json) {value_ba = $value_ba; if (value_ba==undefined) {value_ba=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"AUT.json\", function(json) {value_at = $value_at; if (value_at==undefined) {value_at=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ALB.json\", function(json) {value_al = $value_al; if (value_al==undefined) {value_al=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"AND.json\", function(json) {value_ad = $value_ad; if (value_ad==undefined) {value_ad=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"ua\",\"value\":value_ua},\n",
    "    {\"hc-key\": \"tr\",\"value\":value_tr},\n",
    "    {\"hc-key\": \"sm\",\"value\":value_sm},\n",
    "    {\"hc-key\": \"sk\",\"value\":value_sk},\n",
    "    {\"hc-key\": \"si\",\"value\":value_si},\n",
    "    {\"hc-key\": \"se\",\"value\":value_se},\n",
    "    {\"hc-key\": \"ru\",\"value\":value_ru},\n",
    "    {\"hc-key\": \"rs\",\"value\":value_rs},\n",
    "    {\"hc-key\": \"ro\",\"value\":value_ro},\n",
    "    {\"hc-key\": \"pt\",\"value\":value_pt},\n",
    "    {\"hc-key\": \"pl\",\"value\":value_pl},\n",
    "    {\"hc-key\": \"no\",\"value\":value_no},\n",
    "    {\"hc-key\": \"nl\",\"value\":value_nl},\n",
    "    {\"hc-key\": \"nc\",\"value\":value_nc},\n",
    "    {\"hc-key\": \"mt\",\"value\":value_mt},\n",
    "    {\"hc-key\": \"mk\",\"value\":value_mk},\n",
    "    {\"hc-key\": \"me\",\"value\":value_me},\n",
    "    {\"hc-key\": \"md\",\"value\":value_md},\n",
    "    {\"hc-key\": \"mc\",\"value\":value_mc},\n",
    "    {\"hc-key\": \"lv\",\"value\":value_lv},\n",
    "    {\"hc-key\": \"lu\",\"value\":value_lu},\n",
    "    {\"hc-key\": \"lt\",\"value\":value_lt},\n",
    "    {\"hc-key\": \"li\",\"value\":value_li},\n",
    "    //{\"hc-key\": \"kv\",\"value\":value_kv},\n",
    "    {\"hc-key\": \"it\",\"value\":value_it},\n",
    "    {\"hc-key\": \"is\",\"value\":value_is},\n",
    "    {\"hc-key\": \"ie\",\"value\":value_ie},\n",
    "    {\"hc-key\": \"hu\",\"value\":value_hu},\n",
    "    {\"hc-key\": \"hr\",\"value\":value_hr},\n",
    "    {\"hc-key\": \"gr\",\"value\":value_gr},\n",
    "    {\"hc-key\": \"gb\",\"value\":value_gb},\n",
    "    {\"hc-key\": \"fr\",\"value\":value_fr},\n",
    "    //{\"hc-key\": \"fo\",\"value\":value_fo},\n",
    "    {\"hc-key\": \"fi\",\"value\":value_fi},\n",
    "    {\"hc-key\": \"es\",\"value\":value_es},\n",
    "    {\"hc-key\": \"ee\",\"value\":value_ee},\n",
    "    {\"hc-key\": \"dk\",\"value\":value_dk},\n",
    "    {\"hc-key\": \"de\",\"value\":value_de},\n",
    "    {\"hc-key\": \"cz\",\"value\":value_cz},\n",
    "    {\"hc-key\": \"cy\",\"value\":value_cy},\n",
    "    {\"hc-key\": \"ch\",\"value\":value_ch},\n",
    "    {\"hc-key\": \"by\",\"value\":value_by},\n",
    "    {\"hc-key\": \"bg\",\"value\":value_bg},\n",
    "    {\"hc-key\": \"be\",\"value\":value_be},\n",
    "    {\"hc-key\": \"ba\",\"value\":value_ba},\n",
    "    {\"hc-key\": \"at\",\"value\":value_at},\n",
    "    {\"hc-key\": \"al\",\"value\":value_al},\n",
    "    {\"hc-key\": \"ad\",\"value\":value_ad}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/europe'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"europe.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/europe.js\"></script>\n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_europe.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_europe.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 4. Middle <span style=\"color:#285c8c\">East"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "middle_east_dict={\"SAU\":\"sa\",\"YEM\":\"ye\",\"TUR\":\"tr\",\"SYR\":\"sy\",\"QAT\":\"qa\",\"OMN\":\"om\",\"NCL\":\"nc\",\"LBN\":\"lb\",\"KWT\":\"kw\",\"JOR\":\"jo\",\"IRN\":\"ir\",\"IRQ\":\"iq\",\"ISR\":\"il\",\"EGY\":\"eg\",\"CYP\":\"cy\",\"BHR\":\"bh\",\"ARE\":\"ae\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in middle_east_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_ae': value_ae,'value_cy': value_cy,'value_tr': value_tr,'value_il': value_il,'value_eg': value_eg,'value_nc': value_nc,'value_kw': value_kw,'value_sy': value_sy,'value_ir': value_ir,'value_sa': value_sa,'value_jo': value_jo,'value_ye': value_ye,'value_om': value_om,'value_qa': value_qa,'value_bh': value_bh,'value_iq': value_iq,'value_lb': value_lb}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>Middle East - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"SAU.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"SAU.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"SAU.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"SAU.json\", function(json) {value_sa = $value_sa; if (value_sa==undefined) {value_sa=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"YEM.json\", function(json) {value_ye = $value_ye; if (value_ye==undefined) {value_ye=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TUR.json\", function(json) {value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SYR.json\", function(json) {value_sy = $value_sy; if (value_sy==undefined) {value_sy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"QAT.json\", function(json) {value_qa = $value_qa; if (value_qa==undefined) {value_qa=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"OMN.json\", function(json) {value_om = $value_om; if (value_om==undefined) {value_om=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NCL.json\", function(json) {value_nc = $value_nc; if (value_nc==undefined) {value_nc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LBN.json\", function(json) {value_lb = $value_lb; if (value_lb==undefined) {value_lb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KWT.json\", function(json) {value_kw = $value_kw; if (value_kw==undefined) {value_kw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"JOR.json\", function(json) {value_jo = $value_jo; if (value_jo==undefined) {value_jo=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IRN.json\", function(json) {value_ir = $value_ir; if (value_ir==undefined) {value_ir=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"IRQ.json\", function(json) {value_iq = $value_iq; if (value_iq==undefined) {value_iq=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ISR.json\", function(json) {value_il = $value_il; if (value_il==undefined) {value_il=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"EGY.json\", function(json) {value_eg = $value_eg; if (value_eg==undefined) {value_eg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CYP.json\", function(json) {value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BHR.json\", function(json) {value_bh = $value_bh; if (value_bh==undefined) {value_bh=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ARE.json\", function(json) {value_ae = $value_ae; if (value_ae==undefined) {value_ae=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "   {\"hc-key\": \"sa\",\"value\":value_sa},\n",
    "    {\"hc-key\": \"ye\",\"value\":value_ye},\n",
    "    {\"hc-key\": \"tr\",\"value\":value_tr},\n",
    "    {\"hc-key\": \"sy\",\"value\":value_sy},\n",
    "    {\"hc-key\": \"qa\",\"value\":value_qa},\n",
    "    {\"hc-key\": \"om\",\"value\":value_om},\n",
    "    {\"hc-key\": \"nc\",\"value\":value_nc},\n",
    "    {\"hc-key\": \"lb\",\"value\":value_lb},\n",
    "    {\"hc-key\": \"kw\",\"value\":value_kw},\n",
    "    {\"hc-key\": \"jo\",\"value\":value_jo},\n",
    "    {\"hc-key\": \"ir\",\"value\":value_ir},\n",
    "    {\"hc-key\": \"iq\",\"value\":value_iq},\n",
    "    {\"hc-key\": \"il\",\"value\":value_il},\n",
    "    {\"hc-key\": \"eg\",\"value\":value_eg},\n",
    "    {\"hc-key\": \"cy\",\"value\":value_cy},\n",
    "    {\"hc-key\": \"bh\",\"value\":value_bh},\n",
    "    {\"hc-key\": \"ae\",\"value\":value_ae}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/middle-east'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"middle-east.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/middle-east.js\"></script>\n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_middle_east.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_middle_east.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 5. Map <span style=\"color:#285c8c\">North America"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "north_america_dict={\"GRL\":\"gl\",\"VIR\":\"vi\",\"VCT\":\"vc\",\"USA\":\"us\",\"TTO\":\"tt\",\"SLV\":\"sv\",\"PRI\":\"pr\",\"PAN\":\"pa\",\"NIC\":\"ni\",\"MEX\":\"mx\",\"LCA\":\"lc\",\"KNA\":\"kn\",\"JAM\":\"jm\",\"HTI\":\"ht\",\"HND\":\"hn\",\"GTM\":\"gt\",\"GRD\":\"gd\",\"DOM\":\"do\",\"DMA\":\"dm\",\"CUB\":\"cu\",\"CRI\":\"cr\",\"CAN\":\"ca\",\"BLZ\":\"bz\",\"BHS\":\"bs\",\"BRB\":\"bb\",\"ATG\":\"ag\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in north_america_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_bb': value_bb,'value_tt': value_tt,'value_gl': value_gl,'value_sv': value_sv,'value_gd': value_gd,'value_bz': value_bz,'value_ca': value_ca,'value_jm': value_jm,'value_ni': value_ni,'value_vc': value_vc,'value_pa': value_pa,'value_cu': value_cu,'value_hn': value_hn,'value_do': value_do,'value_pr': value_pr,'value_us': value_us,'value_ht': value_ht,'value_lc': value_lc,'value_bs': value_bs,'value_gt': value_gt,'value_mx': value_mx,'value_ag': value_ag,'value_kn': value_kn,'value_dm': value_dm,'value_cr': value_cr,'value_vi': value_vi}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/result-light.css\">\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>North America - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"USA.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"USA.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"USA.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"GRL.json\", function(json) {value_gl = $value_gl; if (value_gl==undefined) {value_gl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"VIR.json\", function(json) {value_vi = $value_vi; if (value_vi==undefined) {value_vi=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"VCT.json\", function(json) {value_vc = $value_vc; if (value_vc==undefined) {value_vc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"USA.json\", function(json) {value_us = $value_us; if (value_us==undefined) {value_us=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TTO.json\", function(json) {value_tt = $value_tt; if (value_tt==undefined) {value_tt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SLV.json\", function(json) {value_sv = $value_sv; if (value_sv==undefined) {value_sv=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PRI.json\", function(json) {value_pr = $value_pr; if (value_pr==undefined) {value_pr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PAN.json\", function(json) {value_pa = $value_pa; if (value_pa==undefined) {value_pa=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NIC.json\", function(json) {value_ni = $value_ni; if (value_ni==undefined) {value_ni=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MEX.json\", function(json) {value_mx = $value_mx; if (value_mx==undefined) {value_mx=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"LCA.json\", function(json) {value_lc = $value_lc; if (value_lc==undefined) {value_lc=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"KNA.json\", function(json) {value_kn = $value_kn; if (value_kn==undefined) {value_kn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"JAM.json\", function(json) {value_jm = $value_jm; if (value_jm==undefined) {value_jm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"HTI.json\", function(json) {value_ht = $value_ht; if (value_ht==undefined) {value_ht=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"HND.json\", function(json) {value_hn = $value_hn; if (value_hn==undefined) {value_hn=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GTM.json\", function(json) {value_gt = $value_gt; if (value_gt==undefined) {value_gt=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GRD.json\", function(json) {value_gd = $value_gd; if (value_gd==undefined) {value_gd=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DOM.json\", function(json) {value_do = $value_do; if (value_do==undefined) {value_do=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"DMA.json\", function(json) {value_dm = $value_dm; if (value_dm==undefined) {value_dm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CUB.json\", function(json) {value_cu = $value_cu; if (value_cu==undefined) {value_cu=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CRI.json\", function(json) {value_cr = $value_cr; if (value_cr==undefined) {value_cr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CAN.json\", function(json) {value_ca = $value_ca; if (value_ca==undefined) {value_ca=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BLZ.json\", function(json) {value_bz = $value_bz; if (value_bz==undefined) {value_bz=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BHS.json\", function(json) {value_bs = $value_bs; if (value_bs==undefined) {value_bs=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BRB.json\", function(json) {value_bb = $value_bb; if (value_bb==undefined) {value_bb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ATG.json\", function(json) {value_ag = $value_ag; if (value_ag==undefined) {value_ag=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"gl\",\"value\":value_gl},\n",
    "    {\"hc-key\": \"vi\",\"value\":value_vi},\n",
    "    {\"hc-key\": \"vc\",\"value\":value_vc},\n",
    "    {\"hc-key\": \"us\",\"value\":value_us},\n",
    "    {\"hc-key\": \"tt\",\"value\":value_tt},\n",
    "    {\"hc-key\": \"sv\",\"value\":value_sv},\n",
    "    {\"hc-key\": \"pr\",\"value\":value_pr},\n",
    "    {\"hc-key\": \"pa\",\"value\":value_pa},\n",
    "    {\"hc-key\": \"ni\",\"value\":value_ni},\n",
    "    {\"hc-key\": \"mx\",\"value\":value_mx},\n",
    "    {\"hc-key\": \"lc\",\"value\":value_lc},\n",
    "    {\"hc-key\": \"kn\",\"value\":value_kn},\n",
    "    {\"hc-key\": \"jm\",\"value\":value_jm},\n",
    "    {\"hc-key\": \"ht\",\"value\":value_ht},\n",
    "    {\"hc-key\": \"hn\",\"value\":value_hn},\n",
    "    {\"hc-key\": \"gt\",\"value\":value_gt},\n",
    "    {\"hc-key\": \"gd\",\"value\":value_gd},\n",
    "    {\"hc-key\": \"do\",\"value\":value_do},\n",
    "    {\"hc-key\": \"dm\",\"value\":value_dm},\n",
    "    {\"hc-key\": \"cu\",\"value\":value_cu},\n",
    "    {\"hc-key\": \"cr\",\"value\":value_cr},\n",
    "    {\"hc-key\": \"ca\",\"value\":value_ca},\n",
    "    {\"hc-key\": \"bz\",\"value\":value_bz},\n",
    "    {\"hc-key\": \"bs\",\"value\":value_bs},\n",
    "    {\"hc-key\": \"bb\",\"value\":value_bb},\n",
    "    {\"hc-key\": \"ag\",\"value\":value_ag}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/north-america'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"north-america.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/north-america.js\"></script> \n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_north_america.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_north_america.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"525px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 6. Map <span style=\"color:#285c8c\">South America"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "south_america_dict={\"BRA\":\"br\",\"VEN\":\"ve\",\"URY\":\"uy\",\"SUR\":\"sr\",\"PRY\":\"py\",\"PER\":\"pe\",\"GUY\":\"gy\",\"GBR\":\"gb\",\"ECU\":\"ec\",\"COL\":\"co\",\"CHL\":\"cl\",\"BOL\":\"bo\",\"ARG\":\"ar\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in south_america_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_ec': value_ec,'value_cl': value_cl,'value_co': value_co,'value_sr': value_sr,'value_ar': value_ar,'value_br': value_br,'value_uy': value_uy,'value_ve': value_ve,'value_pe': value_pe,'value_gb': value_gb,'value_py': value_py,'value_bo': value_bo,'value_gy': value_gy}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/result-light.css\">\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>South America - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"BRA.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"BRA.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"BRA.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"BRA.json\", function(json) {value_br = $value_br; if (value_br==undefined) {value_br=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"VEN.json\", function(json) {value_ve = $value_ve; if (value_ve==undefined) {value_ve=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"URY.json\", function(json) {value_uy = $value_uy; if (value_uy==undefined) {value_uy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SUR.json\", function(json) {value_sr = $value_sr; if (value_sr==undefined) {value_sr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PRY.json\", function(json) {value_py = $value_py; if (value_py==undefined) {value_py=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PER.json\", function(json) {value_pe = $value_pe; if (value_pe==undefined) {value_pe=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GUY.json\", function(json) {value_gy = $value_gy; if (value_gy==undefined) {value_gy=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"GBR.json\", function(json) {value_gb = $value_gb; if (value_gb==undefined) {value_gb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ECU.json\", function(json) {value_ec = $value_ec; if (value_ec==undefined) {value_ec=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"COL.json\", function(json) {value_co = $value_co; if (value_co==undefined) {value_co=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"CHL.json\", function(json) {value_cl = $value_cl; if (value_cl==undefined) {value_cl=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"BOL.json\", function(json) {value_bo = $value_bo; if (value_bo==undefined) {value_bo=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"ARG.json\", function(json) {value_ar = $value_ar; if (value_ar==undefined) {value_ar=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"br\",\"value\":value_br},\n",
    "    {\"hc-key\": \"ve\",\"value\":value_ve},\n",
    "    {\"hc-key\": \"uy\",\"value\":value_uy},\n",
    "    {\"hc-key\": \"sr\",\"value\":value_sr},\n",
    "    {\"hc-key\": \"py\",\"value\":value_py},\n",
    "    {\"hc-key\": \"pe\",\"value\":value_pe},\n",
    "    {\"hc-key\": \"gy\",\"value\":value_gy},\n",
    "    {\"hc-key\": \"gb\",\"value\":value_gb},\n",
    "    {\"hc-key\": \"ec\",\"value\":value_ec},\n",
    "    {\"hc-key\": \"co\",\"value\":value_co},\n",
    "    {\"hc-key\": \"cl\",\"value\":value_cl},\n",
    "    {\"hc-key\": \"bo\",\"value\":value_bo},\n",
    "    {\"hc-key\": \"ar\",\"value\":value_ar}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/south-america'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"south-america.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/south-america.js\"></script>\n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_south_america.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_south_america.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"525px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 7. Map <span style=\"color:#285c8c\">Oceania"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "#========================================================================================================================\n",
    "title='PIB'\n",
    "indicatorlist=['NY.GDP.PCAP.CD']\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "dataset=\"data/WB_WDI_\"\n",
    "#========================================================================================================================\n",
    "\n",
    "oceania_dict={\"IDN\":\"id\",\"VUT\":\"vu\",\"TUV\":\"tv\",\"SLB\":\"sb\",\"PLW\":\"pw\",\"PHL\":\"ph\",\"PNG\":\"pg\",\"NZL\":\"nz\",\"NRU\":\"nr\",\"MYS\":\"my\",\"MHL\":\"mh\",\"FSM\":\"fm\",\"FJI\":\"fj\",\"AUS\":\"au\"}\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in oceania_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]]'\n",
    "        Input0.append(\"'\"+'value_'+iso2+\"'\"+': value_'+iso2)\n",
    "        \n",
    "    #to manualy create Input0 from Region specific country dict\n",
    "    InputTEMP = '{'+','.join(Input0) +'}'\n",
    "    #print(InputTEMP)\n",
    "    \n",
    "    Input0={'value_pw': value_pw,'value_au': value_au,'value_sb': value_sb,'value_vu': value_vu,'value_ph': value_ph,'value_my': value_my,'value_tv': value_tv,'value_id': value_id,'value_fm': value_fm,'value_fj': value_fj,'value_pg': value_pg,'value_nz': value_nz,'value_mh': value_mh,'value_nr': value_nr}\n",
    "    InputOption={'color1':color1,'color2':color2,'dataset':dataset, 'indicator':indicator}\n",
    "        \n",
    "    #Add dictionnary InputOption and dictionnary Input0\n",
    "    Input=dict(list(InputOption.items()) + list(Input0.items()))\n",
    "    #Starting HTML code\n",
    "    html= ''' \n",
    "\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/result-light.css\">\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 500px; \n",
    "        min-width: 310px; \n",
    "        max-width: 800px; \n",
    "        margin: 0 auto;\n",
    "    }\n",
    "    .loading {\n",
    "        margin-top: 10em;\n",
    "        text-align: center;\n",
    "        color: gray;\n",
    "    }\n",
    "\n",
    "      </style>\n",
    "      <title>Oceania - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"$dataset\"+\"AUS.json\", function(json) {label = json[\"$indicator\"][\"label\"]; if (label ==undefined) {label =\"Map\";} }),\n",
    "     $.getJSON(\"$dataset\"+\"AUS.json\", function(json) {source = json[\"data_source\"][\"source\"]; if (source ==undefined) {source =\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"AUS.json\", function(json) {downloaddate = json[\"data_source\"][\"Download_date\"]; if (downloaddate ==undefined) {downloaddate=\"\";} }),    \n",
    "     $.getJSON(\"$dataset\"+\"IDN.json\", function(json) {value_id = $value_id; if (value_id==undefined) {value_id=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"VUT.json\", function(json) {value_vu = $value_vu; if (value_vu==undefined) {value_vu=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"TUV.json\", function(json) {value_tv = $value_tv; if (value_tv==undefined) {value_tv=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"SLB.json\", function(json) {value_sb = $value_sb; if (value_sb==undefined) {value_sb=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PLW.json\", function(json) {value_pw = $value_pw; if (value_pw==undefined) {value_pw=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PHL.json\", function(json) {value_ph = $value_ph; if (value_ph==undefined) {value_ph=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"PNG.json\", function(json) {value_pg = $value_pg; if (value_pg==undefined) {value_pg=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"NZL.json\", function(json) {value_nz = $value_nz; if (value_nz==undefined) {value_nz=null;}}),\n",
    "     //$.getJSON(\"$dataset\"+\"NRU.json\", function(json) {value_nr = $value_nr; if (value_nr==undefined) {value_nr=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MYS.json\", function(json) {value_my = $value_my; if (value_my==undefined) {value_my=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"MHL.json\", function(json) {value_mh = $value_mh; if (value_mh==undefined) {value_mh=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"FSM.json\", function(json) {value_fm = $value_fm; if (value_fm==undefined) {value_fm=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"FJI.json\", function(json) {value_fj = $value_fj; if (value_fj==undefined) {value_fj=null;}}),\n",
    "     $.getJSON(\"$dataset\"+\"AUS.json\", function(json) {value_au = $value_au; if (value_au==undefined) {value_au=null;}})\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "    {\"hc-key\": \"id\",\"value\":value_id},\n",
    "    {\"hc-key\": \"vu\",\"value\":value_vu},\n",
    "    {\"hc-key\": \"tv\",\"value\":value_tv},\n",
    "    {\"hc-key\": \"sb\",\"value\":value_sb},\n",
    "    {\"hc-key\": \"pw\",\"value\":value_pw},\n",
    "    {\"hc-key\": \"ph\",\"value\":value_ph},\n",
    "    {\"hc-key\": \"pg\",\"value\":value_pg},\n",
    "    {\"hc-key\": \"nz\",\"value\":value_nz},\n",
    "    //{\"hc-key\": \"nr\",\"value\":value_nr},\n",
    "    {\"hc-key\": \"my\",\"value\":value_my},\n",
    "    {\"hc-key\": \"mh\",\"value\":value_mh},\n",
    "    {\"hc-key\": \"fm\",\"value\":value_fm},\n",
    "    {\"hc-key\": \"fj\",\"value\":value_fj},\n",
    "    {\"hc-key\": \"au\",\"value\":value_au}\n",
    "            ];\n",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: label},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {shared: true, valuePrefix: '', valueSuffix: '', valueDecimals: 2},\n",
    "              series: [{\n",
    "                data: data,\n",
    "                mapData: Highcharts.maps['custom/oceania'],\n",
    "                joinBy: 'hc-key',\n",
    "                name: label,\n",
    "                states: { hover: {color: '#BADA55' }  },\n",
    "                dataLabels: {enabled: false, format: '{point.name}' }\n",
    "              }]\n",
    "            });\n",
    "          });\n",
    "        });\n",
    "\n",
    "\n",
    "    </script>\n",
    "    </head>\n",
    "    <body>\n",
    "    <script src=\"highmaps.js\"></script>\n",
    "    <script src=\"exporting.js\"></script>\n",
    "    <script src=\"oceania.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/highmaps.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/maps/modules/exporting.js\"></script>\n",
    "    <script src=\"https://code.highcharts.com/mapdata/custom/oceania.js\"></script>\n",
    "    <div id=\"container\"></div>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "    #open an handle\n",
    "    f = open(\"dataviz/map_\"+indicator.replace('.','_')+\"_oceania.html\",'w')\n",
    "    #write the content within the handle\n",
    "    file_content = Template(html).safe_substitute(Input)\n",
    "    f.write(file_content)\n",
    "    f.close()\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_oceania.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"525px\"></iframe>')\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## &#9733; Line graph &#9733;: <span style=\"color:#285c8c\">Convergence</span>\n",
    "- Issue to fix: when using data[YearMax] if missing data exist it will render 0 instead of null, to avoid I loop starting on YearMin, issue is that with data update Yearmin will remain the same so data wont evolve over time."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#================================================ Options ==============================================================\n",
    "#Gallup iso3list\n",
    "iso3list=['BRA']\n",
    "indicatorlist=['NY.GDP.PCAP.PP.KD'] #SP.POP.1564.TO.ZS','NY.GDP.PCAP.PP.KD','NY.GDP.PCAP.CD', 'NE.EXP.GNFS.CD'] #Indicator code (as existing in json datasets)\n",
    "duration=24 #length of the time serie\n",
    "color = ['#6e9fc5', '#ffdf51' ,'#a6ca6d' ,'#ad46d6' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "dataset=\"data/WB_WDI_\" #dataset url - minus iso3 country code\n",
    "#dataset=\"data/json country/Asus/WB glance/WB_WDI_\" #dataset url - minus iso3 country code\n",
    "#========================================================================================================================\n",
    "iso3list=['ABW', 'AFG', 'AGO', 'ALB', 'AND', 'ARE', 'ARG', 'ARM', 'ASM', 'ATG', 'AUS', 'AUT', 'AZE', 'BDI', 'BEL', 'BEN', 'BFA', 'BGD', \\\n",
    "         'BGR', 'BHR', 'BHS', 'BIH', 'BLR', 'BLZ', 'BMU', 'BOL', 'BRA', 'BRB', 'BRN', 'BTN', 'BWA', 'CAF', 'CAN', 'CHE', 'CHL', 'CHN', \\\n",
    "         'CIV', 'CMR', 'COD', 'COG', 'COL', 'COM', 'CPV', 'CRI', 'CUB', 'CUW', 'CYM', 'CYP', 'CZE', 'DEU', 'DJI', 'DMA', 'DNK', 'DOM', \\\n",
    "         'DZA', 'ECU', 'EGY', 'ERI', 'ESP', 'EST', 'ETH', 'FIN', 'FJI', 'FRA', 'FSM', 'GAB', 'GBR', 'GEO', 'GHA', 'GIN', 'GMB', \\\n",
    "         'GNB', 'GNQ', 'GRC', 'GRD', 'GRL', 'GTM', 'GUM', 'GUY', 'HKG', 'HND', 'HRV', 'HTI', 'HUN', 'IDN', 'IMN', 'IND', 'IRL', 'IRN', \\\n",
    "         'IRQ', 'ISL', 'ISR', 'ITA', 'JAM', 'JOR', 'JPN', 'KAZ', 'KEN', 'KGZ', 'KHM', 'KNA', 'KOR', 'KWT', 'LAO', 'LBN', 'LBR', 'LBY', \\\n",
    "         'LCA', 'LIE', 'LKA', 'LSO', 'LTU', 'LUX', 'LVA', 'MAC', 'MAF', 'MAR', 'MCO', 'MDA', 'MDG', 'MDV', 'MEX', 'MHL', 'MKD', 'MLI', \\\n",
    "         'MLT', 'MMR', 'MNE', 'MNG', 'MNP', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYS', 'NAM', 'NCL', 'NER', 'NGA', 'NIC', 'NLD', 'NOR', 'NPL', \\\n",
    "         'NZL', 'OMN', 'PAK', 'PAN', 'PER', 'PHL', 'PLW', 'PNG', 'POL', 'PRI', 'PRT', 'PRY', 'PSE', 'PYF', 'QAT', 'ROU', 'RUS', 'RWA', \\\n",
    "         'SAU', 'SDN', 'SEN', 'SGP', 'SLB', 'SLE', 'SLV', 'SMR', 'SOM', 'SRB', 'SSD', 'STP', 'SUR', 'SVK', 'SVN', 'SWE', 'SWZ', 'SXM',\\\n",
    "         'SYC', 'SYR', 'TCA', 'TCD', 'TGO', 'THA', 'TJK', 'TKM', 'TLS', 'TON', 'TTO', 'TUN', 'TUR', 'TUV', 'TWN', 'TZA', 'UGA', 'UKR', \\\n",
    "         'URY', 'USA', 'UZB', 'VCT', 'VEN', 'VIR', 'VNM', 'VUT', 'WSM', 'YEM', 'ZAF', 'ZMB', 'ZWE']\n",
    "\n",
    "#Loop over indicator list\n",
    "for indicator in indicatorlist:\n",
    "    \n",
    "    #Loop over country list (iso3)\n",
    "    for iso3 in iso3list:\n",
    "\n",
    "        #iso codes dictionnary (contains income group code and region code associated to country code)\n",
    "        region_dict= {\"ASM\":\"UMC,EAS\",\"AUS\":\"OEC,EAS\",\"BRN\":\"NOC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"NOC,EAS\",\"HKG\":\"NOC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"OEC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"OEC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"NOC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"NOC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"NOC,EAS\",\"NZL\":\"OEC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"NOC,EAS\",\"SGP\":\"NOC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"NOC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"\":\"LMC,ECS\",\"ALB\":\"UMC,ECS\",\"AND\":\"NOC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"OEC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"OEC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"OEC,ECS\",\"CHI\":\"NOC,ECS\",\"CYP\":\"NOC,ECS\",\"CZE\":\"OEC,ECS\",\"DEU\":\"OEC,ECS\",\"DNK\":\"OEC,ECS\",\"ESP\":\"OEC,ECS\",\"EST\":\"OEC,ECS\",\"FIN\":\"OEC,ECS\",\"FRA\":\"OEC,ECS\",\"FRO\":\"NOC,ECS\",\"GBR\":\"OEC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"OEC,ECS\",\"GRL\":\"NOC,ECS\",\"HRV\":\"NOC,ECS\",\"HUN\":\"OEC,ECS\",\"IMN\":\"NOC,ECS\",\"IRL\":\"OEC,ECS\",\"ISL\":\"OEC,ECS\",\"ITA\":\"OEC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"NOC,ECS\",\"LTU\":\"NOC,ECS\",\"LUX\":\"OEC,ECS\",\"LVA\":\"NOC,ECS\",\"MCO\":\"NOC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"OEC,ECS\",\"NOR\":\"OEC,ECS\",\"POL\":\"OEC,ECS\",\"PRT\":\"OEC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"NOC,ECS\",\"SMR\":\"NOC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"OEC,ECS\",\"SVN\":\"OEC,ECS\",\"SWE\":\"OEC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"NOC,LCN\",\"ARG\":\"NOC,LCN\",\"ATG\":\"NOC,LCN\",\"BHS\":\"NOC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"NOC,LCN\",\"CHL\":\"OEC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"NOC,LCN\",\"CYM\":\"NOC,LCN\",\"DMA\":\"UMC,LCN\",\"DOM\":\"UMC,LCN\",\"ECU\":\"UMC,LCN\",\"GRD\":\"UMC,LCN\",\"GTM\":\"LMC,LCN\",\"GUY\":\"LMC,LCN\",\"HND\":\"LMC,LCN\",\"HTI\":\"LIC,LCN\",\"JAM\":\"UMC,LCN\",\"KNA\":\"NOC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"NOC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"NOC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"NOC,LCN\",\"TCA\":\"NOC,LCN\",\"TTO\":\"NOC,LCN\",\"URY\":\"NOC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"NOC,LCN\",\"VIR\":\"NOC,LCN\",\"ARE\":\"NOC,MEA\",\"BHR\":\"NOC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"OEC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"NOC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"NOC,MEA\",\"OMN\":\"NOC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"NOC,MEA\",\"SAU\":\"NOC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"NOC,NAC\",\"CAN\":\"OEC,NAC\",\"USA\":\"OEC,NAC\",\"AFG\":\"LIC,SAS\",\"BGD\":\"LMC,SAS\",\"BTN\":\"LMC,SAS\",\"IND\":\"LMC,SAS\",\"LKA\":\"LMC,SAS\",\"MDV\":\"UMC,SAS\",\"NPL\":\"LIC,SAS\",\"PAK\":\"LMC,SAS\",\"AGO\":\"UMC,SSF\",\"BDI\":\"LIC,SSF\",\"BEN\":\"LIC,SSF\",\"BFA\":\"LIC,SSF\",\"BWA\":\"UMC,SSF\",\"CAF\":\"LIC,SSF\",\"CIV\":\"LMC,SSF\",\"CMR\":\"LMC,SSF\",\"COD\":\"LIC,SSF\",\"COG\":\"LMC,SSF\",\"COM\":\"LIC,SSF\",\"CPV\":\"LMC,SSF\",\"ERI\":\"LIC,SSF\",\"ETH\":\"LIC,SSF\",\"GAB\":\"UMC,SSF\",\"GHA\":\"LMC,SSF\",\"GIN\":\"LIC,SSF\",\"GMB\":\"LIC,SSF\",\"GNB\":\"LIC,SSF\",\"GNQ\":\"NOC,SSF\",\"KEN\":\"LMC,SSF\",\"LBR\":\"LIC,SSF\",\"LSO\":\"LMC,SSF\",\"MDG\":\"LIC,SSF\",\"MLI\":\"LIC,SSF\",\"MOZ\":\"LIC,SSF\",\"MRT\":\"LMC,SSF\",\"MUS\":\"UMC,SSF\",\"MWI\":\"LIC,SSF\",\"NAM\":\"UMC,SSF\",\"NER\":\"LIC,SSF\",\"NGA\":\"LMC,SSF\",\"RWA\":\"LIC,SSF\",\"SDN\":\"LMC,SSF\",\"SEN\":\"LMC,SSF\",\"SLE\":\"LIC,SSF\",\"SOM\":\"LIC,SSF\",\"SSD\":\"LIC,SSF\",\"STP\":\"LMC,SSF\",\"SWZ\":\"LMC,SSF\",\"SYC\":\"NOC,SSF\",\"TCD\":\"LIC,SSF\",\"TGO\":\"LIC,SSF\",\"TZA\":\"LIC,SSF\",\"UGA\":\"LIC,SSF\",\"ZAF\":\"UMC,SSF\",\"ZMB\":\"LMC,SSF\",\"ZWE\":\"LIC,SSF\"}\n",
    "        \n",
    "        #Explore region dictionnary to store income and regional code associated to country code (iso3)  \n",
    "        for iso,region_iso in region_dict.items(): \n",
    "            if iso3==iso:\n",
    "                item=region_iso.split(',') #split the 2nd element of the dict by (,)\n",
    "                iso3inc=item[0] # store income code \n",
    "                iso3region=item[1] # store region code \n",
    "\n",
    "        #create empty arrays\n",
    "        category,serie,serie_inc,serie_region,serie_world=[],[],[],[],[]\n",
    "\n",
    "        #create the series\n",
    "        for t in range(-duration,1):    \n",
    "            category.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie_inc.append('(json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+ \\\n",
    "                             '])/(json[\"'+indicator+'\"][\"'+iso3inc+'\"][json[\"'+indicator+'\"][\"'+iso3inc+'\"][\"YearMax\"]+' + str(t)+'])*100',)\n",
    "            serie_region.append('(json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+ \\\n",
    "                                '])/(json[\"'+indicator+'\"][\"'+iso3region+'\"][json[\"'+indicator+'\"][\"'+iso3region+'\"][\"YearMax\"]+' + str(t)+'])*100',)\n",
    "            serie_world.append('(json[\"'+indicator+'\"][\"'+iso3+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"YearMax\"]+' + str(t)+ \\\n",
    "                                '])/(json[\"'+indicator+'\"][\"WLD\"][json[\"'+indicator+'\"][\"WLD\"][\"YearMax\"]+' + str(t)+'])*100',)\n",
    "               \n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie_inc=','.join(serie_inc)\n",
    "        serie_region=','.join(serie_region)\n",
    "        serie_world=','.join(serie_world)\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'dataset':dataset,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region,\\\n",
    "                 'indicator':indicator, 'category':category,'serie_inc':serie_inc,'serie_region':serie_region ,'serie_world':serie_world}\n",
    "\n",
    "        #Starting  writing HTML code\n",
    "        html='''\n",
    "        <!DOCTYPE html>\n",
    "        <html><head>\n",
    "        <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript'>\n",
    "\n",
    "        $(window).load(function() {\n",
    "\n",
    "           var data = \"$dataset$iso3.json\"; // link to the dataset\n",
    "\n",
    "           $.getJSON(data, function(json) {\n",
    "             $(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                //plotOptions: { column: { colorByPoint: true } },\n",
    "                colors: $color,title: {\n",
    "                   text: json[\"$indicator\"][\"label\"]+' convergence', x: -20 //center\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"], x: -20\n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1,\n",
    "                   categories: [ $category] //python created array \n",
    "                 , labels: {step:2}},      \n",
    "            yAxis: { title: { text: 'GDP congervence'},\n",
    "            plotLines : [{ value : 100, color : 'grey', dashStyle : 'shortdash', width:1, label : { text : 'Convergence level'}}],\n",
    "            minorGridLineWidth: 2,  gridLineWidth: 0  }, \n",
    "                tooltip: { formatter: function() {return '<b>'+ this.series.name +', '+ this.x +':</b><br/>'+ this.y.toPrecision(4)+'%'; } },\n",
    "                   plotOptions: { pline: { lineWidth: 3, states: { hover: { lineWidth: 3 } }, marker: { enabled: false, states: { hover: {enabled: true, symbol: 'circle', radius: 5, lineWidth: 1 } } } } },  \n",
    "                   series: [{\n",
    "                   name: json[\"$iso3\"][\"country\"]+'/'+json[\"$iso3\"][\"incomegroup\"],\n",
    "                   data: [$serie_inc]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"country\"]+'/'+json[\"$iso3\"][\"region\"],\n",
    "                   data: [ $serie_region]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"country\"]+'/World',\n",
    "                   data: [$serie_world]\n",
    "                 }]\n",
    "               });\n",
    "             });\n",
    "           });\n",
    "         });\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <div id=\"container\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/Convergance_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\",'w')\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        #generate an html file\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         ! Done => print chart address, display in ipython\n",
    "#=====================================================================================================================\n",
    "HTML('<iframe src=\"'+\"dataviz/Convergance_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  }
 ],
 "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.4.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}