display-javascript.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import Javascript, display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$.getScript(\"http://d3js.org/d3.v3.min.js\", function () {\n",
       "$.getScript(\"http://d3js.org/topojson.v1.min.js\", function () {\n",
       "$.getScript(\"http://datamaps.github.io/scripts/0.4.0/datamaps.all.js\", function () {\n",
       "\n",
       "$(element).append('<h1>Thylacinus</h1')\n",
       "$(element).append('<div id=\"container\" style=\"position: relative; width: 500px; height: 300px;\"></div>')\n",
       "\n",
       "var rawData = { 'CHN': {count: 2, fillKey: '#f8fdc1'},\n",
       "                'ISR': {count: 4, fillKey: '#e4f4ab'},\n",
       "                'ITA': {count: 13, fillKey: '#acdd8e'},\n",
       "                'BEL': {count: 21, fillKey: '#8ed082'},\n",
       "                'FIN': {count: 23, fillKey: '#89ce80'},\n",
       "                'ZAF': {count: 32, fillKey: '#74c477'},\n",
       "                'MWI': {count: 63, fillKey: '#49af61'},\n",
       "                'USA': {count: 80, fillKey: '#3da559'},\n",
       "                'AUS': {count: 125, fillKey: '#2d914b'},\n",
       "                'BRA': {count: 920, fillKey: '#004529'}};\n",
       "\n",
       "var map = $('container').datamaps({\n",
       "        // element: document.getElementById('container'),\n",
       "        fills: {\n",
       "            defaultFill: 'gray',\n",
       "            red: 'red',\n",
       "            '#f8fdc1': '#f8fdc1',\n",
       "            '#e4f4ab': '#e4f4ab',\n",
       "            '#acdd8e': '#acdd8e',\n",
       "            '#a4d98a': '#a4d98a',\n",
       "            '#8ed082': '#8ed082',\n",
       "            '#89ce80': '#89ce80',\n",
       "            '#74c477': '#74c477',\n",
       "            '#5db96b': '#5db96b',\n",
       "            '#49af61': '#49af61',\n",
       "            '#3da559': '#3da559',\n",
       "            '#2d914b': '#2d914b',\n",
       "            '#004529': '#004529',\n",
       "        },\n",
       "        geographyConfig: {\n",
       "            // highlightOnHover: false,\n",
       "            highlightBorderColor: '#bada55',\n",
       "            popupTemplate: function(geography, data) {\n",
       "                if (data !== null){\n",
       "                    return '<div class=\"hoverinfo\">There were '+ data.count + ' Thylacinus found here' + '</div>';\n",
       "                }\n",
       "            },\n",
       "            highlightBorderWidth: 1\n",
       "          },\n",
       "        data: rawData\n",
       "\n",
       "});\n",
       "\n",
       "});\n",
       "});\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "src = \"\"\"\n",
    "$(element).append('<h1>Thylacinus</h1')\n",
    "$(element).append('<div id=\"container\" style=\"position: relative; width: 500px; height: 300px;\"></div>')\n",
    "\n",
    "var rawData = { 'CHN': {count: 2, fillKey: '#f8fdc1'},\n",
    "                'ISR': {count: 4, fillKey: '#e4f4ab'},\n",
    "                'ITA': {count: 13, fillKey: '#acdd8e'},\n",
    "                'BEL': {count: 21, fillKey: '#8ed082'},\n",
    "                'FIN': {count: 23, fillKey: '#89ce80'},\n",
    "                'ZAF': {count: 32, fillKey: '#74c477'},\n",
    "                'MWI': {count: 63, fillKey: '#49af61'},\n",
    "                'USA': {count: 80, fillKey: '#3da559'},\n",
    "                'AUS': {count: 125, fillKey: '#2d914b'},\n",
    "                'BRA': {count: 920, fillKey: '#004529'}};\n",
    "\n",
    "var map = $('container').datamaps({\n",
    "        // element: document.getElementById('container'),\n",
    "        fills: {\n",
    "            defaultFill: 'gray',\n",
    "            red: 'red',\n",
    "            '#f8fdc1': '#f8fdc1',\n",
    "            '#e4f4ab': '#e4f4ab',\n",
    "            '#acdd8e': '#acdd8e',\n",
    "            '#a4d98a': '#a4d98a',\n",
    "            '#8ed082': '#8ed082',\n",
    "            '#89ce80': '#89ce80',\n",
    "            '#74c477': '#74c477',\n",
    "            '#5db96b': '#5db96b',\n",
    "            '#49af61': '#49af61',\n",
    "            '#3da559': '#3da559',\n",
    "            '#2d914b': '#2d914b',\n",
    "            '#004529': '#004529',\n",
    "        },\n",
    "        geographyConfig: {\n",
    "            // highlightOnHover: false,\n",
    "            highlightBorderColor: '#bada55',\n",
    "            popupTemplate: function(geography, data) {\n",
    "                if (data !== null){\n",
    "                    return '<div class=\"hoverinfo\">There were '+ data.count + ' Thylacinus found here' + '</div>';\n",
    "                }\n",
    "            },\n",
    "            highlightBorderWidth: 1\n",
    "          },\n",
    "        data: rawData\n",
    "\n",
    "});\n",
    "\n",
    "\"\"\"\n",
    "\n",
    "display(Javascript(src, lib=[\"http://d3js.org/d3.v3.min.js\",\n",
    "                             \"http://d3js.org/topojson.v1.min.js\",\n",
    "                             \"http://datamaps.github.io/scripts/0.4.0/datamaps.all.js\"]))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}