{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%autosave 10"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "IPython.notebook.set_autosave_interval(10000)"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "Autosaving every 10 seconds\n"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## Summary\n",
      "\n",
      "- Working in a web browser avoid dependencies, wider audience\n",
      "- Python and JavaScript complement each other.\n",
      "- Avoid JavaScript's dodgy parts.\n",
      "\n",
      "## Reality\n",
      "\n",
      "- You need to know JavaScript for the best web visualisations.\n",
      "- Trick is to use Python to clean and deliver data to JavaScript's tools (D3, Raphael, Leaflet, Crossfilter).\n",
      "\n",
      "## JavaScript is rough and terrible defaults\n",
      "\n",
      "- Default global variables.\n",
      "- No namespacing.\n",
      "- Religious wars surrounding imports, confused.\n",
      "- Crockford's \"JavaScript: The Good Parts\"\n",
      "- Use a linter, e.g. JSLint, or preferably JSHint.\n",
      "- JavaScript frameworks are unlike buses - there are always three frameworks coming at once.\n",
      "- People's default answer to \"how do I get this to work in X?\" is \"but Y is far better, use that\".\n",
      "\n",
      "## ..and the good\n",
      "\n",
      "- 100% installation base.\n",
      "- Orders of magnitude faster than Python, arms race to make it faster.\n",
      "- Visualization libraries written by real programmers.\n",
      "\n",
      "## d3\n",
      "\n",
      "- Learning curve is worth it\n",
      "\n",
      "## Crossfilter\n",
      "\n",
      "- Large multivariate datasets, pairs with d3 and visualises large complex data sets well\n",
      "\n",
      "## Server-side JavaScript\n",
      "\n",
      "- Compared to Python there is no compelling use-case.\n",
      "- Maybe Node.js for massively concurrently traffic.\n",
      "- But JavaScript has no standard imports, missing NumPy and SciPy.\n",
      "\n",
      "## Python server to JavaScript client\n",
      "\n",
      "- JSON, as:\n",
      "    1. static file, sure works but not dynamic.\n",
      "    2. API call, most common. RESTful recommended.\n",
      "    3. Web sockets, realtime but still esoteric.\n",
      "\n",
      "##\u00a0What Python server?\n",
      "\n",
      "- `SimpleHTTPServer` for static, starts off fine.\n",
      "- `Flask`, lightweight when something very simple is all you need.\n",
      "\n",
      "##\u00a0Websockets use-case\n",
      "\n",
      "- Move from Python -> QT, OpenGL GUI, to\n",
      "- Python -> Flask -> WebGL / Angular / Bootstrap\n",
      "- Wider audience, no dependencies\n",
      "\n",
      "##\u00a0Project to visualise Met Office weather data\n",
      "\n",
      "- Very, very dirty data. Arbitrarily change delimiters and null values over time.\n",
      "- Python makes short work of this.\n",
      "- Geo-JSON: `scipy`, `geojson`.\n",
      "- `scipy.interpolate.interp2d` to put coordinates onto 2D grid for front-end.\n",
      "- key thing about D3, as opposed to Bokeh or Vega, is to be able to interact with the visualisation."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}