require-demo.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It's a living thing!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "All of this source is heavily based on Qgrid's source: https://github.com/quantopian/qgrid"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import display_html, display_javascript\n",
    "\n",
    "TEMPLATE_HTML = \"\"\"\n",
    "<script type=\"text/javascript\">\n",
    "{% raw %}\n",
    "if ($(\"#emperor-css\").length == 0){{\n",
    "    $(\"head\").append([\n",
    "{% endraw %}\n",
    "        '<link id=\"emperor-css\" rel=\"stylesheet\" type=\"text/css\" href=\"{{ base_URL }}/emperor/support_files/css/emperor.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ base_URL }}/emperor/support_files/vendor/css/jquery-ui.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ base_URL }}/emperor/support_files/vendor/css/slick.grid.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ base_URL }}/emperor/support_files/vendor/css/spectrum.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ base_URL }}/emperor/support_files/vendor/css/chosen.min.css\">'\n",
    "    ]);\n",
    "}}\n",
    "</script>\n",
    "<div id='python-penguin' style=\"position: relative; width:100%; height:500px;\"></div>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "TEMPLATE_JS = \"\"\"\n",
    "<script type=\"text/javascript\">\n",
    "requirejs.config({\n",
    "'baseUrl': '{{ base_URL }}/emperor/support_files/',\n",
    "\n",
    "// the left side is the module name, and the right side is the path\n",
    "// relative to the baseUrl attribute, do NOT include the .js extension\n",
    "'paths': {\n",
    "  /* jQuery */\n",
    "  'jquery': './vendor/js/jquery-2.1.4.min',\n",
    "  'jqueryui': './vendor/js/jquery-ui.min',\n",
    "  'jquery_drag': './vendor/js/jquery.event.drag-2.2.min',\n",
    "\n",
    "  /* jQuery plugins */\n",
    "  'chosen': './vendor/js/chosen.jquery.min',\n",
    "  'spectrum': './vendor/js/spectrum.min',\n",
    "\n",
    "  /* other libraries */\n",
    "  'underscore': './vendor/js/underscore-min',\n",
    "  'chroma': './vendor/js/chroma.min',\n",
    "\n",
    "\n",
    "  /* THREE.js and plugins */\n",
    "  'three': './vendor/js/three.min',\n",
    "  'orbitcontrols': './vendor/js/three.js-plugins/OrbitControls',\n",
    "\n",
    "  /* SlickGrid */\n",
    "  'slickcore': './vendor/js/slick.core.min',\n",
    "  'slickgrid': './vendor/js/slick.grid.min',\n",
    "  'slickformatters': './vendor/js/slick.editors.min',\n",
    "  'slickeditors': './vendor/js/slick.formatters.min',\n",
    "\n",
    "  /* Emperor's objects */\n",
    "  'model': './js/model',\n",
    "  'view': './js/view',\n",
    "  'controller': './js/controller',\n",
    "  'draw': './js/draw',\n",
    "  'scene3d': './js/sceneplotview3d',\n",
    "  'viewcontroller': './js/view-controller',\n",
    "  'colorviewcontroller': './js/color-view-controller',\n",
    "  'visibilitycontroller': './js/visibility-controller',\n",
    "  'color-editor': './js/color-editor',\n",
    "},\n",
    "/*\n",
    "   Libraries that are not AMD compatible need shim to declare their\n",
    "   dependencies.\n",
    " */\n",
    "'shim': {\n",
    "  'jquery_drag': {\n",
    "    'deps': ['jquery', 'jqueryui']\n",
    "  },\n",
    "  'chosen': {\n",
    "    'deps': ['jquery'],\n",
    "    'exports': 'jQuery.fn.chosen'\n",
    "  },\n",
    "  'orbitcontrols': {\n",
    "    'deps': ['three']\n",
    "  },\n",
    "'slickcore': ['jqueryui'],\n",
    "'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',\n",
    "              'slickeditors']\n",
    "}\n",
    "});\n",
    "\n",
    "requirejs(\n",
    "[\"jquery\", \"model\", \"controller\"],\n",
    "function($, model, EmperorController) {\n",
    "  var DecompositionModel = model.DecompositionModel;\n",
    "\n",
    "  var div = $('#python-penguin');\n",
    "  console.log(div)\n",
    "\n",
    "  var ids = {{ coords_ids }};\n",
    "  var coords = {{ coords }};\n",
    "  var pct_var = {{ pct_var }};\n",
    "  var md_headers = {{ md_headers}};\n",
    "  var metadata = {{  metadata }};\n",
    "\n",
    "  var dm, ec;\n",
    "\n",
    "  function init() {\n",
    "    // Initialize the DecompositionModel\n",
    "    dm = new DecompositionModel(name, ids, coords, pct_var,\n",
    "                                md_headers, metadata);\n",
    "    // Initialize the EmperorController\n",
    "    ec = new EmperorController(dm, 'python-penguin');\n",
    "    lol = ec\n",
    "  }\n",
    "\n",
    "  function animate() {\n",
    "    requestAnimationFrame(animate);\n",
    "    ec.render();\n",
    "  }\n",
    "  $(window).resize(function() {\n",
    "    ec.resize(window.innerWidth, window.innerHeight);\n",
    "  });\n",
    "  \n",
    "  $(function(){\n",
    "    init();\n",
    "    animate();\n",
    "  \n",
    "  });\n",
    "\n",
    "}); // END REQUIRE.JS block\n",
    "</script>\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import display_html, display_javascript, display, HTML\n",
    "from jinja2 import Template\n",
    "from random import sample\n",
    "import numpy as np\n",
    "\n",
    "# BASE_URL = 'https://cdn.rawgit.com/ElDeveloper/emperor/require-js'\n",
    "BASE_URL = 'https://cdn.rawgit.com/biocore/emperor/new-api'\n",
    "\n",
    "def listify(a):\n",
    "    #return np.asarray(a, dtype='str').tolist()\n",
    "    return np.asarray(a, dtype='str').tolist()\n",
    "\n",
    "def make_emperor(N):\n",
    "\n",
    "    categories = np.asarray(np.random.randint(1, 1000, N)*100, str)\n",
    "\n",
    "    coords_ids = listify(np.arange(N))\n",
    "    #coords = listify(np.random.randn(N, 10))\n",
    "    coords = np.random.randn(N, 10).tolist()\n",
    "    pct_var = listify(1/np.exp(np.arange(10)))\n",
    "    pct_var =  (1/np.exp(np.arange(10))).tolist()\n",
    "\n",
    "    md_headers = ['SampleID', 'DOB']\n",
    "    metadata = []\n",
    "    for _id in coords_ids:\n",
    "        metadata.append([_id, ''.join(sample(set(categories), 1))])\n",
    "\n",
    "    full = Template(TEMPLATE_HTML).render(base_URL=BASE_URL)\n",
    "    full += Template(TEMPLATE_JS).render(coords_ids=coords_ids, coords=coords,\n",
    "                            pct_var=pct_var, md_headers=md_headers,\n",
    "                            metadata=metadata, base_URL=BASE_URL)\n",
    "    return display(HTML(full))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "make_emperor(1000)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}