{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>brca1_gene = {'name': 'BRCA1', 'chr': '17', 'start': 43044294, 'stop': 43125482};apoe_gene = {'name': 'APOE', 'chr': '19', 'start': 44905749, 'stop': 44909395};</script><div id=\"ideo-container\" style=\"height: 200px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "brca1_gene = {'name': 'BRCA1', 'chr': '17', 'start': 43044294, 'stop': 43125482}\n",
    "apoe_gene = {'name': 'APOE', 'chr': '19', 'start': 44905749, 'stop': 44909395}\n",
    "\n",
    "HTML(\n",
    "    '<script>' +\n",
    "        'brca1_gene = ' + str(brca1_gene) + ';' +\n",
    "        'apoe_gene = ' + str(apoe_gene) + ';' +\n",
    "    '</script>' +\n",
    "    '<div id=\"ideo-container\" style=\"height: 200px\"></div>'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        Ideogram: 'https://unpkg.com/ideogram/dist/js/ideogram.min'\n",
       "    }\n",
       "});\n",
       "require(['Ideogram'], function(Ideogram) {\n",
       "    window.Ideogram = Ideogram.default;\n",
       "});\n",
       "\n",
       "var ideogram = new Ideogram({\n",
       "    organism: 'human',\n",
       "    container: '#ideo-container',\n",
       "    resolution: 550, // proxy for number of cytobands\n",
       "    chrHeight: 175,\n",
       "    chrMargin: 3,\n",
       "    annotationHeight: 4,\n",
       "    annotations: [brca1_gene, apoe_gene]\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        Ideogram: 'https://unpkg.com/ideogram/dist/js/ideogram.min'\n",
    "    }\n",
    "});\n",
    "require(['Ideogram'], function(Ideogram) {\n",
    "    window.Ideogram = Ideogram.default;\n",
    "});\n",
    "\n",
    "var ideogram = new Ideogram({\n",
    "    organism: 'human',\n",
    "    container: '#ideo-container',\n",
    "    resolution: 550, // proxy for number of cytobands\n",
    "    chrHeight: 175,\n",
    "    chrMargin: 3,\n",
    "    annotationHeight: 4,\n",
    "    annotations: [brca1_gene, apoe_gene]\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}