redux : Glucose + food

README.md

glucose and food

http://blockbuilder.org/zeffii/fba34de448eb8df1d81d

Charting glucose readings in the same graph as food intake.

• vertical axis day
• horizontal time of day

milestones

• each day gets unique track
• food comments are per time and clickable to show blurb
• glucose measurements are per time and show vale mmol/l
  • (red if > 10, green 5<>10, yellow < 5

Built with blockbuilder.org

compiled.json

{
    "01/27/2016/18:00:00": " - ( red lentels / mixed veg / pumpkin ) blended soup. - sweet potatoe wedgies half fried, half grilled. (sauce ketchup, yogonaise) - small yoghurt + milk + raak sirup (sugar free)",
    "01/28/2016/19:00:00": " - last night's soup 1 bowl.   - carrot/sweetpotatoe/pumpkin/brocolli/spinnage / cheese / pastry pie. (small servings)",
    "01/28/2016/21:30:00": " - two craqotte  with apricot jam (thinly spread)",
    "01/29/2016/16:00:00": " - dinner leftover pie, small servings.   ",
    "01/29/2016/22:00:00": " - two craqotte  with peanutbutter (thinly spread)  ",
    "01/30/2016/13:00:00": " - mandarin / bowl half porridge + half bran flakes.  ",
    "01/30/2016/19:00:00": " - sperziebonen / carrots / peas / rode kool - thin piece of lean meat (fried, crispy)  ",
    "01/30/2016/22:00:00": " - mandrin / beschuit + ham.  ",
    "01/31/2016/18:00:00": " - big salad (lettuce, yellow pepper, cucumber, salad dressing) - boiled+fried rice / soyasauce / lean minced meat / fried egg  ",
    "01/31/2016/22:00:00": " - mandarin / volk.knackerbrot + cheese / tea  ",
    "02/01/2016/17:00:00": " - broodje humus in the pit AMC , mint tea, yoghurt  ",
    "02/01/2016/22:00:00": " - volk.beshuit met ham + kaas  ",
    "02/02/2016/18:00:00": " - big salad (almost no dressing) yellow pepper / lettuce / cheese",
    "02/03/2016/18:00:00": " - brown rice / chicken / lentil+veg soup (broccoli+carrot)",
    "02/04/2016/18:00:00": " - small lightly fried (brown rice / chicken / egg) - big salad (lettuce, yellow pepper, pine nuts, tomatoe, cheese, small amount of salad dressing)",
    "02/05/2016/18:00:00": " - lightly fried chicken pieces with curry, carrot+french bean+broccoli, pinenuts, apple",
    "02/06/2016/18:20:00": " - Salad cucumber, dressing, yellow paprika, thinly sliced smoked ham (1x) - dinner sweet potatoe, french beans, broccoli - banana",
    "02/07/2016/18:00:00": " - muskaatpompoen + lentil soep + pease + rice - vla + yoghurt - manderin + appel",
    "02/07/2016/22:00:00": " - matze crackers + sliced banana",
    "02/08/2016/18:00:00": " - lean burgers (2x) + ketchup + brocolli + sweetpotatoe (small servings) - vla + yoghurt (small)",
    "02/08/2016/22:00:00": " - matze crackers + cheese",
    "02/09/2016/12:00:00": " - fried sweet potatoe wedgies + ketchup",
    "02/09/2016/18:00:00": " - big salad (yellow peppers, lettuce, cucumber, pine nuts) - 4 mini pancakes (/w lemon, /w small qauntity poeder suiker) "
}

dillitant.js

var svg = d3.select("svg")

/*
 sample row (u(integer) stands for unused field)
 num,date,time,bsl,id,u1,u2,u3,u4,....,u12
 "165", "02/02/2016", "08:26:20", "15.76"
 
 onetouch .csv writer generates a verbose format.
  
*/

// "02/02/2016/08:26:20"
var format = d3.time.format("%m/%d/%Y/%H:%M:%S");

d3.csv("sugars.csv", function(error, data) {
  if (error) throw error;
  data = csv_preprocessor(data);
  
  d3.json("compiled.json", function(error, food) {
    if (error) throw error;
    food = json_preprocessor(food);
    
    // both data and food are processed, ready to rock.
    draw_graph(data, food);
  });
  
});

function csv_preprocessor(data){
  
  // reduce down to : UNIXTIME / BSL
  data.forEach(function(d) {
    var unix_str = d.date + "/" + d.time;
    var date_stamp = format.parse(unix_str);
    d.unix = d3.time.hour.offset(date_stamp, 1);  // gmt to dutch
    d.bsl = +d.bsl;
  });
  
  return data;
}

function json_preprocessor(p){
  var new_object_array = [];
  for (var key in p) {
    if (p.hasOwnProperty(key)) {
      var gmt = format.parse(key);
      var unix = d3.time.hour.offset(gmt, 0);
      new_object_array.push({time: unix, statement: p[key]});
    }
  }
  return new_object_array;

}

function draw_graph(data, food){
  
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  
    // time during day
    var x = d3.time.scale()
        .range([0, width]);
    
    // day given range of days. (each y notch shall repr a day)
    var y = d3.time.scale()
        .range([height, 0]);
 
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.linear)
        //.ticks(d3.time.hours, )
        //.tickFormat(d3.time.format('%H:%M'))
        .tickSize(0)
        .tickPadding(8)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .ticks(d3.time.days)
        .orient("left");
  
    function adjust_date(date, add){
        return d3.time.day.offset(date, add)
    }
    var first_day = adjust_date(data[data.length - 1].unix, -1);
    var last_day = adjust_date(data[0].unix, 1);
  
    x.domain([0, 24]);
    y.domain([first_day, last_day]);

  
    svg
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
  
    var g1 = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var g2 = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    var g3 = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    g1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis);

    g1.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  
    var circle = g1.selectAll('circle').data(data);
    var circleEnter = circle.enter().append('circle');
    circleEnter 
        .attr("cx", function(d, i){return x(d.unix.getHours());})
        .attr("cy", function(d, i){return y(d.unix);})
        .attr("r", function(d, i) {return 3})
        .style({fill: "#fe42ec"})
    
    var circle2 = g2.selectAll('circle').data(food);
    var circle2Enter = circle2.enter().append('circle');
    circle2Enter
        .attr("cx", function(d, i){return x(d.time.getHours());})
        .attr("cy", function(d, i){return y(d.time)})
        .attr("r", 4)
        .style({fill: "#56feb3"})

    var rect1 = g3.selectAll('rect').data(data);
    var rectEnter = rect1.enter().append('rect');
    rectEnter
        .attr("width", width)
        .attr("height", 1)
        .style({fill: "#48f5f8"})
        .attr("transform", function(d){ 
             var kn = y(d3_time.timeDay.round(d.unix));
             return "translate(0, " + kn + ")"
        })
    
  // console.log(data, food)
  
}

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://d3js.org/d3-time.v0.2.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <svg></svg>
  <script src="dillitant.js"></script>
</body>

style.css

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

sugars.csv