Skip to content

Instantly share code, notes, and snippets.

@abruzzi
Last active February 27, 2017 09:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abruzzi/d01a221df9cf79b918a00033695092c9 to your computer and use it in GitHub Desktop.
Save abruzzi/d01a221df9cf79b918a00033695092c9 to your computer and use it in GitHub Desktop.
Sleeping records visualisation of my daughter
license: mit
scrolling: yes

Idea

In this visualization I want to show the distributioin of the sleeping status of my daughter Xinxin. We relieased that she sleeping well during the night, and doesn't well in the daytime.

All the data is collected from a App named Baby Tracker, that's a awesome app that can record almost every activity of a baby:

  • diaper
  • sleeping
  • nursing

Implementation

Tools I've introduced:

  • crossfilter
  • lodash(a little bit)
  • d3.svg.arc
  • and a little math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Xinxin Sleeping Records</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js">
</script>
<script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
</head>
<body>
<div class="chart"></div>
<script src="sleep-arc.js"></script>
</body>
</html>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment