{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "First, export your **Wunderlist** to JSON as shown [here](http://support.wunderlist.com/customer/portal/articles/1183757-how-do-i-backup-export-and-import-my-data-), and store it in a known location.\n",
      "\n",
      "Then, process it to create a format that can be processed by [NVD3](http://nvd3.org/)"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import json\n",
      "import numpy as np\n",
      "\n",
      "d = json.loads(open('/tmp/wunderlist-2014015-12-49-55.json').read())\n",
      "\n",
      "# extract the id of the category \"Future Blog Posts\"\n",
      "cat_id = [x['id'] for x in d['lists'] if x['title'].startswith('Future blog posts')][0]\n",
      "\n",
      "# convert datetimes into epoc milliseconds\n",
      "from datetime import datetime\n",
      "to_epoc = lambda x: int(datetime.strptime(x['created_at'], '%Y-%m-%dT%H:%M:%SZ').strftime('%s'))*1000\n",
      "\n",
      "# list of pairs (time, val) where val is 1 iff the task belongs to the category under analysis \n",
      "time_indicator = sorted([[to_epoc(x),  x['list_id'] == cat_id and 1 or 0] for x in d['tasks']])\n",
      "times, indicator = zip(*time_indicator)\n",
      "\n",
      "# prepare the JSON for nvd3\n",
      "data = []\n",
      "data.append({'key': 'All other lists', 'values' : zip(times, [int(x) for x in np.cumsum([1-x for x in indicator])])})\n",
      "data.append({'key': 'Future posts', 'values' : zip(times, [int(x) for x in np.cumsum(indicator)])})\n",
      "f = open('../data/wunderlist.json', 'w')\n",
      "f.write(json.dumps(data))\n",
      "f.close()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Finally, place your HTML/JS code to display the data. In this case the code is placed in the `_includes` directory so it can be loaded with the **Jekyll** directive:\n",
      "\n",
      "`{% include bladh/wunderlist_infographic.html %}` \n",
      "\n",
      "from any blog post. The HTML code to generate the graph is adapted from [this](http://nvd3.org/ghpages/cumulativeLine.html) example."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%bash\n",
      "cat ../_includes/bladh/wunderlist_infographic.html"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "<style>\n",
        "\n",
        "#chart svg {\n",
        "  height: 350px;\n",
        "}\n",
        "\n",
        "</style>\n",
        "\n",
        "\n",
        "<div id=\"chart\">\n",
        "  <svg></svg>\n",
        "    <a style = \"float:right; margin-top:-1.5em;padding-bottom:.5em; font-size:small\" href =\n",
        "  'http://nbviewer.ipython.org/github/LucaFoschini/lucafoschini.github.io/blob/master/notebooks/process_wunderlist.ipynb'>See\n",
        "  how to make this</a>\n",
        "</div>\n",
        "\n",
        "<script type=\"text/javascript\">\n",
        " d3.json('/data/wunderlist.json', function(data) {\n",
        "\n",
        "nv.addGraph(function() {\n",
        "  var chart = nv.models.stackedAreaChart()\n",
        "                .x(function(d) { return d[0] })\n",
        "                .y(function(d) { return d[1] })\n",
        "                .tooltips(true)\n",
        "                .showControls(false);\n",
        "\n",
        "  chart.xAxis\n",
        "      .showMaxMin(false)\n",
        "      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });\n",
        "\n",
        "  chart.yAxis\n",
        "      .axisLabel('# items')\n",
        "      .axisLabelDistance(40)\n",
        "      .showMaxMin(false)\n",
        "      .tickFormat(d3.format(',.0f'));\n",
        "\n",
        "  d3.select('#chart svg')\n",
        "    .datum(data)\n",
        "      .transition().duration(500).call(chart);\n",
        "\n",
        "  nv.utils.windowResize(chart.update);\n",
        "\n",
        "  return chart;\n",
        "});\n",
        "\n",
        " })\n",
        "</script>\n"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}