Dataviz for dev builder.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": 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 3 May 11th, 2017*<br>\n",
    "\n",
    "![image](constructionWorker.jpg)\n",
    "\n",
    "#### &#9733;<i>Thomas Roca, PhD - AFD Research Direction &#9733;</i>\n",
    "## Dataviz available\n",
    "1. [IMF and World Bank WDI](#★--Dataviz-using-World-Bank-WDI-data-★)\n",
    "    - [One variable time series](#★-Line-chart-★:-One-variable-time-series)\n",
    "    - [Two variable time series](#★-Line-chart-★:-Two-variables-time-series)\n",
    "    - [Radar chart](#★-highchart-★:-Radar-chart)\n",
    "    - [Maps](#★-Maps-★:-World-and-regional-Maps)\n",
    "    - [Line charts / convergence](#★-Line-graph-★:-Convergence)\n",
    "\n",
    "2. [Gallup](#★--Dataviz-using-Gallup-World-Poll-data-★)\n",
    "    - [Radar chart 3var](#★-Radar-chart-★:-3-variables-from-the-GWP)\n",
    "    - [Radar chart 4var](#★-Radar-chart-★:-4-variables-from-the-GWP)\n",
    "    - [Radar chart 5var](#★-Radar-chart-★:-5-variables-from-the-GWP)\n",
    "    - [One var time series](#★-Time-Line-chart-★:-With-Gallup-WP)\n",
    "    - [Two var time series](#★-Time-Line-chart-★:-2-variables-With-Gallup-WP)\n",
    "    - [One var, 2 modalities](#★-Time-Line-chart-★:-1-variable,-2-modalities-With-Gallup-WP)\n",
    "    - [Maps](#★-Maps-with-Gallup-★:-World-and-regional-Maps)\n",
    "\n",
    "<span style=\"color:red\">\n",
    "<b>To do list</b><br>\n",
    "+ Convergence if no data missing and not 0!\n",
    "</span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "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": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "---\n",
    "\n",
    "# &#9733;  Dataviz using <span style=\"color:#285c8c\">World Bank WDI data</span> &#9733;  \n",
    "\n",
    "---\n",
    "\n",
    "**To do List:**\n",
    "-"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Production mecanism\n",
    "\n",
    "To create the dataviz presented on AFD countrydashboard, several script have been written, one by type of representation:\n",
    "- Line charts (with one or two variables)\n",
    "- Radar charts\n",
    "- Maps\n",
    "- convergence chart\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "indicator name: Move Permanently to Another Country\n",
      "dataset: ../data/GWP/GWP_Move Permanently to Another Country.json\n",
      "duration: 8\n",
      "--------------------\n"
     ]
    }
   ],
   "source": [
    "import json\n",
    "# This is an example of how to read the json file that contains meta data instruction for generating all dataviz\n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file: \n",
    "    data = json.load(data_file)\n",
    "\n",
    "indicatorlist=(data[\"GALLUP\"][\"Time_serie\"])\n",
    "\n",
    "for indicator in indicatorlist: \n",
    "    dataset=data[\"GALLUP\"][\"Time_serie\"][indicator][\"dataset\"]\n",
    "    duration=data[\"GALLUP\"][\"Time_serie\"][indicator][\"duration\"]\n",
    "    print(\"indicator name:\",indicator)\n",
    "    print(\"dataset:\",dataset)\n",
    "    print(\"duration:\",duration)\n",
    "    print(\"--------------------\")\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Line chart &#9733;: <span style=\"color:#285c8c\">One variable time series</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: GC.TAX.TOTL.GD.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: EG.USE.ELEC.KH.PC |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: EG.USE.COMM.FO.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: NY.GDP.PCAP.PP.KD |dataset: ../data/WB_WDI_ |duration: 20\n",
      "Process: FM.AST.DOMS.CN |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: MS.MIL.XPND.GD.ZS |dataset: ../data/WB_WDI2_ |duration: 30\n",
      "Process: EN.ATM.CO2E.PC |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: PCPIPCH |dataset: ../data/IMF_WEO_ |duration: 20\n",
      "Process: FS.AST.PRVT.GD.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: EG.IMP.CONS.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: PA.NUS.FCRF |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: NID_NGDP |dataset: ../data/IMF_WEO_ |duration: 30\n",
      "Process: NY.GDP.MKTP.KD.ZG |dataset: ../data/WB_WDI_ |duration: 20\n",
      "Process: SL.UEM.TOTL.ZS |dataset: ../data/WB_WDI_ |duration: 20\n",
      "Process: GGXWDG_NGDP |dataset: ../data/IMF_WEO_ |duration: 30\n",
      "\n",
      "*******************# Job Well done ! #********************\n",
      "\n"
     ]
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "import codecs\n",
    "\n",
    "#=============== Non automtic settings ======\n",
    "indicatorlist=['NY.GDP.MKTP.KD.ZG']\n",
    "duration=20\n",
    "dataset=\"../data/WB_WDI_\"\n",
    "#============================================\n",
    "\n",
    "#================================================ Settings ==============================================================\n",
    "#List of countries\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",
    "#color list\n",
    "color = ['#6e9fc5', '#ffdf51' ,'#a6ca6d' ,'#ad46d6' ,'#f26a2e','#00adef','#f4bb90'] \n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"WDI_IMF\"][\"Time_serie\"]\n",
    "#================================================ Settings ==============================================================\n",
    "\n",
    "#for indicator in indicatorlist:\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file:\n",
    "    dataset=data[\"WDI_IMF\"][\"Time_serie\"][indicator][\"dataset\"]\n",
    "    duration=data[\"WDI_IMF\"][\"Time_serie\"][indicator][\"duration\"]\n",
    "    print(\"Process:\",indicator,\"|dataset:\",dataset,\"|duration:\",duration)\n",
    "    \n",
    "    #set link to data sources\n",
    "    if dataset==\"../data/WB_WDI2_\" or dataset==\"../data/WB_WDI_\": link_source=\"http://data.worldbank.org/indicator/\"+indicator\n",
    "    if dataset==\"../data/IMF_WEO_\": link_source=\"../WEOsource.html#\"+indicator\n",
    "    \n",
    "    #Set exception for visibility \n",
    "    if indicator!=\"PA.NUS.FCRF\":\n",
    "        visible=\"true\" \n",
    "    else: visible=\"false\" \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\",\"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",
    "        #! Region dict 2 world banck has changed its code.. need to update dataviz\n",
    "        #region_dict= {\"BMU\":\"HIC,OED,WLD\",\"CAN\":\"HIC,OED,WLD\",\"USA\":\"HIC,OED,WLD\",\"ASM\":\"UMC,EAS,WLD\",\"AUS\":\"HIC,EAS,WLD\",\"BRN\":\"UMC,EAS,WLD\",\"CHN\":\"UMC,EAS,WLD\",\"FJI\":\"UMC,EAS,WLD\",\"FSM\":\"LMC,EAS,WLD\",\"GUM\":\"UMC,EAS,WLD\",\"HKG\":\"UMC,EAS,WLD\",\"IDN\":\"LMC,EAS,WLD\",\"JPN\":\"HIC,EAS,WLD\",\"KHM\":\"LIC,EAS,WLD\",\"KIR\":\"LMC,EAS,WLD\",\"KOR\":\"HIC,EAS,WLD\",\"LAO\":\"LMC,EAS,WLD\",\"MAC\":\"UMC,EAS,WLD\",\"MHL\":\"UMC,EAS,WLD\",\"MMR\":\"LMC,EAS,WLD\",\"MNG\":\"UMC,EAS,WLD\",\"MNP\":\"UMC,EAS,WLD\",\"MYS\":\"UMC,EAS,WLD\",\"NCL\":\"UMC,EAS,WLD\",\"NZL\":\"HIC,EAS,WLD\",\"PHL\":\"LMC,EAS,WLD\",\"PLW\":\"UMC,EAS,WLD\",\"PNG\":\"LMC,EAS,WLD\",\"PRK\":\"LIC,EAS,WLD\",\"PYF\":\"UMC,EAS,WLD\",\"SGP\":\"UMC,EAS,WLD\",\"SLB\":\"LMC,EAS,WLD\",\"THA\":\"UMC,EAS,WLD\",\"TLS\":\"LMC,EAS,WLD\",\"TON\":\"UMC,EAS,WLD\",\"TUV\":\"UMC,EAS,WLD\",\"TWN\":\"UMC,EAS,WLD\",\"VNM\":\"LMC,EAS,WLD\",\"VUT\":\"LMC,EAS,WLD\",\"WSM\":\"LMC,EAS,WLD\",\"ALB\":\"UMC,ECS,WLD\",\"AND\":\"UMC,ECS,WLD\",\"ARM\":\"LMC,ECS,WLD\",\"AUT\":\"HIC,ECS,WLD\",\"AZE\":\"UMC,ECS,WLD\",\"BEL\":\"HIC,ECS,WLD\",\"BGR\":\"UMC,ECS,WLD\",\"BIH\":\"UMC,ECS,WLD\",\"BLR\":\"UMC,ECS,WLD\",\"CHE\":\"HIC,ECS,WLD\",\"CHI\":\"UMC,ECS,WLD\",\"CYP\":\"UMC,ECS,WLD\",\"CZE\":\"HIC,ECS,WLD\",\"DEU\":\"HIC,ECS,WLD\",\"DNK\":\"HIC,ECS,WLD\",\"ESP\":\"HIC,ECS,WLD\",\"EST\":\"HIC,ECS,WLD\",\"FIN\":\"HIC,ECS,WLD\",\"FRA\":\"HIC,ECS,WLD\",\"FRO\":\"UMC,ECS,WLD\",\"GBR\":\"HIC,ECS,WLD\",\"GEO\":\"LMC,ECS,WLD\",\"GRC\":\"HIC,ECS,WLD\",\"GRL\":\"UMC,ECS,WLD\",\"HRV\":\"UMC,ECS,WLD\",\"HUN\":\"HIC,ECS,WLD\",\"IMN\":\"UMC,ECS,WLD\",\"IRL\":\"HIC,ECS,WLD\",\"ISL\":\"HIC,ECS,WLD\",\"ITA\":\"HIC,ECS,WLD\",\"KAZ\":\"UMC,ECS,WLD\",\"KGZ\":\"LMC,ECS,WLD\",\"LIE\":\"UMC,ECS,WLD\",\"LTU\":\"UMC,ECS,WLD\",\"LUX\":\"HIC,ECS,WLD\",\"LVA\":\"UMC,ECS,WLD\",\"MCO\":\"UMC,ECS,WLD\",\"MDA\":\"LMC,ECS,WLD\",\"MKD\":\"UMC,ECS,WLD\",\"MNE\":\"UMC,ECS,WLD\",\"NLD\":\"HIC,ECS,WLD\",\"NOR\":\"HIC,ECS,WLD\",\"POL\":\"HIC,ECS,WLD\",\"PRT\":\"HIC,ECS,WLD\",\"ROU\":\"UMC,ECS,WLD\",\"RUS\":\"UMC,ECS,WLD\",\"SMR\":\"HIC,ECS,WLD\",\"SRB\":\"UMC,ECS,WLD\",\"SVK\":\"HIC,ECS,WLD\",\"SVN\":\"HIC,ECS,WLD\",\"SWE\":\"HIC,ECS,WLD\",\"TJK\":\"LMC,ECS,WLD\",\"TKM\":\"UMC,ECS,WLD\",\"TUR\":\"UMC,ECS,WLD\",\"UKR\":\"LMC,ECS,WLD\",\"UZB\":\"LMC,ECS,WLD\",\"ABW\":\"HIC,LCN,WLD\",\"ARG\":\"HIC,LCN,WLD\",\"ATG\":\"HIC,LCN,WLD\",\"BHS\":\"HIC,LCN,WLD\",\"BLZ\":\"UMC,LCN,WLD\",\"BOL\":\"LMC,LCN,WLD\",\"BRA\":\"UMC,LCN,WLD\",\"BRB\":\"HIC,LCN,WLD\",\"CHL\":\"HIC,LCN,WLD\",\"COL\":\"UMC,LCN,WLD\",\"CRI\":\"UMC,LCN,WLD\",\"CUB\":\"UMC,LCN,WLD\",\"CUW\":\"HIC,LCN,WLD\",\"CYM\":\"HIC,LCN,WLD\",\"DMA\":\"UMC,LCN,WLD\",\"DOM\":\"UMC,LCN,WLD\",\"ECU\":\"UMC,LCN,WLD\",\"GRD\":\"UMC,LCN,WLD\",\"GTM\":\"LMC,LCN,WLD\",\"GUY\":\"LMC,LCN,WLD\",\"HND\":\"LMC,LCN,WLD\",\"HTI\":\"LIC,LCN,WLD\",\"JAM\":\"UMC,LCN,WLD\",\"KNA\":\"HIC,LCN,WLD\",\"LCA\":\"UMC,LCN,WLD\",\"MAF\":\"HIC,LCN,WLD\",\"MEX\":\"UMC,LCN,WLD\",\"NIC\":\"LMC,LCN,WLD\",\"PAN\":\"UMC,LCN,WLD\",\"PER\":\"UMC,LCN,WLD\",\"PRI\":\"HIC,LCN,WLD\",\"PRY\":\"UMC,LCN,WLD\",\"SLV\":\"LMC,LCN,WLD\",\"SUR\":\"UMC,LCN,WLD\",\"SXM\":\"HIC,LCN,WLD\",\"TCA\":\"HIC,LCN,WLD\",\"TTO\":\"HIC,LCN,WLD\",\"URY\":\"HIC,LCN,WLD\",\"VCT\":\"UMC,LCN,WLD\",\"VEN\":\"HIC,LCN,WLD\",\"VIR\":\"HIC,LCN,WLD\",\"ARE\":\"HIC,MEA,WLD\",\"BHR\":\"HIC,MEA,WLD\",\"DJI\":\"LMC,MEA,WLD\",\"DZA\":\"UMC,MEA,WLD\",\"EGY\":\"LMC,MEA,WLD\",\"IRN\":\"UMC,MEA,WLD\",\"IRQ\":\"UMC,MEA,WLD\",\"ISR\":\"HIC,MEA,WLD\",\"JOR\":\"UMC,MEA,WLD\",\"KWT\":\"HIC,MEA,WLD\",\"LBN\":\"UMC,MEA,WLD\",\"LBY\":\"UMC,MEA,WLD\",\"MAR\":\"LMC,MEA,WLD\",\"MLT\":\"HIC,MEA,WLD\",\"OMN\":\"HIC,MEA,WLD\",\"PSE\":\"LMC,MEA,WLD\",\"QAT\":\"HIC,MEA,WLD\",\"SAU\":\"HIC,MEA,WLD\",\"SYR\":\"LMC,MEA,WLD\",\"TUN\":\"UMC,MEA,WLD\",\"YEM\":\"LMC,MEA,WLD\",\"BMU\":\"HIC,OED,WLD\",\"CAN\":\"HIC,OED,WLD\",\"USA\":\"HIC,OED,WLD\",\"AFG\":\"LIC,SAS,WLD\",\"BGD\":\"LMC,SAS,WLD\",\"BTN\":\"LMC,SAS,WLD\",\"IND\":\"LMC,SAS,WLD\",\"LKA\":\"LMC,SAS,WLD\",\"MDV\":\"UMC,SAS,WLD\",\"NPL\":\"LIC,SAS,WLD\",\"PAK\":\"LMC,SAS,WLD\",\"AGO\":\"UMC,SSA,WLD\",\"BDI\":\"LIC,SSA,WLD\",\"BEN\":\"LIC,SSA,WLD\",\"BFA\":\"LIC,SSA,WLD\",\"BWA\":\"UMC,SSA,WLD\",\"CAF\":\"LIC,SSA,WLD\",\"CIV\":\"LMC,SSA,WLD\",\"CMR\":\"LMC,SSA,WLD\",\"COD\":\"LIC,SSA,WLD\",\"COG\":\"LMC,SSA,WLD\",\"COM\":\"LIC,SSA,WLD\",\"CPV\":\"LMC,SSA,WLD\",\"ERI\":\"LIC,SSA,WLD\",\"ETH\":\"LIC,SSA,WLD\",\"GAB\":\"UMC,SSA,WLD\",\"GHA\":\"LMC,SSA,WLD\",\"GIN\":\"LIC,SSA,WLD\",\"GMB\":\"LIC,SSA,WLD\",\"GNB\":\"LIC,SSA,WLD\",\"GNQ\":\"HIC,SSA,WLD\",\"KEN\":\"LMC,SSA,WLD\",\"LBR\":\"LIC,SSA,WLD\",\"LSO\":\"LMC,SSA,WLD\",\"MDG\":\"LIC,SSA,WLD\",\"MLI\":\"LIC,SSA,WLD\",\"MOZ\":\"LIC,SSA,WLD\",\"MRT\":\"LMC,SSA,WLD\",\"MUS\":\"UMC,SSA,WLD\",\"MWI\":\"LIC,SSA,WLD\",\"NAM\":\"UMC,SSA,WLD\",\"NER\":\"LIC,SSA,WLD\",\"NGA\":\"LMC,SSA,WLD\",\"RWA\":\"LIC,SSA,WLD\",\"SDN\":\"LMC,SSA,WLD\",\"SEN\":\"LMC,SSA,WLD\",\"SLE\":\"LIC,SSA,WLD\",\"SOM\":\"LIC,SSA,WLD\",\"SSD\":\"LIC,SSA,WLD\",\"STP\":\"LMC,SSA,WLD\",\"SWZ\":\"LMC,SSA,WLD\",\"SYC\":\"HIC,SSA,WLD\",\"TCD\":\"LIC,SSA,WLD\",\"TGO\":\"LIC,SSA,WLD\",\"TZA\":\"LIC,SSA,WLD\",\"UGA\":\"LIC,SSA,WLD\",\"ZAF\":\"UMC,SSA,WLD\",\"ZMB\":\"LMC,SSA,WLD\",\"ZWE\":\"LIC,SSA,WLD\"}\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,'link_source':link_source,'visible':visible,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region,'indicator_':indicator.replace('.','_')+\"_\", '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=UTF-8\">\n",
    "        <style type=\"text/css\">\n",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "        \n",
    "          </style>\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    " \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",
    "               var country=json[\"$iso3\"][\"country\"]\n",
    "               if (country.indexOf(\"Ivoire\") !== -1){country=\"Côte d'Ivoire\"}\n",
    "               var chart = new Highcharts.Chart({\n",
    "               \n",
    "            chart: {type: 'spline', renderTo: 'container'},\n",
    "            plotOptions: {\n",
    "                  series: {\n",
    "                    marker: {\n",
    "                      enabled: false\n",
    "                    },  \n",
    "                  }  \n",
    "                }, \n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text:json[\"$indicator\"][\"label\"], x: -20,\n",
    "                   style: {\"fontSize\": \"14px\"}\n",
    "                     }, credits: {\n",
    "                    enabled: false,\n",
    "                        },\n",
    "                 subtitle: { \n",
    "                 useHTML: true, // to allow target blank\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+\n",
    "                   json[\"data_source\"][\"Download_date\"] +'| '+ '<a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>'\n",
    "                   , 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: country,\n",
    "                   data: [$serie]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"incomegroup\"],\n",
    "                   data: [$serie_inc], visible:$visible\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"region\"],\n",
    "                   data: [ $serie_region], visible:$visible\n",
    "                 }, {\n",
    "                   name: 'World',\n",
    "                   data: [$serie_world], visible:$visible\n",
    "                 }]\n",
    "\n",
    "                  }, OnChartComplete);\n",
    "\n",
    "         $('#getcsv').click(function () {\n",
    "                       text=chart.getCSV()\n",
    "                    var textToSave = text\n",
    "                    var hiddenElement = document.createElement('a');\n",
    "                    hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                    hiddenElement.target = '_blank';\n",
    "                    hiddenElement.download = 'Data.csv';\n",
    "                    hiddenElement.click();\n",
    "                        });\n",
    "                \n",
    "                });\n",
    "\n",
    "\n",
    "                Highcharts.setOptions({\n",
    "                    chart: {\n",
    "                        style: {\n",
    "                            fontFamily: \"'Open Sans', sans-serif\"\n",
    "                        }\n",
    "\n",
    "                    }\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"https://data.afd.fr\" target=\"_blank\"> <img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "            });\n",
    "       \n",
    "        \n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "             \n",
    "        <div id=\"container\" style=\"width:100%; height: 330px; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"TimeSerie_$indicator_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "        \n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        with codecs.open(\"dataviz/TimeSerie_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\", \"w\", \"utf-8-sig\") as f:\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>')\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "print(\"\\n*******************# Job Well done ! #********************\\n\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Test with Gallup"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Move Permanently to Another Country |dataset: data/GWP/GWP_ |duration: 6\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/TimeSerie_Move Permanently to Another Country_AFG.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"400px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "import codecs\n",
    "#=============== Non automtic settings ======\n",
    "indicatorlist=['NY.GDP.MKTP.KD.ZG']\n",
    "duration=20\n",
    "dataset=\"../data/GWP_\"\n",
    "#============================================\n",
    "\n",
    "#================================================ Settings ==============================================================\n",
    "#List of countries\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",
    "iso3list=['AFG']\n",
    "\n",
    "#color list\n",
    "color = ['#6e9fc5', '#ffdf51' ,'#a6ca6d' ,'#ad46d6' ,'#f26a2e','#00adef','#f4bb90'] \n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_specific - Gallup.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Time_serie\"]\n",
    "#================================================ Settings ==============================================================\n",
    "\n",
    "#for indicator in indicatorlist:\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file:\n",
    "    dataset=data[\"GALLUP\"][\"Time_serie\"][indicator][\"dataset\"]\n",
    "    duration=data[\"GALLUP\"][\"Time_serie\"][indicator][\"duration\"]\n",
    "    print(\"Process:\",indicator,\"|dataset:\",dataset,\"|duration:\",duration)\n",
    "    \n",
    "    #set link to data sources\n",
    "    if dataset==\"data/WB_WDI2_\" or dataset==\"data/WB_WDI_\": link_source=\"http://data.worldbank.org/indicator/\"+indicator\n",
    "    if dataset==\"data/IMF_WEO_\": link_source=\"WEOsource.html#\"+indicator\n",
    "    if dataset==\"data/GWP_\": link_source=\"Gallup.html#\"+indicator\n",
    "    \n",
    "    #Set exception for visibility \n",
    "    if indicator!=\"PA.NUS.FCRF\":\n",
    "        visible=\"true\" \n",
    "    else: visible=\"false\" \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\",\"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",
    "        #! Region dict 2 world banck has changed its code.. need to update dataviz\n",
    "        #region_dict= {\"BMU\":\"HIC,OED,WLD\",\"CAN\":\"HIC,OED,WLD\",\"USA\":\"HIC,OED,WLD\",\"ASM\":\"UMC,EAS,WLD\",\"AUS\":\"HIC,EAS,WLD\",\"BRN\":\"UMC,EAS,WLD\",\"CHN\":\"UMC,EAS,WLD\",\"FJI\":\"UMC,EAS,WLD\",\"FSM\":\"LMC,EAS,WLD\",\"GUM\":\"UMC,EAS,WLD\",\"HKG\":\"UMC,EAS,WLD\",\"IDN\":\"LMC,EAS,WLD\",\"JPN\":\"HIC,EAS,WLD\",\"KHM\":\"LIC,EAS,WLD\",\"KIR\":\"LMC,EAS,WLD\",\"KOR\":\"HIC,EAS,WLD\",\"LAO\":\"LMC,EAS,WLD\",\"MAC\":\"UMC,EAS,WLD\",\"MHL\":\"UMC,EAS,WLD\",\"MMR\":\"LMC,EAS,WLD\",\"MNG\":\"UMC,EAS,WLD\",\"MNP\":\"UMC,EAS,WLD\",\"MYS\":\"UMC,EAS,WLD\",\"NCL\":\"UMC,EAS,WLD\",\"NZL\":\"HIC,EAS,WLD\",\"PHL\":\"LMC,EAS,WLD\",\"PLW\":\"UMC,EAS,WLD\",\"PNG\":\"LMC,EAS,WLD\",\"PRK\":\"LIC,EAS,WLD\",\"PYF\":\"UMC,EAS,WLD\",\"SGP\":\"UMC,EAS,WLD\",\"SLB\":\"LMC,EAS,WLD\",\"THA\":\"UMC,EAS,WLD\",\"TLS\":\"LMC,EAS,WLD\",\"TON\":\"UMC,EAS,WLD\",\"TUV\":\"UMC,EAS,WLD\",\"TWN\":\"UMC,EAS,WLD\",\"VNM\":\"LMC,EAS,WLD\",\"VUT\":\"LMC,EAS,WLD\",\"WSM\":\"LMC,EAS,WLD\",\"ALB\":\"UMC,ECS,WLD\",\"AND\":\"UMC,ECS,WLD\",\"ARM\":\"LMC,ECS,WLD\",\"AUT\":\"HIC,ECS,WLD\",\"AZE\":\"UMC,ECS,WLD\",\"BEL\":\"HIC,ECS,WLD\",\"BGR\":\"UMC,ECS,WLD\",\"BIH\":\"UMC,ECS,WLD\",\"BLR\":\"UMC,ECS,WLD\",\"CHE\":\"HIC,ECS,WLD\",\"CHI\":\"UMC,ECS,WLD\",\"CYP\":\"UMC,ECS,WLD\",\"CZE\":\"HIC,ECS,WLD\",\"DEU\":\"HIC,ECS,WLD\",\"DNK\":\"HIC,ECS,WLD\",\"ESP\":\"HIC,ECS,WLD\",\"EST\":\"HIC,ECS,WLD\",\"FIN\":\"HIC,ECS,WLD\",\"FRA\":\"HIC,ECS,WLD\",\"FRO\":\"UMC,ECS,WLD\",\"GBR\":\"HIC,ECS,WLD\",\"GEO\":\"LMC,ECS,WLD\",\"GRC\":\"HIC,ECS,WLD\",\"GRL\":\"UMC,ECS,WLD\",\"HRV\":\"UMC,ECS,WLD\",\"HUN\":\"HIC,ECS,WLD\",\"IMN\":\"UMC,ECS,WLD\",\"IRL\":\"HIC,ECS,WLD\",\"ISL\":\"HIC,ECS,WLD\",\"ITA\":\"HIC,ECS,WLD\",\"KAZ\":\"UMC,ECS,WLD\",\"KGZ\":\"LMC,ECS,WLD\",\"LIE\":\"UMC,ECS,WLD\",\"LTU\":\"UMC,ECS,WLD\",\"LUX\":\"HIC,ECS,WLD\",\"LVA\":\"UMC,ECS,WLD\",\"MCO\":\"UMC,ECS,WLD\",\"MDA\":\"LMC,ECS,WLD\",\"MKD\":\"UMC,ECS,WLD\",\"MNE\":\"UMC,ECS,WLD\",\"NLD\":\"HIC,ECS,WLD\",\"NOR\":\"HIC,ECS,WLD\",\"POL\":\"HIC,ECS,WLD\",\"PRT\":\"HIC,ECS,WLD\",\"ROU\":\"UMC,ECS,WLD\",\"RUS\":\"UMC,ECS,WLD\",\"SMR\":\"HIC,ECS,WLD\",\"SRB\":\"UMC,ECS,WLD\",\"SVK\":\"HIC,ECS,WLD\",\"SVN\":\"HIC,ECS,WLD\",\"SWE\":\"HIC,ECS,WLD\",\"TJK\":\"LMC,ECS,WLD\",\"TKM\":\"UMC,ECS,WLD\",\"TUR\":\"UMC,ECS,WLD\",\"UKR\":\"LMC,ECS,WLD\",\"UZB\":\"LMC,ECS,WLD\",\"ABW\":\"HIC,LCN,WLD\",\"ARG\":\"HIC,LCN,WLD\",\"ATG\":\"HIC,LCN,WLD\",\"BHS\":\"HIC,LCN,WLD\",\"BLZ\":\"UMC,LCN,WLD\",\"BOL\":\"LMC,LCN,WLD\",\"BRA\":\"UMC,LCN,WLD\",\"BRB\":\"HIC,LCN,WLD\",\"CHL\":\"HIC,LCN,WLD\",\"COL\":\"UMC,LCN,WLD\",\"CRI\":\"UMC,LCN,WLD\",\"CUB\":\"UMC,LCN,WLD\",\"CUW\":\"HIC,LCN,WLD\",\"CYM\":\"HIC,LCN,WLD\",\"DMA\":\"UMC,LCN,WLD\",\"DOM\":\"UMC,LCN,WLD\",\"ECU\":\"UMC,LCN,WLD\",\"GRD\":\"UMC,LCN,WLD\",\"GTM\":\"LMC,LCN,WLD\",\"GUY\":\"LMC,LCN,WLD\",\"HND\":\"LMC,LCN,WLD\",\"HTI\":\"LIC,LCN,WLD\",\"JAM\":\"UMC,LCN,WLD\",\"KNA\":\"HIC,LCN,WLD\",\"LCA\":\"UMC,LCN,WLD\",\"MAF\":\"HIC,LCN,WLD\",\"MEX\":\"UMC,LCN,WLD\",\"NIC\":\"LMC,LCN,WLD\",\"PAN\":\"UMC,LCN,WLD\",\"PER\":\"UMC,LCN,WLD\",\"PRI\":\"HIC,LCN,WLD\",\"PRY\":\"UMC,LCN,WLD\",\"SLV\":\"LMC,LCN,WLD\",\"SUR\":\"UMC,LCN,WLD\",\"SXM\":\"HIC,LCN,WLD\",\"TCA\":\"HIC,LCN,WLD\",\"TTO\":\"HIC,LCN,WLD\",\"URY\":\"HIC,LCN,WLD\",\"VCT\":\"UMC,LCN,WLD\",\"VEN\":\"HIC,LCN,WLD\",\"VIR\":\"HIC,LCN,WLD\",\"ARE\":\"HIC,MEA,WLD\",\"BHR\":\"HIC,MEA,WLD\",\"DJI\":\"LMC,MEA,WLD\",\"DZA\":\"UMC,MEA,WLD\",\"EGY\":\"LMC,MEA,WLD\",\"IRN\":\"UMC,MEA,WLD\",\"IRQ\":\"UMC,MEA,WLD\",\"ISR\":\"HIC,MEA,WLD\",\"JOR\":\"UMC,MEA,WLD\",\"KWT\":\"HIC,MEA,WLD\",\"LBN\":\"UMC,MEA,WLD\",\"LBY\":\"UMC,MEA,WLD\",\"MAR\":\"LMC,MEA,WLD\",\"MLT\":\"HIC,MEA,WLD\",\"OMN\":\"HIC,MEA,WLD\",\"PSE\":\"LMC,MEA,WLD\",\"QAT\":\"HIC,MEA,WLD\",\"SAU\":\"HIC,MEA,WLD\",\"SYR\":\"LMC,MEA,WLD\",\"TUN\":\"UMC,MEA,WLD\",\"YEM\":\"LMC,MEA,WLD\",\"BMU\":\"HIC,OED,WLD\",\"CAN\":\"HIC,OED,WLD\",\"USA\":\"HIC,OED,WLD\",\"AFG\":\"LIC,SAS,WLD\",\"BGD\":\"LMC,SAS,WLD\",\"BTN\":\"LMC,SAS,WLD\",\"IND\":\"LMC,SAS,WLD\",\"LKA\":\"LMC,SAS,WLD\",\"MDV\":\"UMC,SAS,WLD\",\"NPL\":\"LIC,SAS,WLD\",\"PAK\":\"LMC,SAS,WLD\",\"AGO\":\"UMC,SSA,WLD\",\"BDI\":\"LIC,SSA,WLD\",\"BEN\":\"LIC,SSA,WLD\",\"BFA\":\"LIC,SSA,WLD\",\"BWA\":\"UMC,SSA,WLD\",\"CAF\":\"LIC,SSA,WLD\",\"CIV\":\"LMC,SSA,WLD\",\"CMR\":\"LMC,SSA,WLD\",\"COD\":\"LIC,SSA,WLD\",\"COG\":\"LMC,SSA,WLD\",\"COM\":\"LIC,SSA,WLD\",\"CPV\":\"LMC,SSA,WLD\",\"ERI\":\"LIC,SSA,WLD\",\"ETH\":\"LIC,SSA,WLD\",\"GAB\":\"UMC,SSA,WLD\",\"GHA\":\"LMC,SSA,WLD\",\"GIN\":\"LIC,SSA,WLD\",\"GMB\":\"LIC,SSA,WLD\",\"GNB\":\"LIC,SSA,WLD\",\"GNQ\":\"HIC,SSA,WLD\",\"KEN\":\"LMC,SSA,WLD\",\"LBR\":\"LIC,SSA,WLD\",\"LSO\":\"LMC,SSA,WLD\",\"MDG\":\"LIC,SSA,WLD\",\"MLI\":\"LIC,SSA,WLD\",\"MOZ\":\"LIC,SSA,WLD\",\"MRT\":\"LMC,SSA,WLD\",\"MUS\":\"UMC,SSA,WLD\",\"MWI\":\"LIC,SSA,WLD\",\"NAM\":\"UMC,SSA,WLD\",\"NER\":\"LIC,SSA,WLD\",\"NGA\":\"LMC,SSA,WLD\",\"RWA\":\"LIC,SSA,WLD\",\"SDN\":\"LMC,SSA,WLD\",\"SEN\":\"LMC,SSA,WLD\",\"SLE\":\"LIC,SSA,WLD\",\"SOM\":\"LIC,SSA,WLD\",\"SSD\":\"LIC,SSA,WLD\",\"STP\":\"LMC,SSA,WLD\",\"SWZ\":\"LMC,SSA,WLD\",\"SYC\":\"HIC,SSA,WLD\",\"TCD\":\"LIC,SSA,WLD\",\"TGO\":\"LIC,SSA,WLD\",\"TZA\":\"LIC,SSA,WLD\",\"UGA\":\"LIC,SSA,WLD\",\"ZAF\":\"UMC,SSA,WLD\",\"ZMB\":\"LMC,SSA,WLD\",\"ZWE\":\"LIC,SSA,WLD\"}\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,'link_source':link_source,'visible':visible,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region,'indicator_':indicator.replace('.','_')+\"_\", '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=UTF-8\">\n",
    "        <style type=\"text/css\">\n",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "        \n",
    "          </style>\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    " \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",
    "               var country=json[\"$iso3\"][\"country\"]\n",
    "               if (country.indexOf(\"Ivoire\") !== -1){country=\"Côte d'Ivoire\"}\n",
    "               var chart = new Highcharts.Chart({\n",
    "               \n",
    "            chart: {type: 'spline', renderTo: 'container'},\n",
    "            plotOptions: {\n",
    "                  series: {\n",
    "                    marker: {\n",
    "                      enabled: false\n",
    "                    },  \n",
    "                  }  \n",
    "                }, \n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text:json[\"$indicator\"][\"label\"], x: -20,\n",
    "                   style: {\"fontSize\": \"14px\"}\n",
    "                     }, credits: {\n",
    "                    enabled: false,\n",
    "                        },\n",
    "                 subtitle: { \n",
    "                 useHTML: true, // to allow target blank\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+\n",
    "                   json[\"data_source\"][\"Download_date\"] +'| '+ '<a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>'\n",
    "                   , 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: country,\n",
    "                   data: [$serie]\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"incomegroup\"],\n",
    "                   data: [$serie_inc], visible:$visible\n",
    "                 }, {\n",
    "                   name: json[\"$iso3\"][\"region\"],\n",
    "                   data: [ $serie_region], visible:$visible\n",
    "                 }, {\n",
    "                   name: 'World',\n",
    "                   data: [$serie_world], visible:$visible\n",
    "                 }]\n",
    "\n",
    "                  }, OnChartComplete);\n",
    "\n",
    "         $('#getcsv').click(function () {\n",
    "                       text=chart.getCSV()\n",
    "                    var textToSave = text\n",
    "                    var hiddenElement = document.createElement('a');\n",
    "                    hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                    hiddenElement.target = '_blank';\n",
    "                    hiddenElement.download = 'Data.csv';\n",
    "                    hiddenElement.click();\n",
    "                        });\n",
    "                \n",
    "                });\n",
    "\n",
    "\n",
    "                Highcharts.setOptions({\n",
    "                    chart: {\n",
    "                        style: {\n",
    "                            fontFamily: \"'Open Sans', sans-serif\"\n",
    "                        }\n",
    "\n",
    "                    }\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "            });\n",
    "       \n",
    "        \n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <!-- script src=\"https://code.highcharts.com/highcharts.js\"></script -->\n",
    "        <!-- script src=\"https://code.highcharts.com/modules/exporting.js\"></script -->\n",
    "        \n",
    "        <div id=\"container\" style=\"width:100%; height: 330px; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"TimeSerie_$indicator_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "        \n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        with codecs.open(\"dataviz/TimeSerie_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\", \"w\", \"utf-8-sig\") as f:\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",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/TimeSerie_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"400px\"></iframe>')\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Line chart &#9733;: <span style=\"color:#285c8c\">Two variables time series</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: GGR_NGDP;GGX_NGDP |dataset: ../data/IMF_WEO_ |duration: 20\n",
      "Process: SL.UEM.TOTL.FE.ZS;SL.UEM.TOTL.MA.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: EN.ATM.GHGO.KT.CE;EN.ATM.METH.KT.CE |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: SL.EMP.INSV.FE.ZS;SL.TLF.CACT.FE.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: EG.USE.COMM.CL.ZS;EG.USE.CRNW.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: SE.XPD.TOTL.GD.ZS;SH.XPD.TOTL.ZS |dataset: data/WB_WDI2_ |duration: 30\n",
      "Process: IT.CEL.SETS.P2;IT.NET.USER.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: BCA_NGDPD;GGXCNL_NGDP |dataset: ../data/IMF_WEO_ |duration: 20\n",
      "Process: SE.ADT.1524.LT.FE.ZS;SE.ADT.1524.LT.MA.ZS |dataset: data/WB_WDI2_ |duration: 30\n",
      "Process: EG.ELC.ACCS.ZS;SH.H2O.SAFE.ZS |dataset: ../data/WB_WDI2_ |duration: 20\n",
      "Process: SP.DYN.LE00.FE.IN;SP.DYN.LE00.MA.IN |dataset: ../data/WB_WDI2_ |duration: 30\n",
      "\n",
      "*******************# Job Well done ! #********************\n",
      "\n"
     ]
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "import json\n",
    "import winsound\n",
    "import codecs\n",
    "\n",
    "#================================================ Settings ==============================================================\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",
    "#iso3list=['CIV']\n",
    "\n",
    "#Value substracted from YearMax -1 in the time serie eg \n",
    "duration_end=1\n",
    "\n",
    "color = ['#bc456b', '#e2a1b5','#355ca8','#b7bee5']\n",
    "indicatorlist=(data[\"WDI_IMF\"][\"Double_Time_serie\"])\n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:\n",
    "    data = json.load(data_file)\n",
    "\n",
    "indicatorlist=data[\"WDI_IMF\"][\"Double_Time_serie\"]\n",
    "#================================================ Settings ==============================================================\n",
    "\n",
    "for ind in indicatorlist:\n",
    "    dataset=data[\"WDI_IMF\"][\"Double_Time_serie\"][ind][\"dataset\"]\n",
    "    duration=data[\"WDI_IMF\"][\"Double_Time_serie\"][ind][\"duration\"]\n",
    "    item=ind.split(';')\n",
    "    indicator1=item[0]\n",
    "    indicator2=item[1]\n",
    "    print(\"Process:\",ind,\"|dataset:\",dataset,\"|duration:\",duration)\n",
    "    \n",
    "    #set options for marker visible (not by default but usefull of graph with few data e.g. literacy) \n",
    "    marker_enabled=\"false\"\n",
    "    if indicator1==\"SE.ADT.1524.LT.FE.ZS\" or indicator1==\"EG.ELC.ACCS.ZS\": marker_enabled=\"true\"\n",
    "    \n",
    "    #set link to data sources\n",
    "    if dataset==\"../data/WB_WDI2_\" or dataset==\"../data/WB_WDI_\": \n",
    "        link_source1=\"http://data.worldbank.org/indicator/\"+indicator1\n",
    "        link_source2=\"http://data.worldbank.org/indicator/\"+indicator2\n",
    "    if dataset==\"../data/IMF_WEO_\": \n",
    "        link_source1=\"WEOsource.html#\"+indicator1\n",
    "        link_source2=\"WEOsource.html#\"+indicator2\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\",\"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 = {'marker_enabled':marker_enabled,'dataset':dataset,'link_source1':link_source1,'link_source2':link_source2,'visible':visible,'color':color,'iso3':iso3,'iso3region':iso3region,'indicator1':indicator1,'indicator2':indicator2,\\\n",
    "                 'indicator1_':indicator1.replace('.','_')+\"_\",'indicator2_':indicator2.replace('.','_')+\"_\",'category':category, 'serie1':serie1,'serie2':serie2,'serie1_region':serie1_region,'serie2_region':serie2_region}\n",
    "\n",
    "    \n",
    "        #Starting HTML code\n",
    "        html='''\n",
    "        <!DOCTYPE html>\n",
    "        <html><head>\n",
    "        <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "        <style type=\"text/css\">\n",
    "            .button1 {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "                margin-left: 40%;\n",
    "            }\n",
    "            .button2 {\n",
    "                background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "            }\n",
    "            .button2:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            }\n",
    "            .button1:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "              </style>\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "\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",
    "                var country=json[\"$iso3\"][\"country\"]\n",
    "                if (country.indexOf(\"Ivoire\") !== -1){country=\"Côte d'Ivoire\"}\n",
    "                \n",
    "                var chart = new Highcharts.Chart({\n",
    "                   chart: {type: 'spline', renderTo: 'container'},\n",
    "                   plotOptions: {series: { marker: { enabled: $marker_enabled } } }, \n",
    "                    credits: {enabled:false},\n",
    "                 colors: $color,\n",
    "                 title: {\n",
    "                 \n",
    "                   text: json[\"$indicator1\"][\"label\"] +' <br> '+json[\"$indicator2\"][\"label\"], x: -20, \n",
    "                   style: {\"fontSize\": \"14px\"}\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                 useHTML: true, // to allow target blank\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"] +'|Data description: '+ '<a href=\"$link_source1\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">indicator1</a>' \n",
    "                                   +'| '+ '<a href=\"$link_source2\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">indicator2</a>',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: country + \" - \" + json[\"$indicator1\"][\"label\"],\n",
    "                   data: [$serie1]\n",
    "                 }, {\n",
    "                     name:  json[\"$iso3\"][\"region\"] + \" - \" + json[\"$indicator1\"][\"label\"],\n",
    "                   data: [ $serie1_region]\n",
    "                 }, {\n",
    "                 name: country + \" - \" + json[\"$indicator2\"][\"label\"],\n",
    "                   data: [$serie2]\n",
    "                 }, {\n",
    "                    name: json[\"$iso3\"][\"region\"]+ \" - \" + json[\"$indicator2\"][\"label\"],\n",
    "                   data: [ $serie2_region]\n",
    "                 }]\n",
    "              }, OnChartComplete);\n",
    "\n",
    "         $('#getcsv').click(function () {\n",
    "                       text=chart.getCSV()\n",
    "                    var textToSave = text\n",
    "                    var hiddenElement = document.createElement('a');\n",
    "                    hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                    hiddenElement.target = '_blank';\n",
    "                    hiddenElement.download = 'Data.csv';\n",
    "                    hiddenElement.click();\n",
    "                        });\n",
    "                \n",
    "                });\n",
    "                Highcharts.setOptions({\n",
    "                    chart: {\n",
    "                        style: {\n",
    "                            fontFamily: \"'Open Sans', sans-serif\"\n",
    "                        }\n",
    "\n",
    "                    }\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"https://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "            });\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "     \n",
    "        \n",
    "        <div id=\"container\" style=\"width: 100%; height: 400px; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"TimeSerie_$indicator1_&_$indicator2_$iso3.html\" target=\"_blank\" class=\"button1\">\n",
    "        <i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "        \n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        with codecs.open(\"dataviz/TimeSerie_\"+indicator1.replace('.','_')+'_&_'+indicator2.replace('.','_')+\"_\"+iso3+\".html\", \"w\", \"utf-8-sig\") as f:\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>')\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "print(\"\\n*******************# Job Well done ! #********************\\n\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "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": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import json\n",
    "import winsound\n",
    "\n",
    "with open('dataviz_production.json', encoding='UTF-8') as data_file: \n",
    "    data = json.load(data_file)\n",
    "\n",
    "indicatorlist=(data[\"WDI_IMF\"][\"Radar\"])\n",
    "for item in indicatorlist: \n",
    "    title=data[\"WDI_IMF\"][\"Radar\"][item][\"title\"]\n",
    "    dataset=data[\"WDI_IMF\"][\"Radar\"][item][\"dataset\"]\n",
    "    duration=data[\"WDI_IMF\"][\"Radar\"][item][\"duration\"]\n",
    "    indicator1=data[\"WDI_IMF\"][\"Radar\"][item][\"id1\"]\n",
    "    indicator2=data[\"WDI_IMF\"][\"Radar\"][item][\"id2\"]\n",
    "    indicator3=data[\"WDI_IMF\"][\"Radar\"][item][\"id3\"]\n",
    "    indicator4=data[\"WDI_IMF\"][\"Radar\"][item][\"id4\"]\n",
    "    indicator5=data[\"WDI_IMF\"][\"Radar\"][item][\"id5\"]\n",
    "    lenght=data[\"WDI_IMF\"][\"Radar\"][item][\"nb_dimension\"]+1 #+1 to fit with loop in davatiz script\n",
    "    print(\"indicator name:\",indicator1,indicator2,indicator3,indicator4,indicator5)\n",
    "    print(\"dataset:\",dataset)\n",
    "    print(\"duration:\",duration)\n",
    "    print(\"Nb dimension (+1):\",idlenght)\n",
    "    print(\"--------------------\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Services sociaux |dataset: ../data/WB_WDI2_ |ind: SH.XPD.PUBL | SH.XPD.OOPC.ZS | SP.POP.DPND.OL |  | \n",
      "Process: Pauvreté |dataset: ../data/WB_WDI2_ |ind: SI.POV.DDAY | SI.POV.NAHC | SI.POV.URHC | SI.POV.RUHC | \n",
      "Process: Inscriptions des élèves par niveau d'enseignement |dataset: ../data/WB_WDI2_ |ind: SE.PRM.ENRR | SE.SEC.ENRR | SE.TER.ENRR |  | \n",
      "Process: Services de santé |dataset: ../data/WB_WDI2_ |ind: SH.MED.BEDS.ZS | SH.MED.PHYS.ZS | SH.MED.NUMW.P3 |  | \n",
      "Process: Part des secteurs dans le PIB |dataset: ../data/WB_WDI_ |ind: NV.AGR.TOTL.ZS | NV.IND.TOTL.ZS | NV.SRV.TETC.ZS |  | \n",
      "Process: Capacité Statistiques |dataset: ../data/WB_WDI2_ |ind: IQ.SCI.OVRL | IQ.SCI.PRD | IQ.SCI.MTHD |  | \n",
      "Process: Population par groupe |dataset: ../data/WB_WDI_ |ind: SP.POP.0014.TO.ZS | SP.POP.1564.TO.ZS | SP.POP.65UP.TO.ZS |  | \n",
      "\n",
      "*******************# Job Well done ! #********************\n",
      "\n"
     ]
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "import json\n",
    "import winsound\n",
    "import codecs\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",
    "\n",
    "color = ['#bc456b', '#e2a1b5','#355ca8','#b7bee5']\n",
    "\n",
    "with open('dataviz_production.json', encoding='UTF-8') as data_file: \n",
    "    data = json.load(data_file)\n",
    "    \n",
    "indicatorlist=(data[\"WDI_IMF\"][\"Radar\"])\n",
    "for item in indicatorlist: \n",
    "    title=data[\"WDI_IMF\"][\"Radar\"][item][\"title\"]\n",
    "    dataset=data[\"WDI_IMF\"][\"Radar\"][item][\"dataset\"]\n",
    "    duration=data[\"WDI_IMF\"][\"Radar\"][item][\"duration\"]\n",
    "    indicator1=data[\"WDI_IMF\"][\"Radar\"][item][\"id1\"]\n",
    "    indicator2=data[\"WDI_IMF\"][\"Radar\"][item][\"id2\"]\n",
    "    indicator3=data[\"WDI_IMF\"][\"Radar\"][item][\"id3\"]\n",
    "    indicator4=data[\"WDI_IMF\"][\"Radar\"][item][\"id4\"]\n",
    "    indicator5=data[\"WDI_IMF\"][\"Radar\"][item][\"id5\"]\n",
    "    indlenght=data[\"WDI_IMF\"][\"Radar\"][item][\"nb_dimension\"]+1 #+1 to fit with loop in davatiz script\n",
    "    print(\"Process:\",item,\"|dataset:\",dataset,\"|ind:\",indicator1,\"|\",indicator2,\"|\",indicator3,\"|\",indicator4,\"|\",indicator5)\n",
    "    \n",
    "    #count the number of var in each serie, assign names i.e. indicator1... indicatorn\n",
    "    if dataset==\"../data/WB_WDI2_\" or dataset==\"../data/WB_WDI_\": \n",
    "        for var in range (1,indlenght):\n",
    "            vars()['link_source'+str(var)]=\"http://data.worldbank.org/indicator/\"+vars()['indicator'+str(var)]\n",
    "            \n",
    "    if dataset==\"../data/IMF_WEO_\":\n",
    "         for var in range (1,indlenght):\n",
    "            vars()['link_source'+str(var)]=\"http://afd.countrydashboards.com/dataviz/WEOsource.html#\"+vars()['indicator'+str(var)]\n",
    "    \n",
    "    source_link=\"\"\n",
    "    #WHAT NEED TO BE FIXED         \n",
    "    for var in range (1,indlenght):\n",
    "        source_link +='| <a href=\"'+vars()[\"link_source\"+str(var)]+'\"style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">'+\"indicator\"+str(var)+'</a>'\n",
    "    \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,'source_link':source_link,'color':color,'title':title,'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=UTF-8\">\n",
    "            <title>Country Dashboard </title>\n",
    "             <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "            <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "            <style type=\"text/css\">\n",
    "                .button1 {\n",
    "                   background-color: white;\n",
    "                    border: none;\n",
    "                    color: #6E9FC5;\n",
    "                    padding: 5px 12px;\n",
    "                    text-align: center;\n",
    "                    text-decoration: none;\n",
    "                    font-size: 11px;\n",
    "                    cursor: pointer;\n",
    "                    font-family: Calibri;\n",
    "                    margin-left: 40%;\n",
    "                }\n",
    "                .button2 {\n",
    "                    background-color: white;\n",
    "                    border: none;\n",
    "                    color: #6E9FC5;\n",
    "                    padding: 5px 12px;\n",
    "                    text-align: center;\n",
    "                    text-decoration: none;\n",
    "                    font-size: 11px;\n",
    "                    cursor: pointer;\n",
    "                    font-family: Calibri;\n",
    "                }\n",
    "                .button2:hover {\n",
    "                    background-color: #6E9FC5; \n",
    "                    color: white;\n",
    "                }\n",
    "                .button1:hover {\n",
    "                    background-color: #6E9FC5; \n",
    "                    color: white;\n",
    "                },\n",
    "                a, img { \n",
    "                    border:none !important ;\n",
    "                    outline:none !important ;\n",
    "                }\n",
    "              </style>\n",
    "            <script type='text/javascript'>\n",
    "\n",
    "            $(window).load(function() {\n",
    "\n",
    "               var data = \"$dataset$iso3.json\"; // link to the dataset\n",
    "\n",
    "        \n",
    "        $.getJSON(data, function(json) {\n",
    "                var country=json[\"$iso3\"][\"country\"]\n",
    "                if (country.indexOf(\"Ivoire\") !== -1){country=\"Côte d'Ivoire\"}\n",
    "            var chart = new Highcharts.Chart({\n",
    "            chart: {renderTo: 'containerRADAR', polar: true, type: 'line'},\n",
    "        \n",
    "        title: {text: \"$title\",x: 0, style: {\"fontSize\": \"14px\"}},\n",
    "        credits: { enabled: false },\n",
    "        subtitle: {useHTML: true, text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+ json[\"data_source\"][\"Download_date\"]+', Year: last availables' +'<br>Data description:$source_link'},\n",
    "        pane: {size: '85%'},\n",
    "\n",
    "       xAxis: {\n",
    "         categories:[$category],\n",
    "          tickmarkPlacement: 'on',lineWidth: 0\n",
    "        },\n",
    "\n",
    "       yAxis: {gridLineInterpolation: 'polygon', lineWidth: 0, tickInterval:1},\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: 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",
    "            }, OnChartComplete);\n",
    "        \n",
    "        $('#getcsv').click(function () {\n",
    "            text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "            });\n",
    "                 Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "            <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"Radar_$title_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        with codecs.open(\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\", \"w\", \"utf-8-sig\") as f:\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>')\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "print(\"\\n*******************# Job Well done ! #********************\\n\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "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": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true,
    "scrolled": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "--------------------\n",
      "indicator name: SM.POP.REFG\n",
      "dataset: ../data/WB_WDI2_\n",
      "--------------------\n",
      "SM.POP.REFG\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n",
      "--------------------\n",
      "indicator name: EG.ELC.ACCS.ZS\n",
      "dataset: ../data/WB_WDI2_\n",
      "--------------------\n",
      "EG.ELC.ACCS.ZS\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n",
      "--------------------\n",
      "indicator name: SP.POP.TOTL\n",
      "dataset: ../data/WB_WDI_\n",
      "--------------------\n",
      "SP.POP.TOTL\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n",
      "--------------------\n",
      "indicator name: IC.REG.PROC\n",
      "dataset: ../data/WB_WDI2_\n",
      "--------------------\n",
      "IC.REG.PROC\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n",
      "--------------------\n",
      "indicator name: IT.NET.USER.ZS\n",
      "dataset: ../data/WB_WDI2_\n",
      "--------------------\n",
      "IT.NET.USER.ZS\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n",
      "--------------------\n",
      "indicator name: NY.GDP.MKTP.KD.ZG\n",
      "dataset: ../data/WB_WDI_\n",
      "--------------------\n",
      "NY.GDP.MKTP.KD.ZG\n",
      "Map Africa: done\n",
      "Map Asia: done\n",
      "Map Europe: done\n",
      "Map Middle East: done\n",
      "Map North America: done\n",
      "Map South America: done\n",
      "Map Oceania: done\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/map_NY_GDP_MKTP_KD_ZG_oceania.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"575px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "import os\n",
    "import json\n",
    "import winsound\n",
    "import codecs\n",
    "\n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file: \n",
    "    data = json.load(data_file)\n",
    "\n",
    "indicatorlist=(data[\"WDI_IMF\"][\"Map\"])\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    \n",
    "    dataset=data[\"WDI_IMF\"][\"Map\"][indicator][\"dataset\"]\n",
    "    print(\"--------------------\")\n",
    "    print(\"indicator name:\",indicator)\n",
    "    print(\"dataset:\",dataset)\n",
    "    print(\"--------------------\")\n",
    "    \n",
    "    if dataset==\"../data/WB_WDI2_\" or dataset==\"../data/WB_WDI_\": link_source=\"http://data.worldbank.org/indicator/\"+indicator\n",
    "    if dataset==\"../data/IMF_WEO_\": link_source=\"WEOsource.html#\"+indicator\n",
    "        \n",
    "    #==================================================== Africa ============================================================\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",
    "    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",
    "    \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",
    "                 'indicator_africa':indicator.replace('.','_')+\"_africa\",'link_source':link_source}\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=UTF-8\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "             var chart = new Highcharts.Map({\n",
    "                chart: {\n",
    "                    renderTo: 'container'\n",
    "                },\n",
    "              title: { text: label, style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "                    tooltip: {shared: true, 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",
    "            }, OnChartComplete);\n",
    "            \n",
    "          $('#getcsv').click(function () {\n",
    "               text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "        });\n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "\n",
    "\n",
    "    <div id=\"container\"></div>\n",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "    <script src=\"export-csv.js\"></script> \n",
    "    <a href=\"map_$indicator_africa.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "    <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "    </body>\n",
    "    </html>\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",
    "    print(\"Map Africa: done\")\n",
    "    \n",
    "    #====================================================================================================================\n",
    "    #                                        Asia\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",
    "    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",
    "                 'indicator_asia':indicator.replace('.','_')+\"_asia\",'link_source':link_source}    \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=utf-8\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "             var chart = new Highcharts.Map({\n",
    "                chart: {\n",
    "                    renderTo: 'container'\n",
    "                },\n",
    "              title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "          $('#getcsv').click(function () {\n",
    "              text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "            });\n",
    "    Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "       \n",
    "\n",
    "    <div id=\"container\"></div>\n",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "    <script src=\"export-csv.js\"></script> \n",
    "    <a href=\"map_$indicator_asia.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "    <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\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",
    "    print(\"Map Asia: done\")\n",
    "    \n",
    "\n",
    "    #=====================================================================================================================\n",
    "    #                                    Europe\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",
    "    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",
    "                 'indicator_europe':indicator.replace('.','_')+\"_europe\", 'link_source':link_source}       \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=utf-8\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "             var chart = new Highcharts.Map({\n",
    "                chart: {\n",
    "                    renderTo: 'container'\n",
    "                },\n",
    "              title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "          $('#getcsv').click(function () {\n",
    "               text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "    });\n",
    "    Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "            \n",
    "        <div id=\"container\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"map_$indicator_europe.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "        </body>\n",
    "        </html>\n",
    "            '''\n",
    "    #==========================================\n",
    "    #        Writing the HTML file\n",
    "    #==========================================\n",
    "\n",
    "    #open an handle\n",
    "    with codecs.open(\"dataviz/map_\"+indicator.replace('.','_')+\"_europe.html\", \"w\", \"utf-8-sig\") as f:\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        print(\"Map Europe: done\")\n",
    "    \n",
    "    #=====================================================================================================================\n",
    "    #                                         Middle East\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",
    "    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",
    "                 'indicator_middle_east':indicator.replace('.','_')+\"_middle_east\",'link_source':link_source}      \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=utf-8\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "             var chart = new Highcharts.Map({\n",
    "                chart: {\n",
    "                    renderTo: 'container'\n",
    "                },\n",
    "              title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "             subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "             mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "             credits: { enabled: false },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "          $('#getcsv').click(function () {\n",
    "               text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "        });\n",
    "        Highcharts.setOptions({\n",
    "                        chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                    });\n",
    "                    function OnChartComplete(chart) { // on complete\n",
    "                                var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                $(\"#watermark\").append(span);\n",
    "                                span = $('#watermarkDetails');\n",
    "                                span.css('left', textX - span.width());\n",
    "                                span.css('top', textY + span.height());\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",
    "            \n",
    "            <div id=\"container\"></div>\n",
    "            <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "             <script src=\"export-csv.js\"></script>\n",
    "            <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "            <a href=\"map_$indicator_middle_east.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "            <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "            </body>\n",
    "            </html>\n",
    "            '''\n",
    "    #===============================\n",
    "    #   Writing the HTML file\n",
    "    #===============================\n",
    "\n",
    "    #open an handle\n",
    "    with codecs.open(\"dataviz/map_\"+indicator.replace('.','_')+\"_middle_east.html\", \"w\", \"utf-8-sig\") as f:\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        print(\"Map Middle East: done\")\n",
    "\n",
    "    #=====================================================================================================================\n",
    "    #                                                   North America\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",
    "    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",
    "                 'indicator_north_america':indicator.replace('.','_')+\"_north_america\",'link_source':link_source}      \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=UTF-8\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "                // Initiate the chart\n",
    "                 var chart = new Highcharts.Map({\n",
    "                    chart: {\n",
    "                        renderTo: 'container'\n",
    "                    },\n",
    "                  title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "                  subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "                  mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "                  credits: { enabled: false },\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",
    "                }, OnChartComplete);\n",
    "\n",
    "              $('#getcsv').click(function () {\n",
    "                   text=chart.getCSV()\n",
    "                var textToSave = text\n",
    "                var hiddenElement = document.createElement('a');\n",
    "                hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                hiddenElement.target = '_blank';\n",
    "                hiddenElement.download = 'Data.csv';\n",
    "                hiddenElement.click();\n",
    "                    });\n",
    "        });\n",
    "        Highcharts.setOptions({\n",
    "                        chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                    });\n",
    "                    function OnChartComplete(chart) { // on complete\n",
    "                                var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                $(\"#watermark\").append(span);\n",
    "                                span = $('#watermarkDetails');\n",
    "                                span.css('left', textX - span.width());\n",
    "                                span.css('top', textY + span.height());\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",
    "      \n",
    "        <div id=\"container\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"map_$indicator_north_america.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "        </body>\n",
    "        </html>\n",
    "        '''\n",
    "\n",
    "    #==============================================\n",
    "    #   Writing the HTML file\n",
    "    #===============================================\n",
    "\n",
    "    #open an handle\n",
    "    with codecs.open(\"dataviz/map_\"+indicator.replace('.','_')+\"_north_america.html\", \"w\", \"utf-8-sig\") as f:\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        print(\"Map North America: done\")\n",
    "\n",
    "    #=====================================================================================================================\n",
    "    #                                                   South America\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",
    "    Input0=[]\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",
    "                 'indicator_south_america':indicator.replace('.','_')+\"_south_america\",'link_source':link_source}            \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=utf-8\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "             var chart = new Highcharts.Map({\n",
    "                chart: {\n",
    "                    renderTo: 'container'\n",
    "                },\n",
    "              title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {useHTML: true,text: 'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "          $('#getcsv').click(function () {\n",
    "               text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "        });\n",
    "        Highcharts.setOptions({\n",
    "                        chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                    });\n",
    "                    function OnChartComplete(chart) { // on complete\n",
    "                                var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                $(\"#watermark\").append(span);\n",
    "                                span = $('#watermarkDetails');\n",
    "                                span.css('left', textX - span.width());\n",
    "                                span.css('top', textY + span.height());\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",
    "      \n",
    "        <div id=\"container\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        <a href=\"map_$indicator_south_america.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "        </body>\n",
    "        </html>\n",
    "\n",
    "\n",
    "        '''\n",
    "\n",
    "    #====================================\n",
    "    #   Writing the HTML file\n",
    "    #====================================\n",
    "\n",
    "    #open an handle\n",
    "    with codecs.open(\"dataviz/map_\"+indicator.replace('.','_')+\"_south_america.html\", \"w\", \"utf-8-sig\") as f:\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        print(\"Map South America: done\")\n",
    "\n",
    "    #=====================================================================================================================\n",
    "    #                                        Oceania\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",
    "    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",
    "                 'indicator_oceania':indicator.replace('.','_')+\"_oceania\",'link_source':link_source}           \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=utf-8\">\n",
    "        <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <link href='OpenSans.css' rel='stylesheet' type='text/css'>\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px; \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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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",
    "                     var chart = new Highcharts.Map({\n",
    "                        chart: {\n",
    "                            renderTo: 'container'\n",
    "                        },\n",
    "                    title: { text: label,style: {\"fontSize\": \"14px\"}},\n",
    "                    subtitle: {useHTML: true,\n",
    "                    text:'source: '+source +', Download date: '+downloaddate+'<br> Year: last availables | <a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>', x: -20 },\n",
    "                      mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "                      credits: { enabled: false },\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",
    "                    }, OnChartComplete);\n",
    "\n",
    "                  $('#getcsv').click(function () {\n",
    "                       text=chart.getCSV()\n",
    "                    var textToSave = text\n",
    "                    var hiddenElement = document.createElement('a');\n",
    "                    hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                    hiddenElement.target = '_blank';\n",
    "                    hiddenElement.download = 'Data.csv';\n",
    "                    hiddenElement.click();\n",
    "                        });\n",
    "            });\n",
    "            Highcharts.setOptions({\n",
    "                            chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                        });\n",
    "                        function OnChartComplete(chart) { // on complete\n",
    "                                    var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                    var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                    var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                    $(\"#watermark\").append(span);\n",
    "                                    span = $('#watermarkDetails');\n",
    "                                    span.css('left', textX - span.width());\n",
    "                                    span.css('top', textY + span.height());\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",
    "              \n",
    "            <div id=\"container\"></div>\n",
    "            <div id=\"watermark\" style=\"position:absolute; left:0px; top:10px; width:100%\"></div>\n",
    "            <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "            <script src=\"export-csv.js\"></script> \n",
    "            <a href=\"map_$indicator_oceania.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "            <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "\n",
    "            </body>\n",
    "            </html>\n",
    "            '''\n",
    "    #================================\n",
    "    #   Writing the HTML file\n",
    "    #================================\n",
    "    #open an handle\n",
    "    with codecs.open(\"dataviz/map_\"+indicator.replace('.','_')+\"_oceania.html\", \"w\", \"utf-8-sig\") as f:\n",
    "        #write the content within the handle\n",
    "        file_content = Template(html).safe_substitute(Input)\n",
    "        f.write(file_content)\n",
    "        f.close()\n",
    "        print(\"Map Oceania: done\")\n",
    "\n",
    "#generate an html file\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_oceania.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"575px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "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": 7,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/Convergance_NY_GDP_PCAP_PP_KD_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "import codecs\n",
    "#================================================ Options ==============================================================\n",
    "indicatorlist=['NY.GDP.PCAP.PP.KD']\n",
    "duration=35 #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",
    "#========================================================================================================================\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",
    "    #set link to data sources\n",
    "    if dataset==\"../data/WB_WDI2_\" or dataset==\"../data/WB_WDI_\": link_source=\"http://data.worldbank.org/indicator/\"+indicator\n",
    "    if dataset==\"../data/IMF_WEO_\": link_source=\"WEOsource.html#\"+indicator\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 = {'link_source':link_source,'dataset':dataset,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region,\\\n",
    "                 'indicator_':indicator.replace('.','_')+\"_\",'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=UTF-8\">\n",
    "        <style type=\"text/css\">\n",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "          </style>\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <link href='OpenSans.css' rel='stylesheet' type='text/css'>\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",
    "                \n",
    "                var country=json[\"CIV\"][\"country\"]\n",
    "                if (country.indexOf(\"Ivoire\") !== -1){country=\"Côte d'Ivoire\"}\n",
    "                var chart = new Highcharts.Chart({\n",
    "                chart: {type: 'spline', renderTo: 'container'},\n",
    "                colors: $color,title: {\n",
    "                   text: 'Convergence '+ json[\"$indicator\"][\"label\"], x: -20,\n",
    "                   style: {\"fontSize\": \"14px\"}\n",
    "                     },\n",
    "                 plotOptions: {series: { marker: { enabled: false } } }, \n",
    "                credits: { enabled: false },\n",
    "                 subtitle: { \n",
    "                 useHTML: true, // to allow target blank\n",
    "                   text: 'Source: '+ json[\"data_source\"][\"source\"] + ', Download date:'+\n",
    "                   json[\"data_source\"][\"Download_date\"] +'| '+ '<a href=\"$link_source\" style=\"color:#3386cd;text-decoration: underline;\" target=\"_blank\">Data description</a>'\n",
    "                   , 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',style: {\"fontSize\": \"14px\"}},\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",
    "                   \n",
    "                   series: [{\n",
    "                   name: country+'/'+json[\"$iso3\"][\"incomegroup\"],\n",
    "                   data: [$serie_inc]\n",
    "                 }, {\n",
    "                   name: country+'/'+json[\"$iso3\"][\"region\"],\n",
    "                   data: [ $serie_region]\n",
    "                 }, {\n",
    "                   name: country+'/World',\n",
    "                   data: [$serie_world]\n",
    "                 }]\n",
    "               }, OnChartComplete);\n",
    "\n",
    "              $('#getcsv').click(function () {\n",
    "            text=chart.getCSV()\n",
    "            var textToSave = text\n",
    "            var hiddenElement = document.createElement('a');\n",
    "            hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "            hiddenElement.target = '_blank';\n",
    "            hiddenElement.download = 'Data.csv';\n",
    "            hiddenElement.click();\n",
    "                });\n",
    "            });\n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "        });\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "      \n",
    "        <div id=\"container\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"../font-awesome-4.5.0/css/font-awesome.css\" />\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "        \n",
    "        <a href=\"Convergance_$indicator_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "       \n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        with codecs.open(\"dataviz/Convergance_\"+indicator.replace('.','_')+\"_\"+iso3+\".html\", \"w\", \"utf-8-sig\") as f:\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>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "---\n",
    "\n",
    "# &#9733;  Dataviz using <span style=\"color:#285c8c\">Gallup World Poll data</span> &#9733;  \n",
    "\n",
    "---\n",
    "\n",
    "**To do List:**\n",
    "- Create a smart code that will adapt according to the lenght of the indicator list instead of having 3 differents scripts (3 var, 4 var, 5 var)\n",
    "- Map\n",
    "- Line graph with 2 gallup var\n",
    "- Radar that mixes Gallup and non Gallup Data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Gallup dataset"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "done:  GWP_Corruption in Government.json  | File uploaded: 1\n",
      "done:  GWP_Corruption Within Businesses.json  | File uploaded: 2\n",
      "done:  GWP_Money Property Stolen.json  | File uploaded: 3\n",
      "done:  GWP_National Economy Getting Better.json  | File uploaded: 4\n",
      "done:  GWP_City Quality Healthcare.json  | File uploaded: 5\n",
      "done:  GWP_Confidence in National Government.json  | File uploaded: 6\n",
      "done:  GWP_Corruption in Government.json  | File uploaded: 7\n",
      "done:  GWP_Employment Status.json  | File uploaded: 8\n",
      "done:  GWP_Experience Anger Yesterday.json  | File uploaded: 9\n",
      "done:  GWP_Gay or Lesbian People.json  | File uploaded: 10\n",
      "done:  GWP_Honesty of Elections.json  | File uploaded: 11\n",
      "done:  GWP_Ideal Job.json  | File uploaded: 12\n",
      "done:  GWP_Life Today.json  | File uploaded: 13\n",
      "done:  GWP_Money Property Stolen.json  | File uploaded: 14\n",
      "done:  GWP_Preserve the Environment.json  | File uploaded: 15\n",
      "done:  GWP_Confidence in Judicial System.json  | File uploaded: 16\n",
      "done:  GWP_Corruption Within Businesses.json  | File uploaded: 17\n",
      "done:  GWP_Educational System.json  | File uploaded: 18\n",
      "done:  GWP_Employment Status.json  | File uploaded: 19\n",
      "done:  GWP_Experience Sadness Yesterday.json  | File uploaded: 20\n",
      "done:  GWP_Good Place for Intellectually Disabled.json  | File uploaded: 21\n",
      "done:  GWP_Learn Something.json  | File uploaded: 22\n",
      "done:  GWP_Life in Five Years.json  | File uploaded: 23\n",
      "done:  GWP_Quality of Air.json  | File uploaded: 24\n",
      "done:  GWP_Safe Walking Alone.json  | File uploaded: 25\n",
      "done:  GWP_Voiced Opinion to Official.json  | File uploaded: 26\n",
      "done:  GWP_Confidence in Local Police.json  | File uploaded: 27\n",
      "done:  GWP_Employment Status.json  | File uploaded: 28\n",
      "done:  GWP_Experience Worry Yesterday.json  | File uploaded: 29\n",
      "done:  GWP_Freedom of Media.json  | File uploaded: 30\n",
      "done:  GWP_Immigrants.json  | File uploaded: 31\n",
      "done:  GWP_Like What You Do Each Day.json  | File uploaded: 32\n",
      "done:  GWP_Overall City Satisfaction.json  | File uploaded: 33\n",
      "done:  GWP_Quality of Water.json  | File uploaded: 34\n",
      "done:  GWP_Confidence in Military.json  | File uploaded: 35\n",
      "done:  GWP_Employment Status.json  | File uploaded: 36\n",
      "done:  GWP_Experienced Enjoyment Yesterday.json  | File uploaded: 37\n",
      "done:  GWP_Felt Active and Productive.json  | File uploaded: 38\n",
      "done:  GWP_Freedom in Your Life.json  | File uploaded: 39\n",
      "done:  GWP_Racial Ethnic Minorities.json  | File uploaded: 40\n",
      "done:  GWP_Employment Status.json  | File uploaded: 41\n",
      "done:  GWP_National Economy Getting Better.json  | File uploaded: 42\n",
      "done:  GWP_City Economy Getting Better.json  | File uploaded: 43\n",
      "done:  GWP_Move Permanently to Another Country.json  | File uploaded: 44\n",
      "done all\n"
     ]
    }
   ],
   "source": [
    "import ftplib\n",
    "import winsound\n",
    "\n",
    "GWPlist=[\"GWP_Corruption in Government.json\",\"GWP_Corruption Within Businesses.json\",\"GWP_Money Property Stolen.json\",\"GWP_National Economy Getting Better.json\",\"GWP_City Quality Healthcare.json\",\"GWP_Confidence in National Government.json\",\"GWP_Corruption in Government.json\",\"GWP_Employment Status.json\",\"GWP_Experience Anger Yesterday.json\",\"GWP_Gay or Lesbian People.json\",\"GWP_Honesty of Elections.json\",\"GWP_Ideal Job.json\",\"GWP_Life Today.json\",\"GWP_Money Property Stolen.json\",\"GWP_Preserve the Environment.json\",\"GWP_Confidence in Judicial System.json\",\"GWP_Corruption Within Businesses.json\",\"GWP_Educational System.json\",\"GWP_Employment Status.json\",\"GWP_Experience Sadness Yesterday.json\",\"GWP_Good Place for Intellectually Disabled.json\",\"GWP_Learn Something.json\",\"GWP_Life in Five Years.json\",\"GWP_Quality of Air.json\",\"GWP_Safe Walking Alone.json\",\"GWP_Voiced Opinion to Official.json\",\"GWP_Confidence in Local Police.json\",\"GWP_Employment Status.json\",\"GWP_Experience Worry Yesterday.json\",\"GWP_Freedom of Media.json\",\"GWP_Immigrants.json\",\"GWP_Like What You Do Each Day.json\",\"GWP_Overall City Satisfaction.json\",\"GWP_Quality of Water.json\",\"GWP_Confidence in Military.json\",\"GWP_Employment Status.json\",\"GWP_Experienced Enjoyment Yesterday.json\",\"GWP_Felt Active and Productive.json\",\"GWP_Freedom in Your Life.json\",\"GWP_Racial Ethnic Minorities.json\",\"GWP_Employment Status.json\",\"GWP_National Economy Getting Better.json\",\"GWP_City Economy Getting Better.json\",\"GWP_Move Permanently to Another Country.json\"]\n",
    "pathname=\"afd.countrydashboards.com/dataviz/GWP/data\" #remote\n",
    "localpath=\"C:/Users/rocat/OneDrive/Python/Cloud_Notebook/Country dashboard/data/Gallup/json/\"\n",
    "password=\"bretagne1\"\n",
    "login=\"922717\"\n",
    "server = \"p12-preview.osmose-hebergement.com\"\n",
    "nbfile_uploaded=0\n",
    "\n",
    "for dataset in GWPlist:\n",
    "    session = ftplib.FTP(server,login, password)\n",
    "    file = open(localpath+dataset,'rb')   # file to send\n",
    "    session.cwd(pathname) # Move to the desired folder in server\n",
    "    session.storbinary('STOR '+dataset, file)     # send the file\n",
    "    file.close() # close file and FTP\n",
    "    nbfile_uploaded+=1\n",
    "    print(\"done: \",dataset,\" | File uploaded:\",nbfile_uploaded)\n",
    "    \n",
    "session.quit()\n",
    "print(\"done all\")\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Radar chart &#9733;: <span style=\"color:#285c8c\">3 variables from the GWP</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Satisfaction politique environnementale | Indicators Preserve the Environment & Quality of Air & Quality of Water | modalities: Satisfied & Satisfied & Satisfied\n",
      "Process: Satisfaction Ville, santé et éducation | Indicators City Quality Healthcare & Educational System & Overall City Satisfaction | modalities: Satisfied & Satisfied & Satisfied\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/Radar_Satisfaction Ville, santé et éducation_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import os\n",
    "from IPython.display import HTML\n",
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "\n",
    "#=============================== Uncomplete file to generate specific dataviz not all at one time ==================\n",
    "#with open('dataviz_specific.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "\n",
    "#=============================== complete mapping of dataviz to generate all of them at one time ==================\n",
    "# Read production instructions from json file: dataviz_production.json that contains mapping of all dataviz\n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"RadarM3\"]\n",
    "\n",
    "#========================================================================================================================\n",
    "#Iso3 list Gallup\n",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']\n",
    "#iso3list=['AFG']\n",
    "#the first item of the the lists below is the title and filename\n",
    "#indicator code by couples i.e. \";\"\n",
    "color = ['#83b3ea', '#4572A7', '#c3d69b', '#f4bb90' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "\n",
    "\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "        \n",
    "    #from production description json file:\n",
    "    indicator1=data[\"GALLUP\"][\"RadarM3\"][indicator][\"id1\"]\n",
    "    indicator2=data[\"GALLUP\"][\"RadarM3\"][indicator][\"id2\"]\n",
    "    indicator3=data[\"GALLUP\"][\"RadarM3\"][indicator][\"id3\"]\n",
    "    modality1=data[\"GALLUP\"][\"RadarM3\"][indicator][\"modality1\"]\n",
    "    modality2=data[\"GALLUP\"][\"RadarM3\"][indicator][\"modality2\"]\n",
    "    modality3=data[\"GALLUP\"][\"RadarM3\"][indicator][\"modality3\"]\n",
    "    dataset1=data[\"GALLUP\"][\"RadarM3\"][indicator][\"dataset1\"]\n",
    "    dataset2=data[\"GALLUP\"][\"RadarM3\"][indicator][\"dataset2\"]\n",
    "    dataset3=data[\"GALLUP\"][\"RadarM3\"][indicator][\"dataset3\"]\n",
    "    title=data[\"GALLUP\"][\"RadarM3\"][indicator][\"title\"]\n",
    "\n",
    "    print(\"Process:\",title,\"| Indicators\",indicator1,\"&\",indicator2,\"&\",indicator3,\"| modalities:\",modality1,\"&\",modality2,\"&\",modality2)\n",
    "#========================================================================================================================\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",
    "        serieCountry,serieRegion,category=[],[],[]\n",
    "\n",
    "        #create the series\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'serieCountry':serieCountry, 'color':color,'title':title, 'iso3':iso3,'iso3region':iso3region,\\\n",
    "                  'modality1':modality1,'modality2':modality2,'modality3':modality3, 'iso3inc': iso3inc,'indicator1':indicator1,\\\n",
    "                 'indicator2':indicator2, 'indicator3':indicator3,'category':category, 'title':title,'title_':title.replace('.','_')+\"_\"}\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",
    "                <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "                <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "                <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>\n",
    "\n",
    "                <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "                <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "                <style>\n",
    "                .button1 {\n",
    "                   background-color: white;\n",
    "                    border: none;\n",
    "                    color: #6E9FC5;\n",
    "                    padding: 5px 12px;\n",
    "                    text-align: center;\n",
    "                    text-decoration: none;\n",
    "                    font-size: 11px;\n",
    "                    cursor: pointer;\n",
    "                    font-family: Calibri;\n",
    "                    margin-left: 40%;\n",
    "                    }\n",
    "\n",
    "                .button1:hover {\n",
    "                    background-color: #6E9FC5; \n",
    "                    color: white;\n",
    "                },\n",
    "                a, img { \n",
    "                border:none !important ;\n",
    "                outline:none !important ;\n",
    "                }\n",
    "            </style>\n",
    "            <script type='text/javascript'>\n",
    "        $(window).load(function() {\n",
    "\n",
    "        $.when(\n",
    "\n",
    "            $.getJSON(\"data/GWP_$indicator1.json\", function(json) { \n",
    "            console.clear()\n",
    "            \n",
    "          serieVAR1 = [\n",
    "                        100*json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator1\"][\"WLD\"][\"$modality1\"][json[\"$indicator1\"][\"WLD\"][\"$modality1\"][\"YearMax\"]]\n",
    "                        ];\n",
    "            country=json[\"$indicator1\"][\"$iso3\"][\"country\"];\n",
    "            region=json[\"$indicator1\"][\"$iso3\"][\"region\"];\n",
    "            incomegroup=json[\"$indicator1\"][\"$iso3\"][\"incomegroup\"];\n",
    "            Yearv1=json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"];\n",
    "          }),\n",
    "\n",
    "          $.getJSON(\"data/GWP_$indicator2.json\", function(json) {\n",
    "          console.clear()\n",
    "          serieVAR2 = [ 100*json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator2\"][\"WLD\"][\"$modality2\"][json[\"$indicator2\"][\"WLD\"][\"$modality2\"][\"YearMax\"]]\n",
    "                        ];\n",
    "            Yearv2=json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"];\n",
    "          }),\n",
    "\n",
    "        $.getJSON(\"data/GWP_$indicator3.json\", function(json) {\n",
    "        console.clear()\n",
    "        serieVAR3 = [\n",
    "                        100*json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator3\"][\"WLD\"][\"$modality3\"][json[\"$indicator3\"][\"WLD\"][\"$modality3\"][\"YearMax\"]]\n",
    "                        ];\n",
    "             Yearv3=json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"];\n",
    "           })    \n",
    "\n",
    "        ).then(function() {\n",
    "\n",
    "                $(function () {\n",
    "\n",
    "        $('#containerRADAR').highcharts({\n",
    "\n",
    "            chart: {\n",
    "                polar: true,\n",
    "                type: 'line'\n",
    "            },\n",
    "            legend: {\n",
    "                      itemStyle: {fontSize: '10px',fontWeight: 'normal'}                \n",
    "                },\n",
    "            colors:$color,\n",
    "            title: {\n",
    "                text: '$title',  style: {\"fontSize\": \"14px\"}},\n",
    "                credits: { enabled: false },\n",
    "            pane: {size: '90%'},\n",
    "\n",
    "            xAxis: {\n",
    "                categories: [\"$indicator1, %$modality1 - \"+Yearv1+\"<br>(Last year available)\",\n",
    "                             \"$indicator2, %$modality2 - \"+Yearv2+\"<br>(Last year available)\",\n",
    "                             \"$indicator3, %$modality3 - \"+Yearv3+\"<br>(Last year available)\"],\n",
    "                tickmarkPlacement: 'on', lineWidth: 0\n",
    "            },\n",
    "\n",
    "            yAxis: {\n",
    "                gridLineInterpolation: 'polygon',\n",
    "                lineWidth: 0,\n",
    "                min: 0, max:100, \n",
    "                tickInterval:20,\n",
    "            },\n",
    "\n",
    "            tooltip: {\n",
    "                shared: true,\n",
    "                pointFormat: '<span style=\"color:{series.color}\">{series.name}: <b>{point.y:,.1f}%</b><br/>'\n",
    "            },\n",
    "            series: [{\n",
    "                type: \"area\",\n",
    "                name: country,\n",
    "                data: [serieVAR1[0],serieVAR2[0], serieVAR3[0]],\n",
    "                pointPlacement: 'on'\n",
    "            },{\n",
    "                name: region,\n",
    "                data: [serieVAR1[1],serieVAR2[1], serieVAR3[1]],\n",
    "                pointPlacement: 'on'\n",
    "            }, {\n",
    "                name:incomegroup, \n",
    "                data: [serieVAR1[2],serieVAR2[2], serieVAR3[2]],\n",
    "                pointPlacement: 'on'\n",
    "            },  {\n",
    "                name: 'World',\n",
    "                data:[serieVAR1[3],serieVAR2[3], serieVAR3[3]],\n",
    "                pointPlacement: 'on'\n",
    "            }]\n",
    "\n",
    "        }, OnChartComplete);\n",
    "\n",
    "\n",
    "        Highcharts.setOptions({\n",
    "                            chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                        });\n",
    "                        function OnChartComplete(chart) { // on complete\n",
    "                                    var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                    var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                    var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                    $(\"#watermark\").append(span);\n",
    "                                    span = $('#watermarkDetails');\n",
    "                                    span.css('left', textX - span.width());\n",
    "                                    span.css('top', textY + span.height());\n",
    "                            }\n",
    "\n",
    "        });\n",
    "\n",
    "              });\n",
    "            });\n",
    "        console.clear()\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",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <a href=\"Radar_$title_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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=\"Radar.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')\n",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Radar chart &#9733;: <span style=\"color:#285c8c\">4 variables from the GWP</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Bien-etre subjectif\n",
      "Process: Bien-etre subjectif | Indicators Experience Anger Yesterday & Experience Sadness Yesterday & Experience Worry Yesterday & Experienced Enjoyment Yesterday\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/Radar_Bien-etre subjectif_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "import os\n",
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "\n",
    "#========================== Manual settings ===============================================================\n",
    "indicatorlist=['Ideal Job;Yes, it is ideal','Learn Something;Yes','Like What You Do Each Day;5. Strongly agree',\\\n",
    "               'Felt Active and Productive;5. Strongly agree','Title;Satisfaction au travail']\n",
    "#========================================================================================================================\n",
    "color = ['#83b3ea', '#4572A7', '#c3d69b', '#f4bb90' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_specific - Gallup2.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"RadarM4\"]\n",
    "\n",
    "#========================================================================================================================\n",
    "#Iso3 list Gallup\n",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']\n",
    "#iso3list=['AFG']\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    print(indicator)\n",
    "    #from production description json file:\n",
    "    indicator1=data[\"GALLUP\"][\"RadarM4\"][indicator][\"id1\"]\n",
    "    indicator2=data[\"GALLUP\"][\"RadarM4\"][indicator][\"id2\"]\n",
    "    indicator3=data[\"GALLUP\"][\"RadarM4\"][indicator][\"id3\"]\n",
    "    indicator4=data[\"GALLUP\"][\"RadarM4\"][indicator][\"id4\"]\n",
    "    modality1=data[\"GALLUP\"][\"RadarM4\"][indicator][\"modality1\"]\n",
    "    modality2=data[\"GALLUP\"][\"RadarM4\"][indicator][\"modality2\"]\n",
    "    modality3=data[\"GALLUP\"][\"RadarM4\"][indicator][\"modality3\"]\n",
    "    modality4=data[\"GALLUP\"][\"RadarM4\"][indicator][\"modality4\"]\n",
    "    dataset1=data[\"GALLUP\"][\"RadarM4\"][indicator][\"dataset1\"]\n",
    "    dataset2=data[\"GALLUP\"][\"RadarM4\"][indicator][\"dataset2\"]\n",
    "    dataset3=data[\"GALLUP\"][\"RadarM4\"][indicator][\"dataset3\"]\n",
    "    dataset4=data[\"GALLUP\"][\"RadarM4\"][indicator][\"dataset4\"]\n",
    "    title=data[\"GALLUP\"][\"RadarM4\"][indicator][\"title\"]\n",
    "\n",
    "    print(\"Process:\",title,\"| Indicators\",indicator1,\"&\",indicator2,\"&\",indicator3,\"&\",indicator4,)\n",
    "\n",
    "#========================================================================================================================\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",
    "        serieCountry,serieRegion,category=[],[],[]\n",
    "\n",
    "        #create the series\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'serieCountry':serieCountry, 'color':color,'title':title, 'iso3':iso3,'iso3region':iso3region,\\\n",
    "                  'modality1':modality1,'modality2':modality2,'modality3':modality3,'modality4':modality4, 'iso3inc': iso3inc,\\\n",
    "                 'indicator1':indicator1,'indicator2':indicator2, 'indicator3':indicator3, 'indicator4':indicator4,'category':category, \\\n",
    "                 'title':title,'title_':title.replace('.','_')+\"_\"}\n",
    "\n",
    "        #Starting HTML code\n",
    "        html= '''\n",
    "                <!DOCTYPE html>\n",
    "                <html><head>\n",
    "                <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
    "                <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "                <title>Country Dashboard </title>\n",
    "                <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "                <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>\n",
    "                <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "                <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\"/>\n",
    "\n",
    "                <style>\n",
    "                .button1 {\n",
    "                background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "                margin-left: 40%;\n",
    "                }\n",
    "                .button1:hover {\n",
    "                    background-color: #6E9FC5; \n",
    "                    color: white;\n",
    "                },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "            </style>\n",
    "        <script type='text/javascript'>\n",
    "        $(window).load(function() {\n",
    "\n",
    "        $.when(\n",
    "\n",
    "            $.getJSON(\"data/GWP_$indicator1.json\", function(json) { \n",
    "            console.clear()\n",
    "          serieVAR1 = [\n",
    "                        100*json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator1\"][\"WLD\"][\"$modality1\"][json[\"$indicator1\"][\"WLD\"][\"$modality1\"][\"YearMax\"]]\n",
    "                        ];\n",
    "            country=json[\"$indicator1\"][\"$iso3\"][\"country\"];\n",
    "            region=json[\"$indicator1\"][\"$iso3\"][\"region\"];\n",
    "            incomegroup=json[\"$indicator1\"][\"$iso3\"][\"incomegroup\"];\n",
    "            Yearv1=json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"];\n",
    "          }),\n",
    "\n",
    "          $.getJSON(\"data/GWP_$indicator2.json\", function(json) {\n",
    "          console.clear()\n",
    "          serieVAR2 = [ 100*json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator2\"][\"WLD\"][\"$modality2\"][json[\"$indicator2\"][\"WLD\"][\"$modality2\"][\"YearMax\"]]\n",
    "                        ];\n",
    "            Yearv2=json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"];\n",
    "          }),\n",
    "\n",
    "        $.getJSON(\"data/GWP_$indicator3.json\", function(json) {\n",
    "        console.clear()\n",
    "        serieVAR3 = [\n",
    "                        100*json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator3\"][\"WLD\"][\"$modality3\"][json[\"$indicator3\"][\"WLD\"][\"$modality3\"][\"YearMax\"]]\n",
    "                        ];\n",
    "             Yearv3=json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"];\n",
    "           }),\n",
    "              $.getJSON(\"data/GWP_$indicator4.json\", function(json) {\n",
    "              console.clear()\n",
    "        serieVAR4 = [\n",
    "                        100*json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][\"YearMax\"]], //value for var1 country\n",
    "                        100*json[\"$indicator4\"][\"$iso3inc\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3inc\"][\"$modality4\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                        100*json[\"$indicator4\"][\"$iso3region\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3region\"][\"$modality4\"][\"YearMax\"]],\n",
    "                        100*json[\"$indicator4\"][\"WLD\"][\"$modality4\"][json[\"$indicator4\"][\"WLD\"][\"$modality4\"][\"YearMax\"]]\n",
    "                        ];\n",
    "             Yearv4=json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][\"YearMax\"];\n",
    "           })  \n",
    "\n",
    "        ).then(function() {\n",
    "\n",
    "                $(function () {\n",
    "\n",
    "        $('#containerRADAR').highcharts({\n",
    "            chart: {\n",
    "                polar: true,\n",
    "                type: 'line'\n",
    "            },\n",
    "            colors:$color,\n",
    "            title: {text: '$title',  style: {\"fontSize\": \"14px\"}},\n",
    "            credits: { enabled: false },\n",
    "            pane: {size: '80%'},\n",
    "            legend: {itemStyle: {fontSize: '10px',fontWeight: 'normal'}},\n",
    "            xAxis: {\n",
    "                categories: [\"$indicator1, %$modality1 - \"+Yearv1+\"<br>(Last year available)\",\n",
    "                             \"$indicator2, %$modality2 - \"+Yearv2+\"<br>(Last year available)\",\n",
    "                             \"$indicator3, %$modality3 - \"+Yearv3+\"<br>(Last year available)\",\n",
    "                             \"$indicator4, %$modality4 - \"+Yearv4+\"<br>(Last year available)\"],\n",
    "                tickmarkPlacement: 'on', lineWidth: 0\n",
    "            },\n",
    "\n",
    "            yAxis: {\n",
    "                gridLineInterpolation: 'polygon',\n",
    "                lineWidth: 0,\n",
    "                min: 0, max:100, \n",
    "                tickInterval:20,\n",
    "            },\n",
    "\n",
    "            tooltip: {\n",
    "                shared: true,\n",
    "                pointFormat: '<span style=\"color:{series.color}\">{series.name}: <b>{point.y:,.1f}%</b><br/>'\n",
    "            },\n",
    "            series: [{\n",
    "                type: \"area\",\n",
    "                name: country,\n",
    "                data: [serieVAR1[0],serieVAR2[0], serieVAR3[0], serieVAR4[0]],\n",
    "                pointPlacement: 'on'\n",
    "            },{\n",
    "                name: region,\n",
    "                data: [serieVAR1[1],serieVAR2[1], serieVAR3[1], serieVAR4[1]],\n",
    "                pointPlacement: 'on'\n",
    "            }, {\n",
    "                name:incomegroup, \n",
    "                data: [serieVAR1[2],serieVAR2[2], serieVAR3[2], serieVAR4[2]],\n",
    "                pointPlacement: 'on'\n",
    "            },  {\n",
    "                name: 'World',\n",
    "                data:[serieVAR1[3],serieVAR2[3], serieVAR3[3], serieVAR4[3]],\n",
    "                pointPlacement: 'on'\n",
    "            }]\n",
    "        }, OnChartComplete);\n",
    "\n",
    "\n",
    "        Highcharts.setOptions({\n",
    "                            chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                        });\n",
    "                        function OnChartComplete(chart) { // on complete\n",
    "                                    var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                    var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                    var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                    $(\"#watermark\").append(span);\n",
    "                                    span = $('#watermarkDetails');\n",
    "                                    span.css('left', textX - span.width());\n",
    "                                    span.css('top', textY + span.height());\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",
    "         <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "         <a href=\"Radar_$title_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "\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",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Radar chart &#9733;: <span style=\"color:#285c8c\">5 variables from the GWP</span>\n",
    "\n",
    "Not yet plugged to the json description database"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/Radar_Emploi_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"600px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "from ftplib import FTP\n",
    "import os\n",
    "\n",
    "#========================================================================================================================\n",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']\n",
    "\n",
    "#the first item of the the lists below is the title and filename\n",
    "#indicator code by couples i.e. \";\"\n",
    "color = ['#83b3ea', '#4572A7', '#c3d69b', '#f4bb90' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "\n",
    "#indicatorlist=['Economic Conditions;Good', 'Corruption in Government;No', 'Corruption Within Businesses;Yes', \\\n",
    "#               'Confidence in National Government;Yes','Confidence in Military;Yes','Title;Corruption']\n",
    "\n",
    "indicatorlist=['Employment Status;Employed full time for self','Employment Status;Employed full time for an employer',\\\n",
    "                 'Employment Status;Employed part time want full time','Employment Status;Unemployed',\\\n",
    "                 'Employment Status;Out of workforce', 'Title;Emploi']\n",
    "\n",
    "Nb_ind=len(indicatorlist)-1 # -1 because the last one is the title\n",
    "a=1\n",
    "for indicator in indicatorlist:\n",
    "    if a!=Nb_ind+1:\n",
    "        ind=indicator.split(';')    \n",
    "        vars()['indicator'+str(a)]=ind[0]\n",
    "        vars()['modality'+str(a)]=ind[1]\n",
    "    else:\n",
    "        ind=indicator.split(';') \n",
    "        title=ind[1]\n",
    "    a=a+1 \n",
    "#========================================================================================================================\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",
    "    serieCountry,serieRegion,category=[],[],[]\n",
    "\n",
    "    #create the series\n",
    " \n",
    "    #What will be substitute in the template function for HTML writing\n",
    "    Input = {'serieCountry':serieCountry, 'color':color,'title':title, 'iso3':iso3,'iso3region':iso3region,\\\n",
    "              'modality1':modality1,'modality2':modality2,'modality3':modality3,'modality4':modality4,'modality5':modality5, \\\n",
    "             'iso3inc': iso3inc, 'indicator1':indicator1,'indicator2':indicator2,'indicator3':indicator3,'indicator4':indicator4,\\\n",
    "             'indicator5':indicator5,'category':category, 'title':title,'title_':title.replace('.','_')+\"_\"}\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",
    "            <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "            <title>Country Dashboard </title>\n",
    "            <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "            <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>\n",
    "            <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "            <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "         \n",
    "            <style>\n",
    "            \n",
    "            .button1 {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "                margin-left: 40%;\n",
    "                }\n",
    "        \n",
    "            .button1:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "\n",
    "        </style>\n",
    "        \n",
    "        <script type='text/javascript'>\n",
    "\n",
    "    $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "    \n",
    "    $.getJSON(\"data/GWP_$indicator1.json\", function(json) { \n",
    "    console.clear()\n",
    "      serieVAR1 = [\n",
    "                    100*json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"]], //value for var1 country\n",
    "                    100*json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3inc\"][\"$modality1\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                    100*json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][json[\"$indicator1\"][\"$iso3region\"][\"$modality1\"][\"YearMax\"]],\n",
    "                    100*json[\"$indicator1\"][\"WLD\"][\"$modality1\"][json[\"$indicator1\"][\"WLD\"][\"$modality1\"][\"YearMax\"]]\n",
    "                    ];\n",
    "        country=json[\"$indicator1\"][\"$iso3\"][\"country\"];\n",
    "        region=json[\"$indicator1\"][\"$iso3\"][\"region\"];\n",
    "        incomegroup=json[\"$indicator1\"][\"$iso3\"][\"incomegroup\"];\n",
    "        Yearv1=json[\"$indicator1\"][\"$iso3\"][\"$modality1\"][\"YearMax\"];\n",
    "      }),\n",
    "      \n",
    "      $.getJSON(\"data/GWP_$indicator2.json\", function(json) { \n",
    "      console.clear()\n",
    "      serieVAR2 = [ 100*json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"]], //value for var1 country\n",
    "                    100*json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3inc\"][\"$modality2\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                    100*json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][json[\"$indicator2\"][\"$iso3region\"][\"$modality2\"][\"YearMax\"]],\n",
    "                    100*json[\"$indicator2\"][\"WLD\"][\"$modality2\"][json[\"$indicator2\"][\"WLD\"][\"$modality2\"][\"YearMax\"]]\n",
    "                    ];\n",
    "        Yearv2=json[\"$indicator2\"][\"$iso3\"][\"$modality2\"][\"YearMax\"];\n",
    "      }),\n",
    "\n",
    "    $.getJSON(\"data/GWP_$indicator3.json\", function(json) {\n",
    "    console.clear()\n",
    "    serieVAR3 = [\n",
    "                    100*json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"]], //value for var1 country\n",
    "                    100*json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3inc\"][\"$modality3\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                    100*json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][json[\"$indicator3\"][\"$iso3region\"][\"$modality3\"][\"YearMax\"]],\n",
    "                    100*json[\"$indicator3\"][\"WLD\"][\"$modality3\"][json[\"$indicator3\"][\"WLD\"][\"$modality3\"][\"YearMax\"]]\n",
    "                    ];\n",
    "         Yearv3=json[\"$indicator3\"][\"$iso3\"][\"$modality3\"][\"YearMax\"];\n",
    "       }),\n",
    "          $.getJSON(\"data/GWP_$indicator4.json\", function(json) {\n",
    "          console.clear()\n",
    "    serieVAR4 = [\n",
    "                    100*json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][\"YearMax\"]], //value for var1 country\n",
    "                    100*json[\"$indicator4\"][\"$iso3inc\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3inc\"][\"$modality4\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                    100*json[\"$indicator4\"][\"$iso3region\"][\"$modality4\"][json[\"$indicator4\"][\"$iso3region\"][\"$modality4\"][\"YearMax\"]],\n",
    "                    100*json[\"$indicator4\"][\"WLD\"][\"$modality4\"][json[\"$indicator4\"][\"WLD\"][\"$modality4\"][\"YearMax\"]]\n",
    "                    ];\n",
    "         Yearv4=json[\"$indicator4\"][\"$iso3\"][\"$modality4\"][\"YearMax\"];\n",
    "       }),\n",
    "       $.getJSON(\"data/GWP_$indicator5.json\", function(json) {\n",
    "       console.clear()\n",
    "    serieVAR5 = [\n",
    "                    100*json[\"$indicator5\"][\"$iso3\"][\"$modality5\"][json[\"$indicator5\"][\"$iso3\"][\"$modality5\"][\"YearMax\"]], //value for var1 country\n",
    "                    100*json[\"$indicator5\"][\"$iso3inc\"][\"$modality5\"][json[\"$indicator5\"][\"$iso3inc\"][\"$modality5\"][\"YearMax\"]], //value for var1 Income groupe\n",
    "                    100*json[\"$indicator5\"][\"$iso3region\"][\"$modality5\"][json[\"$indicator5\"][\"$iso3region\"][\"$modality5\"][\"YearMax\"]],\n",
    "                    100*json[\"$indicator5\"][\"WLD\"][\"$modality5\"][json[\"$indicator5\"][\"WLD\"][\"$modality5\"][\"YearMax\"]]\n",
    "                    ];\n",
    "         Yearv5=json[\"$indicator5\"][\"$iso3\"][\"$modality5\"][\"YearMax\"];\n",
    "       })  \n",
    "\n",
    "    ).then(function() {\n",
    "    \n",
    "            $(function () {\n",
    "\n",
    "    $('#containerRADAR').highcharts({\n",
    "\n",
    "        chart: {\n",
    "            polar: true,\n",
    "            type: 'line'\n",
    "        },\n",
    "        colors: $color,\n",
    "        title: {text: '$title', style: {\"fontSize\": \"14px\"} },\n",
    "        pane: {size: '85%' },\n",
    "        credits: { enabled: false },\n",
    "        legend: {itemStyle: {fontSize: '10px',fontWeight: 'normal'}},\n",
    "        xAxis: {\n",
    "            categories: [\"$indicator1, %$modality1 - \"+Yearv1+\"<br>(Last year available)\",\n",
    "                         \"$indicator2, %$modality2 - \"+Yearv2+\"<br>(Last year available)\",\n",
    "                         \"$indicator3, %$modality3 - \"+Yearv3+\"<br>(Last year available)\",\n",
    "                         \"$indicator4, %$modality4 - \"+Yearv4+\"<br>(Last year available)\",\n",
    "                         \"$indicator5, %$modality5 - \"+Yearv5+\"<br>(Last year available)\"],\n",
    "            tickmarkPlacement: 'on', lineWidth: 0\n",
    "        },\n",
    "\n",
    "        yAxis: {\n",
    "            gridLineInterpolation: 'polygon',\n",
    "            lineWidth: 0,\n",
    "            min: 0, max:100, \n",
    "            tickInterval:20,\n",
    "        },\n",
    "\n",
    "        tooltip: {\n",
    "            shared: true,\n",
    "            pointFormat: '<span style=\"color:{series.color}\">{series.name}: <b>{point.y:,.1f}%</b><br/>'\n",
    "        },\n",
    "        series: [{\n",
    "            type: \"area\",\n",
    "            name: country,\n",
    "            data: [serieVAR1[0],serieVAR2[0], serieVAR3[0], serieVAR4[0], serieVAR5[0]],\n",
    "            pointPlacement: 'on'\n",
    "        },{\n",
    "            name: region,\n",
    "            data: [serieVAR1[1],serieVAR2[1], serieVAR3[1], serieVAR4[1], serieVAR5[1]],\n",
    "            pointPlacement: 'on'\n",
    "        }, {\n",
    "            name:incomegroup, \n",
    "            data: [serieVAR1[2],serieVAR2[2], serieVAR3[2], serieVAR4[2], serieVAR5[2]],\n",
    "            pointPlacement: 'on'\n",
    "        },  {\n",
    "            name: 'World',\n",
    "            data:[serieVAR1[3],serieVAR2[3], serieVAR3[3], serieVAR4[3], serieVAR5[3]],\n",
    "            pointPlacement: 'on'\n",
    "        }]\n",
    "    }, OnChartComplete);\n",
    "\n",
    "    Highcharts.setOptions({\n",
    "                        chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                    });\n",
    "                    function OnChartComplete(chart) { // on complete\n",
    "                                var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                                var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                                var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                                $(\"#watermark\").append(span);\n",
    "                                span = $('#watermarkDetails');\n",
    "                                span.css('left', textX - span.width());\n",
    "                                span.css('top', textY + span.height());\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",
    "     <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    " <a href=\"Radar_$title_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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=\"Radar.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')\n",
    "HTML('<iframe src=\"'+\"dataviz/Radar_\"+title+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"600px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Time Line chart &#9733;: <span style=\"color:#285c8c\">With Gallup WP</span>\n",
    "In this version the data display are percentage expressed as value (0.5 for 50%) we use tooltip formating for this purpose"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Move Permanently to Another Country |dataset: data/GWP_Move Permanently to Another Country.json |duration: 10\n"
     ]
    }
   ],
   "source": [
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Time_serie\"]\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file:\n",
    "    dataset=data[\"GALLUP\"][\"Time_serie\"][indicator][\"dataset\"]\n",
    "    duration=data[\"GALLUP\"][\"Time_serie\"][indicator][\"duration\"]\n",
    "    print(\"Process:\",indicator,\"|dataset:\",dataset,\"|duration:\",duration)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Move Permanently to Another Country |modality: Like to move to another country |dataset: data/GWP_Move Permanently to Another Country.json |duration: 8\n",
      "Math.round(this.y*100) + '% of people would Like to move to another country'\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/TimeSerie_Move Permanently to Another Country_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "import os\n",
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "\n",
    "#=============== Manual Settings ==============\n",
    "indicatorlist=['Move Permanently to Another Country'] \n",
    "modality=\"Like to move to another country\"\n",
    "duration=7 #length of the time serie\n",
    "#==============================================\n",
    "\n",
    "\n",
    "#================================================ Options ==============================================================\n",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']\n",
    "\n",
    "color = ['#a362bc', '#b3a8c1', '#c3d69b', '#f4bb90' ,'#f26a2e','#00adef','#f4bb90'] #color list\n",
    "#========================================================================================================================\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Time_serie\"]\n",
    "\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file:\n",
    "    dataset=data[\"GALLUP\"][\"Time_serie\"][indicator][\"dataset\"]\n",
    "    duration=data[\"GALLUP\"][\"Time_serie\"][indicator][\"duration\"]\n",
    "    modality=data[\"GALLUP\"][\"Time_serie\"][indicator][\"modality\"]\n",
    "    print(\"Process:\",indicator,\"|modality:\",modality,\"|dataset:\",dataset,\"|duration:\",duration)\n",
    "\n",
    "    #set X-Axis Max. In most case Gallup Data deals with % i.e. a 0-1 range. In specific cases it use Value 0-10\n",
    "    AxisMax=1\n",
    "    tooltip=\"Math.round(this.y*100) + '% of people would \"+modality+\"'\"\n",
    "    print(tooltip)\n",
    "    #Deal with specific range\n",
    "    if modality==\"Value\": \n",
    "        AxisMax=10\n",
    "        tooltip=\"'is evaluated: '+this.y +'/10'\"\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",
    "        #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+'\"][\"'+modality+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_inc.append('json[\"'+indicator+'\"][\"'+iso3inc+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_region.append('json[\"'+indicator+'\"][\"'+iso3region+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie_world.append('json[\"'+indicator+'\"][\"WLD\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"WLD\"][\"'+modality+'\"][\"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 = {'tooltip':tooltip,'AxisMax':AxisMax,'indicator_':indicator.replace('.','_')+\"_\",'modality':modality, '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",
    "        <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>\n",
    "        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "        <style>\n",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "         .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "        </style>\n",
    "            <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "        <script type='text/javascript'>\n",
    "\n",
    "        $(window).load(function() {\n",
    "\n",
    "           var data = \"$dataset\"; // link to the dataset\n",
    "\n",
    "           $.getJSON(data, function(json) {\n",
    "           console.clear()\n",
    "             $(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                 plotOptions: {series: { marker: { enabled: false } } }, \n",
    "                credits: { enabled: false },\n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text: json[\"$indicator\"][\"label\"]+ ' (% $modality)' , x: -20, style: {\"fontSize\": \"13px\"} //center\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: 'Source: '+ json[\"$indicator\"][\"data_source\"][\"source\"] + ', Download date:'+ json[\"$indicator\"][\"data_source\"][\"Download_date\"], x: -20\n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1, \n",
    "                   categories: [ $category]//python created array \n",
    "                 },\n",
    "                 yAxis: {\n",
    "                   title: {\n",
    "                     text: json[\"$indicator\"][\"label\"] + ':'+ '$modality (nb. 0.5 = 50%)'\n",
    "                   },min: 0, max: $AxisMax,tickInterval:0.1, \n",
    "                   \n",
    "                   plotLines: [{\n",
    "                     value: 0,\n",
    "                     width: 1,\n",
    "                     color: '#808080'\n",
    "                   }]\n",
    "                 },\n",
    "                 tooltip: {\n",
    "                   valueDecimals: 2,\n",
    "                   \n",
    "                formatter: function() {return '<b>'+ this.series.name +', '+ this.x +'</b><br/>'+ $tooltip; } \n",
    "                 },\n",
    "                   series: [{\n",
    "                   name: json[\"$indicator\"][\"$iso3\"][\"country\"],\n",
    "                   data: [$serie]\n",
    "                 }, {\n",
    "                   name: json[\"$indicator\"][\"$iso3inc\"][\"country\"],\n",
    "                   data: [$serie_inc]\n",
    "                 }, {\n",
    "                   name: json[\"$indicator\"][\"$iso3region\"][\"country\"],\n",
    "                   data: [$serie_region]\n",
    "                 }, {\n",
    "                   name: 'World',\n",
    "                   data: [$serie_world]\n",
    "                 }]\n",
    "               }, OnChartComplete);\n",
    "               \n",
    "             });\n",
    "             \n",
    "           });\n",
    "           Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "         });\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <!-- script src=\"https://code.highcharts.com/highcharts.js\"></script -->\n",
    "        <!-- script src=\"https://code.highcharts.com/modules/exporting.js\"></script -->\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "        <div id=\"container\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <a href=\"TimeSerie_$indicator_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/TimeSerie_\"+indicator+\"_\"+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",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/TimeSerie_\"+indicator+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Time Line chart &#9733;: <span style=\"color:#285c8c\">2 variables With Gallup WP</span>\n",
    "- This script parse two differents json files and display a line graph"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: National Economy Getting Better & City Economy Getting Better |datasets: data/GWP_National Economy Getting Better.json & data/GWP_City Economy Getting Better.json | modalities: Getting better & Getting better |duration: 8\n",
      "Process: Life Today & Life in Five Years |datasets: data/GWP_Life Today.json & data/GWP_Life in Five Years.json | modalities: Value & Value |duration: 8\n",
      "Process: Money Property Stolen & Safe Walking Alone |datasets: data/GWP_Money Property Stolen.json & data/GWP_Safe Walking Alone.json | modalities: Yes & Yes |duration: 8\n",
      "Process: Corruption in Government & Corruption Within Businesses |datasets: data/GWP_Corruption in Government.json & data/GWP_Corruption Within Businesses.json | modalities: Yes & Yes |duration: 8\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/TimeSerie_Corruption Evolution_ZWE.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"600px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "import os\n",
    "from IPython.display import HTML\n",
    "#==== Manual Options =======\n",
    "indicatorlist=['Money Property Stolen;Yes;Safe Walking Alone;Yes;Title;Sentiment de sécurité']\n",
    "indicatorlist=['Life Today;Value;Life in Five Years;Value;Title;Satisfaction des population (0-10)'] #beware no % with this one\n",
    "indicatorlist=['Corruption in Government;Yes;Corruption Within Businesses;Yes;Title;Corruption Evolution']\n",
    "indicatorlist=['National Economy Getting Better;Getting better;City Economy Getting Better;Getting better;Title;Conditions Economiques']\n",
    "#========================================================================================================================\n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Double_Time_serie\"]\n",
    "\n",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']         \n",
    "          \n",
    "color = ['#bc456b','#e2a1b5','#355ca8','#b7bee5']\n",
    "\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file:\n",
    "    indicator1=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"id1\"]\n",
    "    indicator2=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"id2\"]\n",
    "    modality1=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"modality1\"]\n",
    "    modality2=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"modality2\"]\n",
    "    dataset1=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"dataset1\"]\n",
    "    dataset2=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"dataset2\"]\n",
    "    title=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"title\"]\n",
    "    duration=data[\"GALLUP\"][\"Double_Time_serie\"][indicator][\"duration\"]\n",
    "    print(\"Process:\",indicator1,\"&\",indicator2,\"|datasets:\",dataset1,\"&\",dataset2,\"| modalities:\",modality1,\"&\",modality2,\"|duration:\",duration)\n",
    "    \n",
    "    #set X-Axis Max. In most case Gallup Data deals with % i.e. a 0-1 range. In specific cases it use Value 0-10\n",
    "    AxisMax=1\n",
    "    tooltip=\"Math.round(this.y*100) +  '% of people thinking'\"\n",
    "     \n",
    "    #Deal with specific range\n",
    "    if modality1==\"Value\": \n",
    "        AxisMax=10\n",
    "        tooltip=\"'is evaluated: '+this.y +'/10'\"\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,serie1,serie1_region,serie2,serie2_region=[],[],[],[],[]\n",
    "\n",
    "        #create the series\n",
    "        for t in range(-duration,1):    \n",
    "            category.append('json[\"'+indicator1+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie1.append('json[\"'+indicator1+'\"][\"'+iso3+'\"][\"'+modality1+'\"][json[\"'+indicator1+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie1_region.append('json[\"'+indicator1+'\"][\"'+iso3region+'\"][\"'+modality1+'\"][json[\"'+indicator1+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2.append('json[\"'+indicator2+'\"][\"'+iso3+'\"][\"'+modality2+'\"][json[\"'+indicator2+'\"][\"'+iso3+'\"][\"'+modality2+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2_region.append('json[\"'+indicator2+'\"][\"'+iso3region+'\"][\"'+modality2+'\"][json[\"'+indicator2+'\"][\"'+iso3+'\"][\"'+modality2+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie1=','.join(serie1)\n",
    "        serie1_region=','.join(serie1_region)\n",
    "        serie2=','.join(serie2)\n",
    "        serie2_region=','.join(serie2_region)\n",
    "        \n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'tooltip':tooltip,'AxisMax':AxisMax,'modality1':modality1,'modality2':modality2,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, \\\n",
    "                 'iso3region':iso3region,'indicator1':indicator1, 'indicator2':indicator2,'category':category, 'serie1':serie1, \\\n",
    "                 'serie1_region':serie1_region,'serie2':serie2,'serie2_region':serie2_region, 'title':title, 'title_':title.replace('.','_')+\"_\",'indicator1_':indicator1.replace('.','_')+\"_\",'indicator2_':indicator2.replace('.','_')+\"_\"}\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",
    "        <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>\n",
    "        <script type='text/javascript' src='jquery-1.9.1.js'></script>  <style>\n",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "         .button2 {\n",
    "            background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "        }\n",
    "        .button2:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "        </style>\n",
    "            <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "        <script type='text/javascript'>\n",
    "\n",
    "        $(window).load(function() {\n",
    "        $.when(\n",
    "            $.getJSON(\"data/GWP_$indicator1.json\", function(json) {\n",
    "            console.clear()\n",
    "              category = [$category];\n",
    "              serie1 = [$serie1];\n",
    "              serie1_region = [$serie1_region];\n",
    "              //console.log(serie1)\n",
    "              //console.log(serie1_region)\n",
    "              country = json[\"$indicator1\"][\"$iso3\"][\"country\"];\n",
    "              region = json[\"$indicator1\"][\"$iso3\"][\"region\"];\n",
    "            }),\n",
    "            $.getJSON(\"data/GWP_$indicator2.json\", function(json) {\n",
    "            console.clear()\n",
    "              serie2 = [$serie2];\n",
    "              serie2_region = [$serie2_region]\n",
    "              //console.log(serie2)\n",
    "              //console.log(serie2_region)\n",
    "            })\n",
    "          ).then(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                plotOptions: {series: { marker: { enabled: false } } }, \n",
    "                credits: { enabled: false },\n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text: '$indicator1 (%$modality1) &<br> $indicator2 (%$modality2)' , x: -20, style: {\"fontSize\": \"13px\"}\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: '', x: -20\n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1, \n",
    "                   categories:category//python created array \n",
    "                 },\n",
    "                 yAxis: {\n",
    "                   title: {text:'modality1 (nb. 0.5 = 50%)'}, //'Value'},//'modality1 (nb. 0.5 = 50%)'},\n",
    "                   min: 0,\n",
    "                   max: $AxisMax, \n",
    "                   tickInterval:0.1, //1, //0.1, \n",
    "                   labels: { format: '{value}'},\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",
    "                   valueDecimals: 2,\n",
    "                   formatter: function() {return '<b>'+ this.series.name +', '+ this.x +'</b><br/>'+ $tooltip; } \n",
    "                   \n",
    "                 },\n",
    "                   series: [\n",
    "                   {\n",
    "                   name: country+', $indicator1',\n",
    "                   data: serie1\n",
    "                 },{\n",
    "                   name: region+', $indicator1',\n",
    "                   data: serie1_region\n",
    "                 },{\n",
    "                   name: country+', $indicator2',\n",
    "                   data: serie2\n",
    "                 },{\n",
    "                   name: region+', $indicator2',\n",
    "                   data: serie2_region\n",
    "                 } ]\n",
    "              }, OnChartComplete);\n",
    "\n",
    "                Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\n",
    "                    }\n",
    "             }); // end of then function\n",
    "         }); // end of on load function\n",
    "\n",
    "        </script></head><body>\n",
    "        <script src=\"highcharts.js\"></script>\n",
    "        <script src=\"exporting.js\"></script>\n",
    "        <!-- script src=\"https://code.highcharts.com/highcharts.js\"></script -->\n",
    "        <!-- script src=\"https://code.highcharts.com/modules/exporting.js\"></script -->\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "        <div id=\"container\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "        <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "        <a href=\"TimeSerie_$title_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/TimeSerie_\"+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",
    "winsound.PlaySound(\"SystemExit\", winsound.SND_ALIAS)\n",
    "HTML('<iframe src=\"'+\"dataviz/TimeSerie_\"+title+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"600px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## &#9733; Time Line chart &#9733;: <span style=\"color:#285c8c\">1 variable, 2 modalities With Gallup WP</span>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": 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",
    "iso3list=['AFG','ALB','DZA','AGO','ARG','ARM','AUS','AUT','AZE','BHR','BGD','BLR','BEL','BLZ','BEN','BTN','BOL','BIH',\\\n",
    "          'BWA','BRA','BGR','BFA','BDI','KHM','CMR','CAN','CAF','TCD','CHL','CHN','COL','COM','COD','COG','CRI','CIV',\\\n",
    "          'HRV','CUB','CYP','CZE','DNK','DJI','DOM','ECU','EGY','SLV','EST','ETH','FIN','FRA','GAB','GEO','DEU','GHA',\\\n",
    "          'GRC','GTM','GIN','GUY','HTI','HND','HKG','HUN','ISL','IND','IDN','IRN','IRQ','IRL','ISR','ITA','JAM','JPN',\\\n",
    "          'JOR','KAZ','KEN','UNK','KWT','KGZ','LAO','LVA','LBN','LSO','LBR','LBY','LTU','LUX','MKD','MDG','MWI','MYS',\\\n",
    "          'MLI','MLT','MRT','MUS','MEX','MDA','MNG','MNE','MAR','MOZ','MMR','NaN','NAM','NPL','NLD','NZL','NIC','NER',\\\n",
    "          'NGA','NaN','NOR','OMN','PAK','PSE','PAN','PRY','PER','PHL','POL','PRT','PRI','QAT','ROU','RUS','RWA','SAU',\\\n",
    "          'SEN','SRB','SLE','SGP','SVK','SVN','SOM','NaN','ZAF','KOR','SSD','ESP','LKA','SDN','SUR','SWZ','SWE','CHE',\\\n",
    "          'SYR','TWN','TJK','TZA','THA','TGO','TTO','TUN','TUR','TKM','UGA','UKR','ARE','GBR','USA','URY','UZB','VEN',\\\n",
    "          'VNM','YEM','ZMB','ZWE']\n",
    "\n",
    "indicatorlist=['Corruption in Government'] #Indicator code (as existing in json datasets)\n",
    "modality1=\"Yes\"\n",
    "modality2=\"No\"\n",
    "duration=6 #length of the time serie\n",
    "color = ['#bc456b', '#e2a1b5','#355ca8',  '#b7bee5']#color list\n",
    "#dataset=\"data/json country/Asus/WB glance/WB_WDI_\" #dataset url - minus iso3 country code\n",
    "#========================================================================================================================\n",
    "\n",
    "#Loop over indicator list\n",
    "for indicator in indicatorlist:\n",
    "    \n",
    "    dataset=\"data/GWP_\"+indicator+\".json\"\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,serie1,serie1_region,serie2,serie2_region=[],[],[],[],[]\n",
    "\n",
    "        #create the series\n",
    "        for t in range(-duration,1):    \n",
    "            category.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"] +'+ str(t),)\n",
    "            serie1.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality1+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie1_region.append('json[\"'+indicator+'\"][\"'+iso3region+'\"][\"'+modality1+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality1+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2.append('json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality2+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality2+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "            serie2_region.append('json[\"'+indicator+'\"][\"'+iso3region+'\"][\"'+modality2+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality2+'\"][\"YearMax\"]+' + str(t)+']',)\n",
    "\n",
    "        #get rid of quotation mark in the list\n",
    "        category=','.join(category)\n",
    "        serie1=','.join(serie1)\n",
    "        serie1_region=','.join(serie1_region)\n",
    "        serie2=','.join(serie2)\n",
    "        serie2_region=','.join(serie2_region)\n",
    "\n",
    "        #What will be substitute in the template function for HTML writing\n",
    "        Input = {'modality1':modality1,'modality2':modality2, 'dataset':dataset,'color':color, 'iso3':iso3, 'iso3inc':iso3inc, 'iso3region':iso3region, \\\n",
    "                 'indicator':indicator, 'category':category, 'serie1':serie1,'serie1_region':serie1_region,'serie2':serie2,'serie2_region':serie2_region}\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",
    "        <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "        <title>Country Dashboard </title>\n",
    "        <script type='text/javascript' src='https://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\"; // link to the dataset\n",
    "\n",
    "           $.getJSON(data, function(json) {\n",
    "           console.clear()\n",
    "             $(function() {\n",
    "               $('#container').highcharts({\n",
    "               chart: {type: 'spline'},\n",
    "                //plotOptions: { column: { colorByPoint: true } },\n",
    "                colors: $color,\n",
    "                 title: {\n",
    "                   text: json[\"$indicator\"][\"label\"]+ ' (% $modality1)' , x: -20, style: {\"fontSize\": \"14px\"} //center\n",
    "                     },\n",
    "                 subtitle: {\n",
    "                   text: 'Source: '+ json[\"$indicator\"][\"data_source\"][\"source\"] + ', Download date:'+ json[\"$indicator\"][\"data_source\"][\"Download_date\"], x: -20\n",
    "                 },\n",
    "                 xAxis: {valueDecimals: 0, tickInterval:1, \n",
    "                   categories: [ $category]//python created array \n",
    "                 },\n",
    "                 yAxis: {\n",
    "                   title: {\n",
    "                     text: json[\"$indicator\"][\"label\"] + ': $modality1 (nb. 0.5 = 50%)'\n",
    "                   },min: 0, max: 1,tickInterval:0.1, \n",
    "                   \n",
    "                   plotLines: [{\n",
    "                     value: 0,\n",
    "                     width: 1,\n",
    "                     color: '#808080'\n",
    "                   }]\n",
    "                 },\n",
    "                 tooltip: {\n",
    "                   valueDecimals: 2,\n",
    "                   formatter: function() {return '<b>'+ this.series.name +', '+ this.x +'</b><br/>'+ Math.round(this.y*100) + '% of people thinking $indicator : $modality1/$modality2'; } \n",
    "                 },\n",
    "                   series: [\n",
    "                   {\n",
    "                   name: json[\"$indicator\"][\"$iso3\"][\"country\"] + ': %$modality1',\n",
    "                   data: [$serie1]\n",
    "                 },{\n",
    "                   name: json[\"$indicator\"][\"$iso3region\"][\"country\"] + ': %$modality1',\n",
    "                   data: [$serie1_region]\n",
    "                 },{\n",
    "                   name: json[\"$indicator\"][\"$iso3\"][\"country\"] + ': %$modality2',\n",
    "                   data: [$serie2]\n",
    "                 },{\n",
    "                   name: json[\"$indicator\"][\"$iso3region\"][\"country\"] + ': %$modality2',\n",
    "                   data: [$serie2_region]\n",
    "                 }                 ]\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=\"https://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <div id=\"container\" style=\"width: 100%; height: 100%; margin: 0 auto\"></div>\n",
    "        <a href=\"TimeSerie_$indicator_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "        </body></html>\n",
    "        '''\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Writing the HTML file\n",
    "#=====================================================================================================================\n",
    "\n",
    "        #open an handle\n",
    "        f = open(\"dataviz/TimeSerie_\"+indicator+\"_\"+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+\"_\"+iso3+\".html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"500px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "---\n",
    "\n",
    "# &#9733; Maps with <span style=\"color:#285c8c\">Gallup</span> &#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": "code",
   "execution_count": 17,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Corruption in Government |dataset: data/GWP_Corruption in Government.json | modality: Yes\n",
      "Process: Corruption Within Businesses |dataset: data/GWP_Corruption Within Businesses.json | modality: Yes\n",
      "Process: Money Property Stolen |dataset: data/GWP_Money Property Stolen.json | modality: Yes\n",
      "Process: National Economy Getting Better |dataset: data/GWP_National Economy Getting Better.json | modality: Getting better\n"
     ]
    }
   ],
   "source": [
    "import json\n",
    "from string import Template\n",
    "import winsound\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Map\"]\n",
    "for indicator in indicatorlist:\n",
    "    #from production description json file: \n",
    "    modality=data[\"GALLUP\"][\"Map\"][indicator][\"modality\"]\n",
    "    dataset=data[\"GALLUP\"][\"Map\"][indicator][\"dataset\"]\n",
    "    title=data[\"GALLUP\"][\"Map\"][indicator][\"title\"]\n",
    "    print(\"Process:\",indicator,\"|dataset:\",dataset,\"| modality:\",modality)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Process: Corruption in Government |dataset: data/GWP_Corruption in Government.json | modality: Yes\n",
      "done: Map Africa\n",
      "done: Map Asia\n",
      "done: Map Europe\n",
      "done: Map Middle East\n",
      "done: Map North America\n",
      "done: Map South America\n",
      "done: Map Oceania\n",
      "Process: Money Property Stolen |dataset: data/GWP_Money Property Stolen.json | modality: Yes\n",
      "done: Map Africa\n",
      "done: Map Asia\n",
      "done: Map Europe\n",
      "done: Map Middle East\n",
      "done: Map North America\n",
      "done: Map South America\n",
      "done: Map Oceania\n",
      "Process: National Economy Getting Better |dataset: data/GWP_National Economy Getting Better.json | modality: Getting better\n",
      "done: Map Africa\n",
      "done: Map Asia\n",
      "done: Map Europe\n",
      "done: Map Middle East\n",
      "done: Map North America\n",
      "done: Map South America\n",
      "done: Map Oceania\n",
      "Process: Corruption Within Businesses |dataset: data/GWP_Corruption Within Businesses.json | modality: Yes\n",
      "done: Map Africa\n",
      "done: Map Asia\n",
      "done: Map Europe\n",
      "done: Map Middle East\n",
      "done: Map North America\n",
      "done: Map South America\n",
      "done: Map Oceania\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<iframe src=\"dataviz/map_Corruption Within Businesses_asia.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"575px\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "import os\n",
    "import json\n",
    "import winsound\n",
    "\n",
    "#==========================================\n",
    "title='Corruption_Gov'\n",
    "indicatorlist=['Corruption in Government'] #indicator code by couples i.e. \";\"\n",
    "modality='Yes'\n",
    "#==========================================\n",
    "\n",
    "# Read production instructions from json file: dataviz_production.json \n",
    "with open('dataviz_production.json', encoding='utf-8') as data_file:data = json.load(data_file)\n",
    "indicatorlist=data[\"GALLUP\"][\"Map\"]\n",
    "\n",
    "#========================================================================================================================\n",
    "color1 = '#c6dfff'\n",
    "color2 = '#083e8e'\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",
    "    #from production description json file: \n",
    "    modality=data[\"GALLUP\"][\"Map\"][indicator][\"modality\"]\n",
    "    dataset=data[\"GALLUP\"][\"Map\"][indicator][\"dataset\"]\n",
    "    title=data[\"GALLUP\"][\"Map\"][indicator][\"title\"]\n",
    "    print(\"Process:\",indicator,\"|dataset:\",dataset,\"| modality:\",modality)\n",
    "    \n",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in africa_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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={'indicator_south_america':indicator.replace('.','_')+\"_south_america\",'indicator_north_america':indicator.replace('.','_')+\"_north_america\",'indicator_middle_east':indicator.replace('.','_')+\"_middle_east\",'indicator_europe':indicator.replace('.','_')+\"_europe\",'indicator_asia':indicator.replace('.','_')+\"_asia\", 'indicator_africa':indicator.replace('.','_')+\"_africa\",'indicator_oceania':indicator.replace('.','_')+\"_oceania\",'color1':color1,'color2':color2, 'indicator':indicator, 'modality':modality}\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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "    .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "        \n",
    "      </style>\n",
    "      <title>Africa - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "     console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "        value_ao = $value_ao; if (value_ao==undefined) {value_ao=null;};\n",
    "        value_bf = $value_bf; if (value_bf==undefined) {value_bf=null;};\n",
    "        value_bi = $value_bi; if (value_bi==undefined) {value_bi=null;};\n",
    "        value_bj = $value_bj; if (value_bj==undefined) {value_bj=null;};\n",
    "        value_bw = $value_bw; if (value_bw==undefined) {value_bw=null;};\n",
    "        value_cd = $value_cd; if (value_cd==undefined) {value_cd=null;};\n",
    "        value_cf = $value_cf; if (value_cf==undefined) {value_cf=null;};\n",
    "        value_cg = $value_cg; if (value_cg==undefined) {value_cg=null;};\n",
    "        value_ci = $value_ci; if (value_ci==undefined) {value_ci=null;};\n",
    "        value_cm = $value_cm; if (value_cm==undefined) {value_cm=null;};\n",
    "        //value_cv = $value_cv; if (value_cv==undefined) {value_cv=null;};\n",
    "        value_dj = $value_dj; if (value_dj==undefined) {value_dj=null;};\n",
    "        value_dz = $value_dz; if (value_dz==undefined) {value_dz=null;};\n",
    "        value_eg = $value_eg; if (value_eg==undefined) {value_eg=null;};\n",
    "        //value_er = $value_er; if (value_er==undefined) {value_er=null;};\n",
    "        value_et = $value_et; if (value_et==undefined) {value_et=null;};\n",
    "        //value_ga = $value_ga; if (value_ga==undefined) {value_ga=null;};\n",
    "        value_gh = $value_gh; if (value_gh==undefined) {value_gh=null;};\n",
    "        // value_gm = $value_gm; if (value_gm==undefined) {value_gm=null;};\n",
    "        value_gn = $value_gn; if (value_gn==undefined) {value_gn=null;};\n",
    "        // value_gq = $value_gq; if (value_gq==undefined) {value_gq=null;};\n",
    "        //value_gw = $value_gw; if (value_gw==undefined) {value_gw=null;};\n",
    "        value_ke = $value_ke; if (value_ke==undefined) {value_ke=null;};\n",
    "        value_km = $value_km; if (value_km==undefined) {value_km=null;};\n",
    "        value_lr = $value_lr; if (value_lr==undefined) {value_lr=null;};\n",
    "        value_ls = $value_ls; if (value_ls==undefined) {value_ls=null;};\n",
    "        value_ly = $value_ly; if (value_ly==undefined) {value_ly=null;};\n",
    "        value_ma = $value_ma; if (value_ma==undefined) {value_ma=null;};\n",
    "        value_mg = $value_mg; if (value_mg==undefined) {value_mg=null;};\n",
    "        value_ml = $value_ml; if (value_ml==undefined) {value_ml=null;};\n",
    "        value_mr = $value_mr; if (value_mr==undefined) {value_mr=null;};\n",
    "        value_mu = $value_mu; if (value_mu==undefined) {value_mu=null;};\n",
    "        value_mw = $value_mw; if (value_mw==undefined) {value_mw=null;};\n",
    "        value_mz = $value_mz; if (value_mz==undefined) {value_mz=null;};\n",
    "        value_na = $value_na; if (value_na==undefined) {value_na=null;};\n",
    "        value_ne = $value_ne; if (value_ne==undefined) {value_ne=null;};\n",
    "        value_ng = $value_ng; if (value_ng==undefined) {value_ng=null;};\n",
    "        value_rw = $value_rw; if (value_rw==undefined) {value_rw=null;};\n",
    "        //value_sc = $value_sc; if (value_sc==undefined) {value_sc=null;};\n",
    "        value_sd = $value_sd; if (value_sd==undefined) {value_sd=null;};\n",
    "        value_sl = $value_sl; if (value_sl==undefined) {value_sl=null;};\n",
    "        value_sn = $value_sn; if (value_sn==undefined) {value_sn=null;};\n",
    "        value_so = $value_so; if (value_so==undefined) {value_so=null;};\n",
    "        value_ss = $value_ss; if (value_ss==undefined) {value_ss=null;};\n",
    "        //value_st = $value_st; if (value_st==undefined) {value_st=null;};\n",
    "        //value_sx = $value_sx; if (value_sx==undefined) {value_sx=null;};\n",
    "        value_sz = $value_sz; if (value_sz==undefined) {value_sz=null;};\n",
    "        value_td = $value_td; if (value_td==undefined) {value_td=null;};\n",
    "        value_tg = $value_tg; if (value_tg==undefined) {value_tg=null;};\n",
    "        value_tn = $value_tn; if (value_tn==undefined) {value_tn=null;};\n",
    "        value_tz = $value_tz; if (value_tz==undefined) {value_tz=null;};\n",
    "        value_ug = $value_ug; if (value_ug==undefined) {value_ug=null;};\n",
    "        value_za = $value_za; if (value_za==undefined) {value_za=null;};\n",
    "        value_zm = $value_zm; if (value_zm==undefined) {value_zm=null;};\n",
    "        value_zw = $value_zw; if (value_zw==undefined) {value_zw=null;}\n",
    "     \n",
    "     })\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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_africa.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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",
    "    print(\"done: Map Africa\")\n",
    "    \n",
    "#=====================================================================================================================\n",
    "#    Map Asia\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in asia_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "          \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "      </style>\n",
    "      <title>Asia - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "     console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "        \n",
    "        value_ae = $value_ae; if (value_ae==undefined) {value_ae=null;};\n",
    "        value_af = $value_af; if (value_af==undefined) {value_af=null;};\n",
    "        value_am = $value_am; if (value_am==undefined) {value_am=null;};\n",
    "        value_az = $value_az; if (value_az==undefined) {value_az=null;};\n",
    "        value_bd = $value_bd; if (value_bd==undefined) {value_bd=null;};\n",
    "        value_bh = $value_bh; if (value_bh==undefined) {value_bh=null;};\n",
    "        //value_bn = $value_bn; if (value_bn==undefined) {value_bn=null;};\n",
    "        value_bt = $value_bt; if (value_bt==undefined) {value_bt=null;};\n",
    "        value_cn = $value_cn; if (value_cn==undefined) {value_cn=null;};\n",
    "        value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;};\n",
    "        value_ge = $value_ge; if (value_ge==undefined) {value_ge=null;};\n",
    "        value_id = $value_id; if (value_id==undefined) {value_id=null;};\n",
    "        value_il = $value_il; if (value_il==undefined) {value_il=null;};\n",
    "        value_in = $value_in; if (value_in==undefined) {value_in=null;};\n",
    "        value_iq = $value_iq; if (value_iq==undefined) {value_iq=null;};\n",
    "        value_ir = $value_ir; if (value_ir==undefined) {value_ir=null;};\n",
    "        value_jo = $value_jo; if (value_jo==undefined) {value_jo=null;};\n",
    "        value_jp = $value_jp; if (value_jp==undefined) {value_jp=null;};\n",
    "        value_kg = $value_kg; if (value_kg==undefined) {value_kg=null;};\n",
    "        value_kh = $value_kh; if (value_kh==undefined) {value_kh=null;};\n",
    "       // value_kp = $value_kp; if (value_kp==undefined) {value_kp=null;};\n",
    "        value_kr = $value_kr; if (value_kr==undefined) {value_kr=null;};\n",
    "        value_kw = $value_kw; if (value_kw==undefined) {value_kw=null;};\n",
    "        value_kz = $value_kz; if (value_kz==undefined) {value_kz=null;};\n",
    "        value_la = $value_la; if (value_la==undefined) {value_la=null;};\n",
    "        value_lb = $value_lb; if (value_lb==undefined) {value_lb=null;};\n",
    "        value_lk = $value_lk; if (value_lk==undefined) {value_lk=null;};\n",
    "        value_mm = $value_mm; if (value_mm==undefined) {value_mm=null;};\n",
    "        value_mn = $value_mn; if (value_mn==undefined) {value_mn=null;};\n",
    "        value_my = $value_my; if (value_my==undefined) {value_my=null;};\n",
    "        //value_nc = $value_nc; if (value_nc==undefined) {value_nc=null;};\n",
    "        value_np = $value_np; if (value_np==undefined) {value_np=null;};\n",
    "        value_om = $value_om; if (value_om==undefined) {value_om=null;};\n",
    "        value_ph = $value_ph; if (value_ph==undefined) {value_ph=null;};\n",
    "        value_pk = $value_pk; if (value_pk==undefined) {value_pk=null;};\n",
    "        value_qa = $value_qa; if (value_qa==undefined) {value_qa=null;};\n",
    "        value_ru = $value_ru; if (value_ru==undefined) {value_ru=null;};\n",
    "        value_sa = $value_sa; if (value_sa==undefined) {value_sa=null;};\n",
    "        value_sg = $value_sg; if (value_sg==undefined) {value_sg=null;};\n",
    "        //value_sh = $value_sh; if (value_sh==undefined) {value_sh=null;};\n",
    "        value_sy = $value_sy; if (value_sy==undefined) {value_sy=null;};\n",
    "        value_th = $value_th; if (value_th==undefined) {value_th=null;};\n",
    "        value_tj = $value_tj; if (value_tj==undefined) {value_tj=null;};\n",
    "        //value_tl = $value_tl; if (value_tl==undefined) {value_tl=null;};\n",
    "        value_tm = $value_tm; if (value_tm==undefined) {value_tm=null;};\n",
    "        value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;};\n",
    "        value_tw = $value_tw; if (value_tw==undefined) {value_tw=null;};\n",
    "        value_uz = $value_uz; if (value_uz==undefined) {value_uz=null;};\n",
    "        value_vn = $value_vn; if (value_vn==undefined) {value_vn=null;};\n",
    "        value_ye = $value_ye; if (value_ye==undefined) {value_ye=null;}\n",
    "     })\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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete);\n",
    "            \n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_asia.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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",
    "    print(\"done: Map Asia\")\n",
    "\n",
    "#========================================================================================================================\n",
    "#                                                Map Europe\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in europe_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "        \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\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 href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "      </style>\n",
    "      <title>Europe - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "     console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "    \n",
    "        value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;};\n",
    "        value_sk = $value_sk; if (value_sk==undefined) {value_sk=null;};\n",
    "        value_si = $value_si; if (value_si==undefined) {value_si=null;};\n",
    "        value_se = $value_se; if (value_se==undefined) {value_se=null;};\n",
    "        value_ru = $value_ru; if (value_ru==undefined) {value_ru=null;};\n",
    "        value_rs = $value_rs; if (value_rs==undefined) {value_rs=null;};\n",
    "        value_ro = $value_ro; if (value_ro==undefined) {value_ro=null;};\n",
    "        value_pt = $value_pt; if (value_pt==undefined) {value_pt=null;};\n",
    "        value_pl = $value_pl; if (value_pl==undefined) {value_pl=null;};\n",
    "        value_no = $value_no; if (value_no==undefined) {value_no=null;};\n",
    "        value_nl = $value_nl; if (value_nl==undefined) {value_nl=null;};\n",
    "        value_mk = $value_mk; if (value_mk==undefined) {value_mk=null;};\n",
    "        value_me = $value_me; if (value_me==undefined) {value_me=null;};\n",
    "        value_md = $value_md; if (value_md==undefined) {value_md=null;};\n",
    "        value_lv = $value_lv; if (value_lv==undefined) {value_lv=null;};\n",
    "        value_lu = $value_lu; if (value_lu==undefined) {value_lu=null;};\n",
    "        value_lt = $value_lt; if (value_lt==undefined) {value_lt=null;};\n",
    "        value_it = $value_it; if (value_it==undefined) {value_it=null;};\n",
    "        value_is = $value_is; if (value_is==undefined) {value_is=null;};\n",
    "        value_ie = $value_ie; if (value_ie==undefined) {value_ie=null;};\n",
    "        value_hu = $value_hu; if (value_hu==undefined) {value_hu=null;};\n",
    "        value_hr = $value_hr; if (value_hr==undefined) {value_hr=null;};\n",
    "        value_gr = $value_gr; if (value_gr==undefined) {value_gr=null;};\n",
    "        value_gb = $value_gb; if (value_gb==undefined) {value_gb=null;};\n",
    "        value_fr = $value_fr; if (value_fr==undefined) {value_fr=null;};\n",
    "        value_fi = $value_fi; if (value_fi==undefined) {value_fi=null;};\n",
    "        value_es = $value_es; if (value_es==undefined) {value_es=null;};\n",
    "        value_ee = $value_ee; if (value_ee==undefined) {value_ee=null;};\n",
    "        value_dk = $value_dk; if (value_dk==undefined) {value_dk=null;};\n",
    "        value_de = $value_de; if (value_de==undefined) {value_de=null;};\n",
    "        value_cz = $value_cz; if (value_cz==undefined) {value_cz=null;};\n",
    "        value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;};\n",
    "        value_ch = $value_ch; if (value_ch==undefined) {value_ch=null;};\n",
    "        value_by = $value_by; if (value_by==undefined) {value_by=null;};\n",
    "        value_bg = $value_bg; if (value_bg==undefined) {value_bg=null;};\n",
    "        value_be = $value_be; if (value_be==undefined) {value_be=null;};\n",
    "        value_ba = $value_ba; if (value_ba==undefined) {value_ba=null;};\n",
    "        value_at = $value_at; if (value_at==undefined) {value_at=null;};\n",
    "        value_al = $value_al; if (value_al==undefined) {value_al=null;};\n",
    "     })\n",
    "\n",
    "    ).then(function() {\n",
    "\n",
    "        // Prepare demo data\n",
    "        var data = [\n",
    "   \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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "           }, OnChartComplete);\n",
    "           \n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                \n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "     <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "     <a href=\"map_$indicator_europe.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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",
    "    print(\"done: Map Europe\")\n",
    "    \n",
    "#=====================================================================================================================\n",
    "#                                         Middle East\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in middle_east_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "         \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\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 href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "      </style>\n",
    "      <title>Europe - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "        console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "    \n",
    "        value_sa = $value_sa; if (value_sa==undefined) {value_sa=null;};\n",
    "        value_ye = $value_ye; if (value_ye==undefined) {value_ye=null;};\n",
    "        value_tr = $value_tr; if (value_tr==undefined) {value_tr=null;};\n",
    "        value_sy = $value_sy; if (value_sy==undefined) {value_sy=null;};\n",
    "        value_qa = $value_qa; if (value_qa==undefined) {value_qa=null;};\n",
    "        value_om = $value_om; if (value_om==undefined) {value_om=null;};\n",
    "        value_lb = $value_lb; if (value_lb==undefined) {value_lb=null;};\n",
    "        value_kw = $value_kw; if (value_kw==undefined) {value_kw=null;};\n",
    "        value_jo = $value_jo; if (value_jo==undefined) {value_jo=null;};\n",
    "        value_ir = $value_ir; if (value_ir==undefined) {value_ir=null;};\n",
    "        value_iq = $value_iq; if (value_iq==undefined) {value_iq=null;};\n",
    "        value_il = $value_il; if (value_il==undefined) {value_il=null;};\n",
    "        value_eg = $value_eg; if (value_eg==undefined) {value_eg=null;};\n",
    "        value_cy = $value_cy; if (value_cy==undefined) {value_cy=null;};\n",
    "        value_bh = $value_bh; if (value_bh==undefined) {value_bh=null;};\n",
    "        value_ae = $value_ae; if (value_ae==undefined) {value_ae=null;};\n",
    "     })\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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false},\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete);\n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_middle_east.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "    </body>\n",
    "    </html>\n",
    "\n",
    "    '''\n",
    "\n",
    "#==============================\n",
    "#    Writing the HTML file\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",
    "    print(\"done: Map Middle East\")\n",
    "    \n",
    "#=====================================================================================================================\n",
    "#                                         North America\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in north_america_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "          \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "      </style>\n",
    "      <title>North America - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "    $.when(\n",
    "     $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "        console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "    \n",
    "        \n",
    "        value_us = $value_us; if (value_us==undefined) {value_us=null;};\n",
    "        value_tt = $value_tt; if (value_tt==undefined) {value_tt=null;};\n",
    "        value_sv = $value_sv; if (value_sv==undefined) {value_sv=null;};\n",
    "        value_pr = $value_pr; if (value_pr==undefined) {value_pr=null;};\n",
    "        value_pa = $value_pa; if (value_pa==undefined) {value_pa=null;};\n",
    "        value_ni = $value_ni; if (value_ni==undefined) {value_ni=null;};\n",
    "        value_mx = $value_mx; if (value_mx==undefined) {value_mx=null;};\n",
    "        value_jm = $value_jm; if (value_jm==undefined) {value_jm=null;};\n",
    "        value_ht = $value_ht; if (value_ht==undefined) {value_ht=null;};\n",
    "        value_gt = $value_gt; if (value_gt==undefined) {value_gt=null;};\n",
    "        value_do = $value_do; if (value_do==undefined) {value_do=null;};  \n",
    "        value_cu = $value_cu; if (value_cu==undefined) {value_cu=null;};\n",
    "        value_cr = $value_cr; if (value_cr==undefined) {value_cr=null;};\n",
    "        value_ca = $value_ca; if (value_ca==undefined) {value_ca=null;};\n",
    "        value_bz = $value_bz; if (value_bz==undefined) {value_bz=null;};\n",
    "       \n",
    "     })\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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete)\n",
    "            Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_north_america.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\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",
    "    print(\"done: Map North America\")\n",
    "#=====================================================================================================================\n",
    "#                                         South America\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in south_america_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "        \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\n",
    "        }\n",
    "      </style>\n",
    "      <title>North America - Highmaps</title>\n",
    "      <script type='text/javascript'>\n",
    "\n",
    "       $(window).load(function() {\n",
    "\n",
    "        $.when(\n",
    "         $.getJSON(\"data/GWP_$indicator.json\", function(json) {\n",
    "         console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "    \n",
    "        value_br = $value_br; if (value_br==undefined) {value_br=null;};\n",
    "        value_ve = $value_ve; if (value_ve==undefined) {value_ve=null;};\n",
    "        value_uy = $value_uy; if (value_uy==undefined) {value_uy=null;};\n",
    "        value_sr = $value_sr; if (value_sr==undefined) {value_sr=null;};\n",
    "        value_py = $value_py; if (value_py==undefined) {value_py=null;};\n",
    "        value_pe = $value_pe; if (value_pe==undefined) {value_pe=null;};\n",
    "        value_gy = $value_gy; if (value_gy==undefined) {value_gy=null;};\n",
    "        value_gb = $value_gb; if (value_gb==undefined) {value_gb=null;};\n",
    "        value_ec = $value_ec; if (value_ec==undefined) {value_ec=null;};\n",
    "        value_co = $value_co; if (value_co==undefined) {value_co=null;};\n",
    "        value_cl = $value_cl; if (value_cl==undefined) {value_cl=null;};\n",
    "        value_bo = $value_bo; if (value_bo==undefined) {value_bo=null;};\n",
    "        value_ar = $value_ar; if (value_ar==undefined) {value_ar=null;}\n",
    "     })\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",
    "\n",
    "            // Initiate the chart\n",
    "            $('#container').highcharts('Map', {\n",
    "              title: { text: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete);\n",
    "\n",
    "\n",
    "        Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "     <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_south_america.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "\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",
    "    print(\"done: Map South America\")\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         Oceania\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",
    "    Input0=[]\n",
    "    \n",
    "    for iso3,iso2 in oceania_dict.items():\n",
    "        vars()['value_'+iso2]='json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][json[\"'+indicator+'\"][\"'+iso3+'\"][\"'+modality+'\"][\"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_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",
    "         \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",
    "    <meta http-equiv=\"Cache-control\" content=\"NO-CACHE\">\n",
    "    <script type=\"text/javascript\" src=\"jquery-1.9.1.js\"></script>\n",
    "    <script type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.11.0.js\"></script>\n",
    "    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\" />\n",
    "      <style type=\"text/css\">\n",
    "        #container {\n",
    "        height: 475px;\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",
    "        .button1 {\n",
    "           background-color: white;\n",
    "            border: none;\n",
    "            color: #6E9FC5;\n",
    "            padding: 5px 12px;\n",
    "            text-align: center;\n",
    "            text-decoration: none;\n",
    "            font-size: 11px;\n",
    "            cursor: pointer;\n",
    "            font-family: Calibri;\n",
    "            margin-left: 40%;\n",
    "        }\n",
    "        \n",
    "        .button1:hover {\n",
    "            background-color: #6E9FC5; \n",
    "            color: white;\n",
    "        },\n",
    "        a, img { \n",
    "        border:none !important ;\n",
    "        outline:none !important ;\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(\"data/GWP_$indicator.json\", function(json) {\n",
    "       console.clear()\n",
    "        label = json[\"$indicator\"][\"label\"]; \n",
    "        source = json[\"$indicator\"][\"data_source\"][\"source\"];   \n",
    "        downloaddate = json[\"$indicator\"][\"data_source\"][\"Download_date\"];  \n",
    "         \n",
    "         value_id = $value_id; if (value_id==undefined) {value_id=null;};\n",
    "         value_ph = $value_ph; if (value_ph==undefined) {value_ph=null;};\n",
    "         value_nz = $value_nz; if (value_nz==undefined) {value_nz=null;};\n",
    "         value_my = $value_my; if (value_my==undefined) {value_my=null;};\n",
    "         value_au = $value_au; if (value_au==undefined) {value_au=null;}\n",
    "\n",
    "     })\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: 'Population perception<br>'+label+ ' (% $modality)', style: {\"fontSize\": \"14px\"}},\n",
    "              subtitle: {text: 'source: '+source +', Download date: '+downloaddate+', Year: last availables'},\n",
    "              mapNavigation: {enabled: true, buttonOptions: {verticalAlign: 'bottom'}},\n",
    "              credits: { enabled: false },\n",
    "              colorAxis: {\n",
    "                    min: 0,\n",
    "                    stops: [\n",
    "                        [0, '#EFEFFF'],\n",
    "                        [0.5,'$color1'],\n",
    "                        [1,'$color2']\n",
    "                    ]\n",
    "                },\n",
    "              tooltip: {\n",
    "                  valueDecimals: 2,\n",
    "                \n",
    "               formatter: function () {\n",
    "                    return '<b>'+  this.point.name + ':</b><br>'  +\n",
    "                        '' +  Math.round(this.point.value*100)+'% of people $indicator = $modality';\n",
    "                }\n",
    "            },\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",
    "            }, OnChartComplete);\n",
    "\n",
    "                Highcharts.setOptions({\n",
    "                    chart: { style: { fontFamily: \"'Open Sans', sans-serif\"}}\n",
    "                });\n",
    "                function OnChartComplete(chart) { // on complete\n",
    "                            var textX = chart.plotLeft + chart.plotWidth +15; //+10 //-10\n",
    "                            var textY = chart.plotTop  + chart.plotHeight + 50; //0 //+5\n",
    "                            var span = '<span id=\"watermarkDetails\" style=\"position:absolute; text-align:right;\"><table style=\"width:100%;\"><td><a href=\"http://data.afd.fr\" target=\"_blank\"><img src=\"logoDATA.jpg\" width=\"80px\";border=\"0\" > </a></td></tr><td style=\"font-size:10px; font-family:Trebuchet MS; color: #999999\"><i>powered by Highcharts</i></td></table>';\n",
    "                            $(\"#watermark\").append(span);\n",
    "                            span = $('#watermarkDetails');\n",
    "                            span.css('left', textX - span.width());\n",
    "                            span.css('top', textY + span.height());\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",
    "    <div id=\"watermark\" style=\"position:absolute; left:0px; top:0px; width:100%\"></div>\n",
    "    <a href=\"map_$indicator_oceania.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "\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",
    "    print(\"done: Map Oceania\")\n",
    "\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"'+\"dataviz/map_\"+indicator.replace('.','_')+\"_asia.html\"+'\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"575px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# API version\n",
    "### I. Store the the API call"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from urllib.request import urlopen\n",
    "import sys,os,os.path\n",
    "\n",
    "# ---- Proxy Adress ---------------------------------\n",
    "os.environ['HTTP_PROXY']=\"http://192.168.101.216:8080\"\n",
    "os.environ['HTTPS_PROXY']=\"http://192.168.101.216:8080\"\n",
    "# ----------------------------------------------------\n",
    "\n",
    "lenght=20\n",
    "display=4*lenght\n",
    "indicator=\"EG.USE.COMM.FO.ZS\"\n",
    "isolist=[\"USA\"] \n",
    "\n",
    "\n",
    "for iso3 in isolist:\n",
    "    \n",
    "    #----- store income and region name out of iso3 -------\n",
    "    region_dict= {\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"ASM\":\"UMC,EAS\",\"AUS\":\"HIC,EAS\",\"BRN\":\"UMC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"UMC,EAS\",\"HKG\":\"UMC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"HIC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"HIC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"UMC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"UMC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"UMC,EAS\",\"NZL\":\"HIC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"UMC,EAS\",\"SGP\":\"UMC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"UMC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"ALB\":\"UMC,ECS\",\"AND\":\"UMC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"HIC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"HIC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"HIC,ECS\",\"CHI\":\"UMC,ECS\",\"CYP\":\"UMC,ECS\",\"CZE\":\"HIC,ECS\",\"DEU\":\"HIC,ECS\",\"DNK\":\"HIC,ECS\",\"ESP\":\"HIC,ECS\",\"EST\":\"HIC,ECS\",\"FIN\":\"HIC,ECS\",\"FRA\":\"HIC,ECS\",\"FRO\":\"UMC,ECS\",\"GBR\":\"HIC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"HIC,ECS\",\"GRL\":\"UMC,ECS\",\"HRV\":\"UMC,ECS\",\"HUN\":\"HIC,ECS\",\"IMN\":\"UMC,ECS\",\"IRL\":\"HIC,ECS\",\"ISL\":\"HIC,ECS\",\"ITA\":\"HIC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"UMC,ECS\",\"LTU\":\"UMC,ECS\",\"LUX\":\"HIC,ECS\",\"LVA\":\"UMC,ECS\",\"MCO\":\"UMC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"HIC,ECS\",\"NOR\":\"HIC,ECS\",\"POL\":\"HIC,ECS\",\"PRT\":\"HIC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"UMC,ECS\",\"SMR\":\"HIC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"HIC,ECS\",\"SVN\":\"HIC,ECS\",\"SWE\":\"HIC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"HIC,LCN\",\"ARG\":\"HIC,LCN\",\"ATG\":\"HIC,LCN\",\"BHS\":\"HIC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"HIC,LCN\",\"CHL\":\"HIC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"HIC,LCN\",\"CYM\":\"HIC,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\":\"HIC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"HIC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"HIC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"HIC,LCN\",\"TCA\":\"HIC,LCN\",\"TTO\":\"HIC,LCN\",\"URY\":\"HIC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"HIC,LCN\",\"VIR\":\"HIC,LCN\",\"ARE\":\"HIC,MEA\",\"BHR\":\"HIC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"HIC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"HIC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"HIC,MEA\",\"OMN\":\"HIC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"HIC,MEA\",\"SAU\":\"HIC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"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,SSA\",\"BDI\":\"LIC,SSA\",\"BEN\":\"LIC,SSA\",\"BFA\":\"LIC,SSA\",\"BWA\":\"UMC,SSA\",\"CAF\":\"LIC,SSA\",\"CIV\":\"LMC,SSA\",\"CMR\":\"LMC,SSA\",\"COD\":\"LIC,SSA\",\"COG\":\"LMC,SSA\",\"COM\":\"LIC,SSA\",\"CPV\":\"LMC,SSA\",\"ERI\":\"LIC,SSA\",\"ETH\":\"LIC,SSA\",\"GAB\":\"UMC,SSA\",\"GHA\":\"LMC,SSA\",\"GIN\":\"LIC,SSA\",\"GMB\":\"LIC,SSA\",\"GNB\":\"LIC,SSA\",\"GNQ\":\"HIC,SSA\",\"KEN\":\"LMC,SSA\",\"LBR\":\"LIC,SSA\",\"LSO\":\"LMC,SSA\",\"MDG\":\"LIC,SSA\",\"MLI\":\"LIC,SSA\",\"MOZ\":\"LIC,SSA\",\"MRT\":\"LMC,SSA\",\"MUS\":\"UMC,SSA\",\"MWI\":\"LIC,SSA\",\"NAM\":\"UMC,SSA\",\"NER\":\"LIC,SSA\",\"NGA\":\"LMC,SSA\",\"RWA\":\"LIC,SSA\",\"SDN\":\"LMC,SSA\",\"SEN\":\"LMC,SSA\",\"SLE\":\"LIC,SSA\",\"SOM\":\"LIC,SSA\",\"SSD\":\"LIC,SSA\",\"STP\":\"LMC,SSA\",\"SWZ\":\"LMC,SSA\",\"SYC\":\"HIC,SSA\",\"TCD\":\"LIC,SSA\",\"TGO\":\"LIC,SSA\",\"TZA\":\"LIC,SSA\",\"UGA\":\"LIC,SSA\",\"ZAF\":\"UMC,SSA\",\"ZMB\":\"LMC,SSA\",\"ZWE\":\"LIC,SSA\"}\n",
    "    for iso,region_iso in region_dict.items(): \n",
    "        if iso==iso3: \n",
    "            geo=iso3+';'+region_iso.replace(',',';')+';WLD'\n",
    "    print(geo)\n",
    "    #-------------------------------------------------------\n",
    "    \n",
    "    #------ call API and store the result ------------------\n",
    "    url_API = \"http://api.worldbank.org/countries/\"+geo+\";WLD/indicators/\"+indicator+\"?per_page=\" + str(display) + \"&MRV=\" + str(lenght) + \"&format=json\"\n",
    "    print(\"link:\",url_API)\n",
    "    path_filename='data/WDI_API_local_json/'+iso3+\"_\"+indicator.replace('.','_')+'.json'\n",
    "    try: \n",
    "        local_json=urlopen(url_API).read()\n",
    "        with open(path_filename, 'wb') as file:\n",
    "            file.write(local_json)\n",
    "    except:\n",
    "        pass\n",
    "     #------ call API and store the result ------------------\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import sys,os,os.path\n",
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "lenght=20\n",
    "display=4*lenght\n",
    "indicator=\"EG.USE.COMM.FO.ZS\"\n",
    "isolist=[\"USA\"] \n",
    "\n",
    "#PBLM the dictionnary just give \n",
    "\n",
    "for iso3 in isolist:\n",
    "    \n",
    "    #----- store income and region name out of iso3 -------\n",
    "    region_dict= {\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"ASM\":\"UMC,EAS\",\"AUS\":\"HIC,EAS\",\"BRN\":\"UMC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"UMC,EAS\",\"HKG\":\"UMC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"HIC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"HIC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"UMC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"UMC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"UMC,EAS\",\"NZL\":\"HIC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"UMC,EAS\",\"SGP\":\"UMC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"UMC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"ALB\":\"UMC,ECS\",\"AND\":\"UMC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"HIC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"HIC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"HIC,ECS\",\"CHI\":\"UMC,ECS\",\"CYP\":\"UMC,ECS\",\"CZE\":\"HIC,ECS\",\"DEU\":\"HIC,ECS\",\"DNK\":\"HIC,ECS\",\"ESP\":\"HIC,ECS\",\"EST\":\"HIC,ECS\",\"FIN\":\"HIC,ECS\",\"FRA\":\"HIC,ECS\",\"FRO\":\"UMC,ECS\",\"GBR\":\"HIC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"HIC,ECS\",\"GRL\":\"UMC,ECS\",\"HRV\":\"UMC,ECS\",\"HUN\":\"HIC,ECS\",\"IMN\":\"UMC,ECS\",\"IRL\":\"HIC,ECS\",\"ISL\":\"HIC,ECS\",\"ITA\":\"HIC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"UMC,ECS\",\"LTU\":\"UMC,ECS\",\"LUX\":\"HIC,ECS\",\"LVA\":\"UMC,ECS\",\"MCO\":\"UMC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"HIC,ECS\",\"NOR\":\"HIC,ECS\",\"POL\":\"HIC,ECS\",\"PRT\":\"HIC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"UMC,ECS\",\"SMR\":\"HIC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"HIC,ECS\",\"SVN\":\"HIC,ECS\",\"SWE\":\"HIC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"HIC,LCN\",\"ARG\":\"HIC,LCN\",\"ATG\":\"HIC,LCN\",\"BHS\":\"HIC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"HIC,LCN\",\"CHL\":\"HIC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"HIC,LCN\",\"CYM\":\"HIC,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\":\"HIC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"HIC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"HIC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"HIC,LCN\",\"TCA\":\"HIC,LCN\",\"TTO\":\"HIC,LCN\",\"URY\":\"HIC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"HIC,LCN\",\"VIR\":\"HIC,LCN\",\"ARE\":\"HIC,MEA\",\"BHR\":\"HIC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"HIC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"HIC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"HIC,MEA\",\"OMN\":\"HIC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"HIC,MEA\",\"SAU\":\"HIC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"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,SSA\",\"BDI\":\"LIC,SSA\",\"BEN\":\"LIC,SSA\",\"BFA\":\"LIC,SSA\",\"BWA\":\"UMC,SSA\",\"CAF\":\"LIC,SSA\",\"CIV\":\"LMC,SSA\",\"CMR\":\"LMC,SSA\",\"COD\":\"LIC,SSA\",\"COG\":\"LMC,SSA\",\"COM\":\"LIC,SSA\",\"CPV\":\"LMC,SSA\",\"ERI\":\"LIC,SSA\",\"ETH\":\"LIC,SSA\",\"GAB\":\"UMC,SSA\",\"GHA\":\"LMC,SSA\",\"GIN\":\"LIC,SSA\",\"GMB\":\"LIC,SSA\",\"GNB\":\"LIC,SSA\",\"GNQ\":\"HIC,SSA\",\"KEN\":\"LMC,SSA\",\"LBR\":\"LIC,SSA\",\"LSO\":\"LMC,SSA\",\"MDG\":\"LIC,SSA\",\"MLI\":\"LIC,SSA\",\"MOZ\":\"LIC,SSA\",\"MRT\":\"LMC,SSA\",\"MUS\":\"UMC,SSA\",\"MWI\":\"LIC,SSA\",\"NAM\":\"UMC,SSA\",\"NER\":\"LIC,SSA\",\"NGA\":\"LMC,SSA\",\"RWA\":\"LIC,SSA\",\"SDN\":\"LMC,SSA\",\"SEN\":\"LMC,SSA\",\"SLE\":\"LIC,SSA\",\"SOM\":\"LIC,SSA\",\"SSD\":\"LIC,SSA\",\"STP\":\"LMC,SSA\",\"SWZ\":\"LMC,SSA\",\"SYC\":\"HIC,SSA\",\"TCD\":\"LIC,SSA\",\"TGO\":\"LIC,SSA\",\"TZA\":\"LIC,SSA\",\"UGA\":\"LIC,SSA\",\"ZAF\":\"UMC,SSA\",\"ZMB\":\"LMC,SSA\",\"ZWE\":\"LIC,SSA\"}\n",
    "    country_dict = {\"Latin America & Caribbean\":\"LCN\",\"South Asia\":\"SAS\",\"Sub-Saharan Africa\":\"SSA\",\"Europe & Central Asia\":\"ECS\",\"Middle East & North Africa\":\"MEA\",\"East Asia & Pacific\":\"EAS\",\"North America\":\"NAC\",\"World\":\"WLD\",\"High income\":\"HIC\",\"Low income\":\"LIC\",\"Upper middle income\":\"UMC\",\"Lower middle income\":\"LMC\",\"Not classified\":\"INX\",\"Cote d'Ivoire\":\"CIV\",\"Curacao\":\"CUW\",\"Sao Tome and Principe\":\"STP\",\"American Samoa\":\"ASM\",\"Australia\":\"AUS\",\"Brunei Darussalam\":\"BRN\",\"China\":\"CHN\",\"Fiji\":\"FJI\",\"Micronesia, Fed. Sts.\":\"FSM\",\"Guam\":\"GUM\",\"Hong Kong SAR, China\":\"HKG\",\"Indonesia\":\"IDN\",\"Japan\":\"JPN\",\"Cambodia\":\"KHM\",\"Kiribati\":\"KIR\",\"Korea, Rep.\":\"KOR\",\"Lao PDR\":\"LAO\",\"Macao SAR, China\":\"MAC\",\"Marshall Islands\":\"MHL\",\"Myanmar\":\"MMR\",\"Mongolia\":\"MNG\",\"Northern Mariana Islands\":\"MNP\",\"Malaysia\":\"MYS\",\"New Caledonia\":\"NCL\",\"New Zealand\":\"NZL\",\"Philippines\":\"PHL\",\"Palau\":\"PLW\",\"Papua New Guinea\":\"PNG\",\"Korea, Dem. Rep.\":\"PRK\",\"French Polynesia\":\"PYF\",\"Singapore\":\"SGP\",\"Solomon Islands\":\"SLB\",\"Thailand\":\"THA\",\"Timor-Leste\":\"TLS\",\"Tonga\":\"TON\",\"Tuvalu\":\"TUV\",\"Taiwan, China\":\"TWN\",\"Vietnam\":\"VNM\",\"Vanuatu\":\"VUT\",\"Samoa\":\"WSM\",\"Albania\":\"ALB\",\"Andorra\":\"AND\",\"Armenia\":\"ARM\",\"Austria\":\"AUT\",\"Azerbaijan\":\"AZE\",\"Belgium\":\"BEL\",\"Bulgaria\":\"BGR\",\"Bosnia and Herzegovina\":\"BIH\",\"Belarus\":\"BLR\",\"Switzerland\":\"CHE\",\"Channel Islands\":\"CHI\",\"Cyprus\":\"CYP\",\"Czech Republic\":\"CZE\",\"Germany\":\"DEU\",\"Denmark\":\"DNK\",\"Spain\":\"ESP\",\"Estonia\":\"EST\",\"Finland\":\"FIN\",\"France\":\"FRA\",\"Faeroe Islands\":\"FRO\",\"United Kingdom\":\"GBR\",\"Georgia\":\"GEO\",\"Greece\":\"GRC\",\"Greenland\":\"GRL\",\"Croatia\":\"HRV\",\"Hungary\":\"HUN\",\"Isle of Man\":\"IMN\",\"Ireland\":\"IRL\",\"Iceland\":\"ISL\",\"Italy\":\"ITA\",\"Kazakhstan\":\"KAZ\",\"Kyrgyz Republic\":\"KGZ\",\"Liechtenstein\":\"LIE\",\"Lithuania\":\"LTU\",\"Luxembourg\":\"LUX\",\"Latvia\":\"LVA\",\"Monaco\":\"MCO\",\"Moldova\":\"MDA\",\"Macedonia, FYR\":\"MKD\",\"Montenegro\":\"MNE\",\"Netherlands\":\"NLD\",\"Norway\":\"NOR\",\"Poland\":\"POL\",\"Portugal\":\"PRT\",\"Romania\":\"ROU\",\"Russian Federation\":\"RUS\",\"San Marino\":\"SMR\",\"Serbia\":\"SRB\",\"Slovak Republic\":\"SVK\",\"Slovenia\":\"SVN\",\"Sweden\":\"SWE\",\"Tajikistan\":\"TJK\",\"Turkmenistan\":\"TKM\",\"Turkey\":\"TUR\",\"Ukraine\":\"UKR\",\"Uzbekistan\":\"UZB\",\"Aruba\":\"ABW\",\"Argentina\":\"ARG\",\"Antigua and Barbuda\":\"ATG\",\"Bahamas, The\":\"BHS\",\"Belize\":\"BLZ\",\"Bolivia\":\"BOL\",\"Brazil\":\"BRA\",\"Barbados\":\"BRB\",\"Chile\":\"CHL\",\"Colombia\":\"COL\",\"Costa Rica\":\"CRI\",\"Cuba\":\"CUB\",\"Curaçao\":\"CUW\",\"Cayman Islands\":\"CYM\",\"Dominica\":\"DMA\",\"Dominican Republic\":\"DOM\",\"Ecuador\":\"ECU\",\"Grenada\":\"GRD\",\"Guatemala\":\"GTM\",\"Guyana\":\"GUY\",\"Honduras\":\"HND\",\"Haiti\":\"HTI\",\"Jamaica\":\"JAM\",\"St. Kitts and Nevis\":\"KNA\",\"St. Lucia\":\"LCA\",\"St. Martin (French part)\":\"MAF\",\"Mexico\":\"MEX\",\"Nicaragua\":\"NIC\",\"Panama\":\"PAN\",\"Peru\":\"PER\",\"Puerto Rico\":\"PRI\",\"Paraguay\":\"PRY\",\"El Salvador\":\"SLV\",\"Suriname\":\"SUR\",\"Sint Maarten (Dutch part)\":\"SXM\",\"Turks and Caicos Islands\":\"TCA\",\"Trinidad and Tobago\":\"TTO\",\"Uruguay\":\"URY\",\"St. Vincent and the Grenadines\":\"VCT\",\"Venezuela, RB\":\"VEN\",\"Virgin Islands (U.S.)\":\"VIR\",\"United Arab Emirates\":\"ARE\",\"Bahrain\":\"BHR\",\"Djibouti\":\"DJI\",\"Algeria\":\"DZA\",\"Egypt, Arab Rep.\":\"EGY\",\"Iran, Islamic Rep.\":\"IRN\",\"Iraq\":\"IRQ\",\"Israel\":\"ISR\",\"Jordan\":\"JOR\",\"Kuwait\":\"KWT\",\"Lebanon\":\"LBN\",\"Libya\":\"LBY\",\"Morocco\":\"MAR\",\"Malta\":\"MLT\",\"Oman\":\"OMN\",\"West Bank and Gaza\":\"PSE\",\"Qatar\":\"QAT\",\"Saudi Arabia\":\"SAU\",\"Syrian Arab Republic\":\"SYR\",\"Tunisia\":\"TUN\",\"Yemen, Rep.\":\"YEM\",\"Bermuda\":\"BMU\",\"Canada\":\"CAN\",\"United States\":\"USA\",\"Afghanistan\":\"AFG\",\"Bangladesh\":\"BGD\",\"Bhutan\":\"BTN\",\"India\":\"IND\",\"Sri Lanka\":\"LKA\",\"Maldives\":\"MDV\",\"Nepal\":\"NPL\",\"Pakistan\":\"PAK\",\"Angola\":\"AGO\",\"Burundi\":\"BDI\",\"Benin\":\"BEN\",\"Burkina Faso\":\"BFA\",\"Botswana\":\"BWA\",\"Central African Republic\":\"CAF\",\"Cote d'Ivoire\":\"CIV\",\"Cameroon\":\"CMR\",\"Congo, Dem. Rep.\":\"COD\",\"Congo, Rep.\":\"COG\",\"Comoros\":\"COM\",\"Cabo Verde\":\"CPV\",\"Eritrea\":\"ERI\",\"Ethiopia\":\"ETH\",\"Gabon\":\"GAB\",\"Ghana\":\"GHA\",\"Guinea\":\"GIN\",\"Gambia, The\":\"GMB\",\"Guinea-Bissau\":\"GNB\",\"Equatorial Guinea\":\"GNQ\",\"Kenya\":\"KEN\",\"Liberia\":\"LBR\",\"Lesotho\":\"LSO\",\"Madagascar\":\"MDG\",\"Mali\":\"MLI\",\"Mozambique\":\"MOZ\",\"Mauritania\":\"MRT\",\"Mauritius\":\"MUS\",\"Malawi\":\"MWI\",\"Namibia\":\"NAM\",\"Niger\":\"NER\",\"Nigeria\":\"NGA\",\"Rwanda\":\"RWA\",\"Sudan\":\"SDN\",\"Senegal\":\"SEN\",\"Sierra Leone\":\"SLE\",\"Somalia\":\"SOM\",\"South Sudan\":\"SSD\",\"São Tomé and Principe\":\"STP\",\"Swaziland\":\"SWZ\",\"Seychelles\":\"SYC\",\"Chad\":\"TCD\",\"Togo\":\"TGO\",\"Tanzania\":\"TZA\",\"Uganda\":\"UGA\",\"South Africa\":\"ZAF\",\"Zambia\":\"ZMB\",\"Zimbabwe\":\"ZWE\"}\n",
    "\n",
    "    for iso,region_iso in region_dict.items(): \n",
    "        if iso==iso3: \n",
    "            geo=iso3+';'+region_iso.replace(',',';')+';WLD'\n",
    "    print(geo)\n",
    "    #-------------------------------------------------------\n",
    "    \n",
    "    #What will be substitute in the template function for HTML writing\n",
    "    Input = {'indicator':indicator,'indicatoR':indicator.replace('.','_'),'indicatoR_':indicator.replace('.','_')+\"_\", 'geo':geo, 'iso3':iso3,'geo_':geo.replace('.','_')+\"_\", 'iso3_':iso3.replace('.','_')+\"_\"}\n",
    "\n",
    "    html='''\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=\"//code.jquery.com/jquery-1.9.1.js\"></script>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css\">\n",
    "        <script src=\"https://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "\n",
    "\n",
    "    <style type=\"text/css\">\n",
    "      #bulb_success {\n",
    "                    color: #6E9FC5;\n",
    "                }\n",
    "       .button1 {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "                margin-left: 40%;\n",
    "            }\n",
    "            .button2 {\n",
    "                background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "            }\n",
    "            .bulb {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                font-family: Calibri;\n",
    "            }\n",
    "            .button2:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            }\n",
    "            .button1:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            }\n",
    "\n",
    "      </style>\n",
    "\n",
    "     <title>AFD country Dashboard @Thomas_Roca </title>\n",
    "\n",
    "\n",
    "\n",
    "    <script type='text/javascript'>//<![CDATA[\n",
    "    //$(window).load(function(){\n",
    "    $(function() {\n",
    "\n",
    "      var region_list = [\"Africa\", \"Arab World\", \"Central Europe and the Baltics\", \"Latin America & Caribbean\", \"East Asia & Pacific (all income levels)\", \"East Asia & Pacific (developing only)\", \"Europe & Central Asia (all income levels)\", \"Europe & Central Asia (developing only)\", \"European Union\", \"Latin America & Caribbean (all income levels)\", \"Latin America & Caribbean (developing only)\", \"Least developed countries: UN classification\", \"Middle East & North Africa (all income levels)\", \"Middle East & North Africa (developing only)\",\"OECD members\", \"North America\", \"South Asia\", \"Sub-Saharan Africa (all income levels)\", \"Sub-Saharan Africa (developing only)\", \"Sub-Saharan Africa (excluding high income)\"];\n",
    "      var income_list = [\"High income\", \"High income: OECD\", \"High income: nonOECD\", \"Low income\", \"Middle income\", \"Lower middle income\", \"Upper middle income\", \"Low & middle income\", \"OECD members\"];\n",
    "      var world_list = [\"World\", \"world\", \"WLD\"];\n",
    "      var arrayRegion = [],\n",
    "        arrayIncome = [],\n",
    "        arrayCountry = [],\n",
    "        arrayWorld = [],\n",
    "        YearList = [];\n",
    "\n",
    "      //Settings \n",
    "      var lenght = 20; //$lenght\n",
    "      var display = 4 * lenght; //$display\n",
    "      var url_API = \"http://api.worldbank.org/countries/$geo/indicators/$indicator?per_page=\" + display + \"&MRV=\" + lenght + \"&format=jsonP&prefix=?\"\n",
    "      var url_local =\"data/$iso3_$indicatoR.json\"\n",
    "\n",
    "      // call http://api.worldbank.org/countries/CIV;SSA;LIC;WLD/indicators/NY.GDP.MKTP.KD.ZG?per_page=80&MRV=20&format=json\n",
    "\n",
    "      // variable that will take the value 1 if the call is successfull\n",
    "      API_success = 0\n",
    "\n",
    "\n",
    "        //------- Try 1st url, if succeed, API_success=1\n",
    "         $.getJSON(url_API, function(d) {\n",
    "            API_success = 1; // if failure, API_succes remains=0\n",
    "            url_success=url_API;\n",
    "            document.getElementById('bulb_success').style.color = \"#6E9FC5\";\n",
    "             });\n",
    "        //---------------------\t \n",
    "\n",
    "\n",
    "        //--------- if getJSON fails give a new URL ------------\n",
    "         setTimeout(function() { \n",
    "         if (API_success == 0) { // if failure\n",
    "             url_success = url_local\n",
    "             document.getElementById('bulb_success').style.color = \"red\";\n",
    "            };\n",
    "        }, 200); // doc ready\n",
    "\n",
    "        //---------------------\n",
    "\n",
    "\n",
    "\n",
    "    setTimeout(function() {\n",
    "\n",
    "        $.getJSON(url_success, function(json) {\n",
    "          $.each(json[1], function(i, data) {\n",
    "            // test if country name is in region_list\n",
    "            if ($.inArray(data.country.value, region_list) != -1) {\n",
    "              //Store Region Name\n",
    "              Region_name = data.country.value;\n",
    "              \n",
    "              // Append values to arrayRegion\n",
    "              if (data.value != null) {\n",
    "                arrayRegion.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayRegion.push(null)\n",
    "              }\n",
    "              // test if country name is in income_list\n",
    "            } else if ($.inArray(data.country.value, income_list) != -1) {\n",
    "              // Store Income name\n",
    "              Income_name = data.country.value;\n",
    "              if (data.value != null) {\n",
    "                arrayIncome.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayIncome.push(null)\n",
    "              }\n",
    "            } else if ($.inArray(data.country.value, world_list) != -1) {\n",
    "              // fill the Year list array \n",
    "              YearList.push(data.date);\n",
    "              // store Indictor Label\n",
    "              indicatorName = data.indicator.value;\n",
    "              if (data.value != null) {\n",
    "                arrayWorld.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayWorld.push(null)\n",
    "              }\n",
    "            } else {\n",
    "              // Finally create the country data vector\n",
    "              Country_name = data.country.value;\n",
    "              if (data.value != null) {\n",
    "                arrayCountry.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayCountry.push(null)\n",
    "              }\n",
    "            }\n",
    "          });\n",
    "\n",
    "\n",
    "\n",
    "          //Create a table with the list of Data.\n",
    "          var chart = new Highcharts.Chart({\n",
    "            chart: {\n",
    "              type: 'spline',\n",
    "              renderTo: 'container'\n",
    "            },\n",
    "            colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],\n",
    "            title: {\n",
    "              text: indicatorName\n",
    "            },\n",
    "            subtitle: {\n",
    "              text: 'Source: World Bank Data <br> <i>Last available data</i>'\n",
    "            },\n",
    "            xAxis: {\n",
    "              categories: YearList.reverse() //.reverse() to have the min year on the left \n",
    "            },\n",
    "            tooltip: {\n",
    "              valueDecimals: 2\n",
    "            },\n",
    "            series: [{\n",
    "              name: Country_name,\n",
    "              data: arrayCountry.reverse()\n",
    "            }, {\n",
    "              name: Region_name,\n",
    "              data: arrayRegion.reverse()\n",
    "            }, {\n",
    "              name: Income_name,\n",
    "              data: arrayIncome.reverse()\n",
    "            }, {\n",
    "              name: 'World',\n",
    "              data: arrayWorld.reverse()\n",
    "            }]\n",
    "          }); // end highcharts\n",
    "                $('#getcsv').click(function () {\n",
    "                   text=chart.getCSV()\n",
    "                var textToSave = text\n",
    "                var hiddenElement = document.createElement('a');\n",
    "                hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                hiddenElement.target = '_blank';\n",
    "                hiddenElement.download = 'Data.csv';\n",
    "                hiddenElement.click();\n",
    "                    });\n",
    "            }); // end getJSON\n",
    "        }, 1000); // doc ready\n",
    "     }); // end function \n",
    "\n",
    "\n",
    "\n",
    "    </script>\n",
    "\n",
    "\n",
    "    </head>\n",
    "\n",
    "    <body>\n",
    "\n",
    "      <div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>\n",
    "      <a href=\"TimeSerie_$indicatoR_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "      <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "      <a class=\"bulb\">API: <i id=\"bulb_success\" class=\"fa fa-plug\" aria-hidden=\"true\" ></i></a>\n",
    "    </body>\n",
    "\n",
    "    </html>\n",
    "   \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=\"475px\"></iframe>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "### II. Create the datviz"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## When function"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import sys,os,os.path\n",
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "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=\"//code.jquery.com/jquery-1.9.1.js\"></script>\n",
    "\n",
    "<script type='text/javascript'>//<![CDATA[\n",
    "\n",
    "    var lenght = 20; //$lenght\n",
    "      var display = 4 * lenght; //$display\n",
    "      var url_API = \"http://api.worldbank.org/countries/$geo/indicators/$indicator?per_page=\" + display + \"&MRV=\" + lenght + \"&format=jsonP&prefix=?\"\n",
    "      var url_local =\"data/$iso3_$indicatoR.json\"\n",
    "\n",
    "    // variable that will take the value 1 if the call is successfull\n",
    "      API_success = 0\n",
    "\n",
    "$.when({\n",
    "\n",
    "$.getJSON(url_API, function(d) {\n",
    "            API_success = 1; // if failure, API_succes remains=0\n",
    "            url_success=url_API;\n",
    "            document.getElementById('bulb_success').style.color = \"#6E9FC5\";\n",
    "             });\n",
    "} ).then(function() {\n",
    "  alert('hello'); // Alerts \"123\"\n",
    "});\n",
    "\n",
    "\n",
    "\n",
    "        /* /------- Try 1st url, if succeed, API_success=1\n",
    "         $.getJSON(url_API, function(d) {\n",
    "            API_success = 1; // if failure, API_succes remains=0\n",
    "            url_success=url_API;\n",
    "            document.getElementById('bulb_success').style.color = \"#6E9FC5\";\n",
    "             });\n",
    "       \n",
    "        //--------- if getJSON fails give a new URL ------------\n",
    "         setTimeout(function() { \n",
    "         if (API_success == 0) { // if failure\n",
    "             url_success = url_local\n",
    "             document.getElementById('bulb_success').style.color = \"red\";\n",
    "            };\n",
    "        }, 200); // doc ready\n",
    "\n",
    "        //--------------------- */\n",
    "\n",
    "\n",
    "      \n",
    "</script>\n",
    "\n",
    "    '''\n",
    "    \n",
    "#open an handle\n",
    "f = open(\"test.html\",'w')\n",
    "#write the content within the handle\n",
    "file_content = html\n",
    "f.write(file_content)\n",
    "f.close()\n",
    "#generate an html file\n",
    "HTML('<iframe src=\"Test.html\" scrolling=\"no\" frameborder=\"0\" width=100%\" height=\"475px\"></iframe>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import sys,os,os.path\n",
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "lenght=20\n",
    "display=4*lenght\n",
    "indicator=\"EG.USE.COMM.FO.ZS\"\n",
    "isolist=[\"USA\"] \n",
    "\n",
    "#PBLM the dictionnary just give \n",
    "\n",
    "for iso3 in isolist:\n",
    "    \n",
    "    #----- store income and region name out of iso3 -------\n",
    "    region_dict= {\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"ASM\":\"UMC,EAS\",\"AUS\":\"HIC,EAS\",\"BRN\":\"UMC,EAS\",\"CHN\":\"UMC,EAS\",\"FJI\":\"UMC,EAS\",\"FSM\":\"LMC,EAS\",\"GUM\":\"UMC,EAS\",\"HKG\":\"UMC,EAS\",\"IDN\":\"LMC,EAS\",\"JPN\":\"HIC,EAS\",\"KHM\":\"LIC,EAS\",\"KIR\":\"LMC,EAS\",\"KOR\":\"HIC,EAS\",\"LAO\":\"LMC,EAS\",\"MAC\":\"UMC,EAS\",\"MHL\":\"UMC,EAS\",\"MMR\":\"LMC,EAS\",\"MNG\":\"UMC,EAS\",\"MNP\":\"UMC,EAS\",\"MYS\":\"UMC,EAS\",\"NCL\":\"UMC,EAS\",\"NZL\":\"HIC,EAS\",\"PHL\":\"LMC,EAS\",\"PLW\":\"UMC,EAS\",\"PNG\":\"LMC,EAS\",\"PRK\":\"LIC,EAS\",\"PYF\":\"UMC,EAS\",\"SGP\":\"UMC,EAS\",\"SLB\":\"LMC,EAS\",\"THA\":\"UMC,EAS\",\"TLS\":\"LMC,EAS\",\"TON\":\"UMC,EAS\",\"TUV\":\"UMC,EAS\",\"TWN\":\"UMC,EAS\",\"VNM\":\"LMC,EAS\",\"VUT\":\"LMC,EAS\",\"WSM\":\"LMC,EAS\",\"ALB\":\"UMC,ECS\",\"AND\":\"UMC,ECS\",\"ARM\":\"LMC,ECS\",\"AUT\":\"HIC,ECS\",\"AZE\":\"UMC,ECS\",\"BEL\":\"HIC,ECS\",\"BGR\":\"UMC,ECS\",\"BIH\":\"UMC,ECS\",\"BLR\":\"UMC,ECS\",\"CHE\":\"HIC,ECS\",\"CHI\":\"UMC,ECS\",\"CYP\":\"UMC,ECS\",\"CZE\":\"HIC,ECS\",\"DEU\":\"HIC,ECS\",\"DNK\":\"HIC,ECS\",\"ESP\":\"HIC,ECS\",\"EST\":\"HIC,ECS\",\"FIN\":\"HIC,ECS\",\"FRA\":\"HIC,ECS\",\"FRO\":\"UMC,ECS\",\"GBR\":\"HIC,ECS\",\"GEO\":\"LMC,ECS\",\"GRC\":\"HIC,ECS\",\"GRL\":\"UMC,ECS\",\"HRV\":\"UMC,ECS\",\"HUN\":\"HIC,ECS\",\"IMN\":\"UMC,ECS\",\"IRL\":\"HIC,ECS\",\"ISL\":\"HIC,ECS\",\"ITA\":\"HIC,ECS\",\"KAZ\":\"UMC,ECS\",\"KGZ\":\"LMC,ECS\",\"LIE\":\"UMC,ECS\",\"LTU\":\"UMC,ECS\",\"LUX\":\"HIC,ECS\",\"LVA\":\"UMC,ECS\",\"MCO\":\"UMC,ECS\",\"MDA\":\"LMC,ECS\",\"MKD\":\"UMC,ECS\",\"MNE\":\"UMC,ECS\",\"NLD\":\"HIC,ECS\",\"NOR\":\"HIC,ECS\",\"POL\":\"HIC,ECS\",\"PRT\":\"HIC,ECS\",\"ROU\":\"UMC,ECS\",\"RUS\":\"UMC,ECS\",\"SMR\":\"HIC,ECS\",\"SRB\":\"UMC,ECS\",\"SVK\":\"HIC,ECS\",\"SVN\":\"HIC,ECS\",\"SWE\":\"HIC,ECS\",\"TJK\":\"LMC,ECS\",\"TKM\":\"UMC,ECS\",\"TUR\":\"UMC,ECS\",\"UKR\":\"LMC,ECS\",\"UZB\":\"LMC,ECS\",\"ABW\":\"HIC,LCN\",\"ARG\":\"HIC,LCN\",\"ATG\":\"HIC,LCN\",\"BHS\":\"HIC,LCN\",\"BLZ\":\"UMC,LCN\",\"BOL\":\"LMC,LCN\",\"BRA\":\"UMC,LCN\",\"BRB\":\"HIC,LCN\",\"CHL\":\"HIC,LCN\",\"COL\":\"UMC,LCN\",\"CRI\":\"UMC,LCN\",\"CUB\":\"UMC,LCN\",\"CUW\":\"HIC,LCN\",\"CYM\":\"HIC,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\":\"HIC,LCN\",\"LCA\":\"UMC,LCN\",\"MAF\":\"HIC,LCN\",\"MEX\":\"UMC,LCN\",\"NIC\":\"LMC,LCN\",\"PAN\":\"UMC,LCN\",\"PER\":\"UMC,LCN\",\"PRI\":\"HIC,LCN\",\"PRY\":\"UMC,LCN\",\"SLV\":\"LMC,LCN\",\"SUR\":\"UMC,LCN\",\"SXM\":\"HIC,LCN\",\"TCA\":\"HIC,LCN\",\"TTO\":\"HIC,LCN\",\"URY\":\"HIC,LCN\",\"VCT\":\"UMC,LCN\",\"VEN\":\"HIC,LCN\",\"VIR\":\"HIC,LCN\",\"ARE\":\"HIC,MEA\",\"BHR\":\"HIC,MEA\",\"DJI\":\"LMC,MEA\",\"DZA\":\"UMC,MEA\",\"EGY\":\"LMC,MEA\",\"IRN\":\"UMC,MEA\",\"IRQ\":\"UMC,MEA\",\"ISR\":\"HIC,MEA\",\"JOR\":\"UMC,MEA\",\"KWT\":\"HIC,MEA\",\"LBN\":\"UMC,MEA\",\"LBY\":\"UMC,MEA\",\"MAR\":\"LMC,MEA\",\"MLT\":\"HIC,MEA\",\"OMN\":\"HIC,MEA\",\"PSE\":\"LMC,MEA\",\"QAT\":\"HIC,MEA\",\"SAU\":\"HIC,MEA\",\"SYR\":\"LMC,MEA\",\"TUN\":\"UMC,MEA\",\"YEM\":\"LMC,MEA\",\"BMU\":\"HIC,OED\",\"CAN\":\"HIC,OED\",\"USA\":\"HIC,OED\",\"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,SSA\",\"BDI\":\"LIC,SSA\",\"BEN\":\"LIC,SSA\",\"BFA\":\"LIC,SSA\",\"BWA\":\"UMC,SSA\",\"CAF\":\"LIC,SSA\",\"CIV\":\"LMC,SSA\",\"CMR\":\"LMC,SSA\",\"COD\":\"LIC,SSA\",\"COG\":\"LMC,SSA\",\"COM\":\"LIC,SSA\",\"CPV\":\"LMC,SSA\",\"ERI\":\"LIC,SSA\",\"ETH\":\"LIC,SSA\",\"GAB\":\"UMC,SSA\",\"GHA\":\"LMC,SSA\",\"GIN\":\"LIC,SSA\",\"GMB\":\"LIC,SSA\",\"GNB\":\"LIC,SSA\",\"GNQ\":\"HIC,SSA\",\"KEN\":\"LMC,SSA\",\"LBR\":\"LIC,SSA\",\"LSO\":\"LMC,SSA\",\"MDG\":\"LIC,SSA\",\"MLI\":\"LIC,SSA\",\"MOZ\":\"LIC,SSA\",\"MRT\":\"LMC,SSA\",\"MUS\":\"UMC,SSA\",\"MWI\":\"LIC,SSA\",\"NAM\":\"UMC,SSA\",\"NER\":\"LIC,SSA\",\"NGA\":\"LMC,SSA\",\"RWA\":\"LIC,SSA\",\"SDN\":\"LMC,SSA\",\"SEN\":\"LMC,SSA\",\"SLE\":\"LIC,SSA\",\"SOM\":\"LIC,SSA\",\"SSD\":\"LIC,SSA\",\"STP\":\"LMC,SSA\",\"SWZ\":\"LMC,SSA\",\"SYC\":\"HIC,SSA\",\"TCD\":\"LIC,SSA\",\"TGO\":\"LIC,SSA\",\"TZA\":\"LIC,SSA\",\"UGA\":\"LIC,SSA\",\"ZAF\":\"UMC,SSA\",\"ZMB\":\"LMC,SSA\",\"ZWE\":\"LIC,SSA\"}\n",
    "    country_dict = {\"Latin America & Caribbean\":\"LCN\",\"South Asia\":\"SAS\",\"Sub-Saharan Africa\":\"SSA\",\"Europe & Central Asia\":\"ECS\",\"Middle East & North Africa\":\"MEA\",\"East Asia & Pacific\":\"EAS\",\"North America\":\"NAC\",\"World\":\"WLD\",\"High income\":\"HIC\",\"Low income\":\"LIC\",\"Upper middle income\":\"UMC\",\"Lower middle income\":\"LMC\",\"Not classified\":\"INX\",\"Cote d'Ivoire\":\"CIV\",\"Curacao\":\"CUW\",\"Sao Tome and Principe\":\"STP\",\"American Samoa\":\"ASM\",\"Australia\":\"AUS\",\"Brunei Darussalam\":\"BRN\",\"China\":\"CHN\",\"Fiji\":\"FJI\",\"Micronesia, Fed. Sts.\":\"FSM\",\"Guam\":\"GUM\",\"Hong Kong SAR, China\":\"HKG\",\"Indonesia\":\"IDN\",\"Japan\":\"JPN\",\"Cambodia\":\"KHM\",\"Kiribati\":\"KIR\",\"Korea, Rep.\":\"KOR\",\"Lao PDR\":\"LAO\",\"Macao SAR, China\":\"MAC\",\"Marshall Islands\":\"MHL\",\"Myanmar\":\"MMR\",\"Mongolia\":\"MNG\",\"Northern Mariana Islands\":\"MNP\",\"Malaysia\":\"MYS\",\"New Caledonia\":\"NCL\",\"New Zealand\":\"NZL\",\"Philippines\":\"PHL\",\"Palau\":\"PLW\",\"Papua New Guinea\":\"PNG\",\"Korea, Dem. Rep.\":\"PRK\",\"French Polynesia\":\"PYF\",\"Singapore\":\"SGP\",\"Solomon Islands\":\"SLB\",\"Thailand\":\"THA\",\"Timor-Leste\":\"TLS\",\"Tonga\":\"TON\",\"Tuvalu\":\"TUV\",\"Taiwan, China\":\"TWN\",\"Vietnam\":\"VNM\",\"Vanuatu\":\"VUT\",\"Samoa\":\"WSM\",\"Albania\":\"ALB\",\"Andorra\":\"AND\",\"Armenia\":\"ARM\",\"Austria\":\"AUT\",\"Azerbaijan\":\"AZE\",\"Belgium\":\"BEL\",\"Bulgaria\":\"BGR\",\"Bosnia and Herzegovina\":\"BIH\",\"Belarus\":\"BLR\",\"Switzerland\":\"CHE\",\"Channel Islands\":\"CHI\",\"Cyprus\":\"CYP\",\"Czech Republic\":\"CZE\",\"Germany\":\"DEU\",\"Denmark\":\"DNK\",\"Spain\":\"ESP\",\"Estonia\":\"EST\",\"Finland\":\"FIN\",\"France\":\"FRA\",\"Faeroe Islands\":\"FRO\",\"United Kingdom\":\"GBR\",\"Georgia\":\"GEO\",\"Greece\":\"GRC\",\"Greenland\":\"GRL\",\"Croatia\":\"HRV\",\"Hungary\":\"HUN\",\"Isle of Man\":\"IMN\",\"Ireland\":\"IRL\",\"Iceland\":\"ISL\",\"Italy\":\"ITA\",\"Kazakhstan\":\"KAZ\",\"Kyrgyz Republic\":\"KGZ\",\"Liechtenstein\":\"LIE\",\"Lithuania\":\"LTU\",\"Luxembourg\":\"LUX\",\"Latvia\":\"LVA\",\"Monaco\":\"MCO\",\"Moldova\":\"MDA\",\"Macedonia, FYR\":\"MKD\",\"Montenegro\":\"MNE\",\"Netherlands\":\"NLD\",\"Norway\":\"NOR\",\"Poland\":\"POL\",\"Portugal\":\"PRT\",\"Romania\":\"ROU\",\"Russian Federation\":\"RUS\",\"San Marino\":\"SMR\",\"Serbia\":\"SRB\",\"Slovak Republic\":\"SVK\",\"Slovenia\":\"SVN\",\"Sweden\":\"SWE\",\"Tajikistan\":\"TJK\",\"Turkmenistan\":\"TKM\",\"Turkey\":\"TUR\",\"Ukraine\":\"UKR\",\"Uzbekistan\":\"UZB\",\"Aruba\":\"ABW\",\"Argentina\":\"ARG\",\"Antigua and Barbuda\":\"ATG\",\"Bahamas, The\":\"BHS\",\"Belize\":\"BLZ\",\"Bolivia\":\"BOL\",\"Brazil\":\"BRA\",\"Barbados\":\"BRB\",\"Chile\":\"CHL\",\"Colombia\":\"COL\",\"Costa Rica\":\"CRI\",\"Cuba\":\"CUB\",\"Curaçao\":\"CUW\",\"Cayman Islands\":\"CYM\",\"Dominica\":\"DMA\",\"Dominican Republic\":\"DOM\",\"Ecuador\":\"ECU\",\"Grenada\":\"GRD\",\"Guatemala\":\"GTM\",\"Guyana\":\"GUY\",\"Honduras\":\"HND\",\"Haiti\":\"HTI\",\"Jamaica\":\"JAM\",\"St. Kitts and Nevis\":\"KNA\",\"St. Lucia\":\"LCA\",\"St. Martin (French part)\":\"MAF\",\"Mexico\":\"MEX\",\"Nicaragua\":\"NIC\",\"Panama\":\"PAN\",\"Peru\":\"PER\",\"Puerto Rico\":\"PRI\",\"Paraguay\":\"PRY\",\"El Salvador\":\"SLV\",\"Suriname\":\"SUR\",\"Sint Maarten (Dutch part)\":\"SXM\",\"Turks and Caicos Islands\":\"TCA\",\"Trinidad and Tobago\":\"TTO\",\"Uruguay\":\"URY\",\"St. Vincent and the Grenadines\":\"VCT\",\"Venezuela, RB\":\"VEN\",\"Virgin Islands (U.S.)\":\"VIR\",\"United Arab Emirates\":\"ARE\",\"Bahrain\":\"BHR\",\"Djibouti\":\"DJI\",\"Algeria\":\"DZA\",\"Egypt, Arab Rep.\":\"EGY\",\"Iran, Islamic Rep.\":\"IRN\",\"Iraq\":\"IRQ\",\"Israel\":\"ISR\",\"Jordan\":\"JOR\",\"Kuwait\":\"KWT\",\"Lebanon\":\"LBN\",\"Libya\":\"LBY\",\"Morocco\":\"MAR\",\"Malta\":\"MLT\",\"Oman\":\"OMN\",\"West Bank and Gaza\":\"PSE\",\"Qatar\":\"QAT\",\"Saudi Arabia\":\"SAU\",\"Syrian Arab Republic\":\"SYR\",\"Tunisia\":\"TUN\",\"Yemen, Rep.\":\"YEM\",\"Bermuda\":\"BMU\",\"Canada\":\"CAN\",\"United States\":\"USA\",\"Afghanistan\":\"AFG\",\"Bangladesh\":\"BGD\",\"Bhutan\":\"BTN\",\"India\":\"IND\",\"Sri Lanka\":\"LKA\",\"Maldives\":\"MDV\",\"Nepal\":\"NPL\",\"Pakistan\":\"PAK\",\"Angola\":\"AGO\",\"Burundi\":\"BDI\",\"Benin\":\"BEN\",\"Burkina Faso\":\"BFA\",\"Botswana\":\"BWA\",\"Central African Republic\":\"CAF\",\"Cote d'Ivoire\":\"CIV\",\"Cameroon\":\"CMR\",\"Congo, Dem. Rep.\":\"COD\",\"Congo, Rep.\":\"COG\",\"Comoros\":\"COM\",\"Cabo Verde\":\"CPV\",\"Eritrea\":\"ERI\",\"Ethiopia\":\"ETH\",\"Gabon\":\"GAB\",\"Ghana\":\"GHA\",\"Guinea\":\"GIN\",\"Gambia, The\":\"GMB\",\"Guinea-Bissau\":\"GNB\",\"Equatorial Guinea\":\"GNQ\",\"Kenya\":\"KEN\",\"Liberia\":\"LBR\",\"Lesotho\":\"LSO\",\"Madagascar\":\"MDG\",\"Mali\":\"MLI\",\"Mozambique\":\"MOZ\",\"Mauritania\":\"MRT\",\"Mauritius\":\"MUS\",\"Malawi\":\"MWI\",\"Namibia\":\"NAM\",\"Niger\":\"NER\",\"Nigeria\":\"NGA\",\"Rwanda\":\"RWA\",\"Sudan\":\"SDN\",\"Senegal\":\"SEN\",\"Sierra Leone\":\"SLE\",\"Somalia\":\"SOM\",\"South Sudan\":\"SSD\",\"São Tomé and Principe\":\"STP\",\"Swaziland\":\"SWZ\",\"Seychelles\":\"SYC\",\"Chad\":\"TCD\",\"Togo\":\"TGO\",\"Tanzania\":\"TZA\",\"Uganda\":\"UGA\",\"South Africa\":\"ZAF\",\"Zambia\":\"ZMB\",\"Zimbabwe\":\"ZWE\"}\n",
    "\n",
    "    for iso,region_iso in region_dict.items(): \n",
    "        if iso==iso3: \n",
    "            geo=iso3+';'+region_iso.replace(',',';')+';WLD'\n",
    "    print(geo)\n",
    "    #-------------------------------------------------------\n",
    "    \n",
    "    #What will be substitute in the template function for HTML writing\n",
    "    Input = {'indicator':indicator,'indicatoR':indicator.replace('.','_'),'indicatoR_':indicator.replace('.','_')+\"_\", 'geo':geo, 'iso3':iso3,'geo_':geo.replace('.','_')+\"_\", 'iso3_':iso3.replace('.','_')+\"_\"}\n",
    "\n",
    "    html='''\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=\"//code.jquery.com/jquery-1.9.1.js\"></script>\n",
    "        <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css\">\n",
    "        <script src=\"https://code.highcharts.com/highcharts.js\"></script>\n",
    "        <script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n",
    "        <script src=\"export-csv.js\"></script> \n",
    "\n",
    "\n",
    "    <style type=\"text/css\">\n",
    "      #bulb_success {\n",
    "                    color: #6E9FC5;\n",
    "                }\n",
    "       .button1 {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "                margin-left: 40%;\n",
    "            }\n",
    "            .button2 {\n",
    "                background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                cursor: pointer;\n",
    "                font-family: Calibri;\n",
    "            }\n",
    "            .bulb {\n",
    "               background-color: white;\n",
    "                border: none;\n",
    "                color: #6E9FC5;\n",
    "                padding: 5px 12px;\n",
    "                text-align: center;\n",
    "                text-decoration: none;\n",
    "                font-size: 11px;\n",
    "                font-family: Calibri;\n",
    "            }\n",
    "            .button2:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            }\n",
    "            .button1:hover {\n",
    "                background-color: #6E9FC5; \n",
    "                color: white;\n",
    "            }\n",
    "\n",
    "      </style>\n",
    "\n",
    "     <title>AFD country Dashboard @Thomas_Roca </title>\n",
    "\n",
    "\n",
    "\n",
    "    <script type='text/javascript'>//<![CDATA[\n",
    "    //$(window).load(function(){\n",
    "    $(function() {\n",
    "\n",
    "      var region_list = [\"Africa\", \"Arab World\", \"Central Europe and the Baltics\", \"Latin America & Caribbean\", \"East Asia & Pacific (all income levels)\", \"East Asia & Pacific (developing only)\", \"Europe & Central Asia (all income levels)\", \"Europe & Central Asia (developing only)\", \"European Union\", \"Latin America & Caribbean (all income levels)\", \"Latin America & Caribbean (developing only)\", \"Least developed countries: UN classification\", \"Middle East & North Africa (all income levels)\", \"Middle East & North Africa (developing only)\",\"OECD members\", \"North America\", \"South Asia\", \"Sub-Saharan Africa (all income levels)\", \"Sub-Saharan Africa (developing only)\", \"Sub-Saharan Africa (excluding high income)\"];\n",
    "      var income_list = [\"High income\", \"High income: OECD\", \"High income: nonOECD\", \"Low income\", \"Middle income\", \"Lower middle income\", \"Upper middle income\", \"Low & middle income\", \"OECD members\"];\n",
    "      var world_list = [\"World\", \"world\", \"WLD\"];\n",
    "      var arrayRegion = [],\n",
    "        arrayIncome = [],\n",
    "        arrayCountry = [],\n",
    "        arrayWorld = [],\n",
    "        YearList = [];\n",
    "\n",
    "      //Settings \n",
    "      var lenght = 20; //$lenght\n",
    "      var display = 4 * lenght; //$display\n",
    "      var url_API = \"http://api.worldbank.org/countries/$geo/indicators/$indicator?per_page=\" + display + \"&MRV=\" + lenght + \"&format=jsonP&prefix=?\"\n",
    "      var url_local =\"data/$iso3_$indicatoR.json\"\n",
    "\n",
    "      // call http://api.worldbank.org/countries/CIV;SSA;LIC;WLD/indicators/NY.GDP.MKTP.KD.ZG?per_page=80&MRV=20&format=json\n",
    "\n",
    "      // variable that will take the value 1 if the call is successfull\n",
    "      API_success = 0\n",
    "\n",
    "\n",
    "        //------- Try 1st url, if succeed, API_success=1\n",
    "         $.getJSON(url_API, function(d) {\n",
    "            API_success = 1; // if failure, API_succes remains=0\n",
    "            url_success=url_API;\n",
    "            document.getElementById('bulb_success').style.color = \"#6E9FC5\";\n",
    "             });\n",
    "        //---------------------\t \n",
    "\n",
    "\n",
    "        //--------- if getJSON fails give a new URL ------------\n",
    "         setTimeout(function() { \n",
    "         if (API_success == 0) { // if failure\n",
    "             url_success = url_local\n",
    "             document.getElementById('bulb_success').style.color = \"red\";\n",
    "            };\n",
    "        }, 200); // doc ready\n",
    "\n",
    "        //---------------------\n",
    "\n",
    "\n",
    "\n",
    "    setTimeout(function() {\n",
    "\n",
    "        $.getJSON(url_success, function(json) {\n",
    "          $.each(json[1], function(i, data) {\n",
    "            // test if country name is in region_list\n",
    "            if ($.inArray(data.country.value, region_list) != -1) {\n",
    "              //Store Region Name\n",
    "              Region_name = data.country.value;\n",
    "              \n",
    "              // Append values to arrayRegion\n",
    "              if (data.value != null) {\n",
    "                arrayRegion.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayRegion.push(null)\n",
    "              }\n",
    "              // test if country name is in income_list\n",
    "            } else if ($.inArray(data.country.value, income_list) != -1) {\n",
    "              // Store Income name\n",
    "              Income_name = data.country.value;\n",
    "              if (data.value != null) {\n",
    "                arrayIncome.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayIncome.push(null)\n",
    "              }\n",
    "            } else if ($.inArray(data.country.value, world_list) != -1) {\n",
    "              // fill the Year list array \n",
    "              YearList.push(data.date);\n",
    "              // store Indictor Label\n",
    "              indicatorName = data.indicator.value;\n",
    "              if (data.value != null) {\n",
    "                arrayWorld.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayWorld.push(null)\n",
    "              }\n",
    "            } else {\n",
    "              // Finally create the country data vector\n",
    "              Country_name = data.country.value;\n",
    "              if (data.value != null) {\n",
    "                arrayCountry.push(parseFloat(data.value));\n",
    "              } else {\n",
    "                arrayCountry.push(null)\n",
    "              }\n",
    "            }\n",
    "          });\n",
    "\n",
    "\n",
    "\n",
    "          //Create a table with the list of Data.\n",
    "          var chart = new Highcharts.Chart({\n",
    "            chart: {\n",
    "              type: 'spline',\n",
    "              renderTo: 'container'\n",
    "            },\n",
    "            colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],\n",
    "            title: {\n",
    "              text: indicatorName\n",
    "            },\n",
    "            subtitle: {\n",
    "              text: 'Source: World Bank Data <br> <i>Last available data</i>'\n",
    "            },\n",
    "            xAxis: {\n",
    "              categories: YearList.reverse() //.reverse() to have the min year on the left \n",
    "            },\n",
    "            tooltip: {\n",
    "              valueDecimals: 2\n",
    "            },\n",
    "            series: [{\n",
    "              name: Country_name,\n",
    "              data: arrayCountry.reverse()\n",
    "            }, {\n",
    "              name: Region_name,\n",
    "              data: arrayRegion.reverse()\n",
    "            }, {\n",
    "              name: Income_name,\n",
    "              data: arrayIncome.reverse()\n",
    "            }, {\n",
    "              name: 'World',\n",
    "              data: arrayWorld.reverse()\n",
    "            }]\n",
    "          }); // end highcharts\n",
    "                $('#getcsv').click(function () {\n",
    "                   text=chart.getCSV()\n",
    "                var textToSave = text\n",
    "                var hiddenElement = document.createElement('a');\n",
    "                hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);\n",
    "                hiddenElement.target = '_blank';\n",
    "                hiddenElement.download = 'Data.csv';\n",
    "                hiddenElement.click();\n",
    "                    });\n",
    "            }); // end getJSON\n",
    "        }, 1000); // doc ready\n",
    "     }); // end function \n",
    "\n",
    "\n",
    "\n",
    "    </script>\n",
    "\n",
    "\n",
    "    </head>\n",
    "\n",
    "    <body>\n",
    "\n",
    "      <div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>\n",
    "      <a href=\"TimeSerie_$indicatoR_$iso3.html\" target=\"_blank\" class=\"button1\"><i class=\"fa fa-arrows-alt\" aria-hidden=\"true\"></i> Full screen</a>\n",
    "      <button id=\"getcsv\" class=\"button2\"><i class=\"fa fa-cloud-download\" aria-hidden=\"true\"></i> Download data</button>\n",
    "      <a class=\"bulb\">API: <i id=\"bulb_success\" class=\"fa fa-plug\" aria-hidden=\"true\" ></i></a>\n",
    "    </body>\n",
    "\n",
    "    </html>\n",
    "   \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=\"475px\"></iframe>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Bar chart - HDI by gender"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": 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",
    "'''"
   ]
  }
 ],
 "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
}