- The main heatmaps are d3.js, what an incredibly powerful tool! We’re basically forming a bitmap image in your browser using DOM elements. I spent way too much time polishing the storytelling “guided tour” (days not hours).
- I used qtip2 to make some of the tooltips
- Highcharts.js for the line charts, it’s so easy to use and makes beautiful responsive graphs for simple line charts. But you do have to license it for I think $90 :/
- There’s a custom js function I wrote called darkTip that embeds the storytelling elements into the Highcharts.js svg object, available here: https://s3.amazonaws.com/blog-content-production/wp-content/uploads/darktip.js
- The data is aggregated in Amazon Redshift, their cloud data warehouse. It’s sort of like magic.
- If you’re using your phone, it shows an HTML5 video. I made that using Photoshop. I couldn’t believe the quality and size differences of an HTML5 video over gifs (MUCH smaller filesize, so much better video). But annoying that HTML5 videos are still harder to share than gifs :/
- I go over it in the technical notes at the bottom, but there was some not-so-secret-sauce in making the vis go fast and compressing the files.
- Hundreds of thousands of Jawbone UP wearers recording their sleep at night, thousands to tens of thousands per individual city
The data is incredible, it’s the largest, most comprehensive, and accurate sleep study conducted in history. I can’t believe some of the patterns that emerge in the data, like Ramadan. We were fortunate enough to get some coverage for this data from WSJ, Time, Huffington Post, and Fast Company