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')

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]:
cat ../_includes/bladh/wunderlist_infographic.html

#chart svg {
  height: 350px;


<div id="chart">
    <a style = "float:right; margin-top:-1.5em;padding-bottom:.5em; font-size:small" href =
  how to make this</a>

<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] })

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

      .axisLabel('# items')
      .tickFormat(d3.format(',.0f'));'#chart svg')


  return chart;