First, export your Wunderlist to JSON as shown here, and store it in a known location.

Then, process it to create a format that can be processed by NVD3



In [2]:

    
import json
import numpy as np

d = json.loads(open('/tmp/wunderlist-2014015-12-49-55.json').read())

# extract the id of the category "Future Blog Posts"
cat_id = [x['id'] for x in d['lists'] if x['title'].startswith('Future blog posts')][0]

# convert datetimes into epoc milliseconds
from datetime import datetime
to_epoc = lambda x: int(datetime.strptime(x['created_at'], '%Y-%m-%dT%H:%M:%SZ').strftime('%s'))*1000

# list of pairs (time, val) where val is 1 iff the task belongs to the category under analysis 
time_indicator = sorted([[to_epoc(x),  x['list_id'] == cat_id and 1 or 0] for x in d['tasks']])
times, indicator = zip(*time_indicator)

# prepare the JSON for nvd3
data = []
data.append({'key': 'All other lists', 'values' : zip(times, [int(x) for x in np.cumsum([1-x for x in indicator])])})
data.append({'key': 'Future posts', 'values' : zip(times, [int(x) for x in np.cumsum(indicator)])})
f = open('../data/wunderlist.json', 'w')
f.write(json.dumps(data))
f.close()

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:

{% include bladh/wunderlist_infographic.html %}

from any blog post. The HTML code to generate the graph is adapted from this example.



In [3]:

    
%%bash
cat ../_includes/bladh/wunderlist_infographic.html









    



<style>

#chart svg {
  height: 350px;
}

</style>


<div id="chart">
  <svg></svg>
    <a style = "float:right; margin-top:-1.5em;padding-bottom:.5em; font-size:small" href =
  'http://nbviewer.ipython.org/github/LucaFoschini/lucafoschini.github.io/blob/master/notebooks/process_wunderlist.ipynb'>See
  how to make this</a>
</div>

<script type="text/javascript">
 d3.json('/data/wunderlist.json', function(data) {

nv.addGraph(function() {
  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .tooltips(true)
                .showControls(false);

  chart.xAxis
      .showMaxMin(false)
      .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

  chart.yAxis
      .axisLabel('# items')
      .axisLabelDistance(40)
      .showMaxMin(false)
      .tickFormat(d3.format(',.0f'));

  d3.select('#chart svg')
    .datum(data)
      .transition().duration(500).call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

 })
</script>



In [ ]: