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.
%%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>