block by zeffii 3b0cbcaba9d8a15d4335

sleep_tkd

Full Screen

glucose and food

http://blockbuilder.org/zeffii/fba34de448eb8df1d81d

Charting glucose readings in the same graph as food intake.

milestones

Built with blockbuilder.org

forked from zeffii‘s block: redux : Glucose + 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>

dillitant.js

var svg = d3.select("svg")
var format_day = d3.time.format("%d/%m/%Y");
  
d3.json("times.json", function(error, times) {
  if (error) throw error;
  times = json_preprocessor(times);
  draw_graph(times);
});


function times_preprocessor(t){
  var ts = t.split(',');
  var emb = [];
  for (var k of ts){
    var abl = k.split('->');
    emb.push(abl);
  }
  return emb;
}

function json_preprocessor(p){
  var new_object_array = [];
  for (var key in p) {
    if (p.hasOwnProperty(key)) {
      var day_datum = format_day.parse(key);
      var processed_times = times_preprocessor(p[key]);
      new_object_array.push({day: day_datum, times: processed_times});
    }
  }

  
  return new_object_array;
}

function draw_graph(times){
  
    console.log(times);
  
    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]);
    
    var y = d3.time.scale()
        .range([height, 0]);
 
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.linear)
        .tickSize(4)
        .tickFormat(d3.time.format("%H:%M"))
        .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(times[times.length - 1].day, -1);
    var last_day = adjust_date(times[0].day, 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 g3 = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    g3.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis);

    g3.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  
    var rect1 = g3.selectAll('rect').data(times);
    var rectEnter = rect1.enter().append('rect');
    rectEnter
       .attr("width", function(d){return "02:00"})
       .attr("height", 4)
       .style({fill: "#48f5f8"})
       //.attr("transform", function(d){ 
       //      var kn = y(d3_time.timeDay.round(d.unix));
       //      return "translate(0, " + kn + ")"
       // })

  
}

style.css

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

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

times.json

{
  "21/03/2016": "10:30->12:00,13:45->15:00,16:21->17:30,21:15->22:15,22:25->24:00",
  "22/03/2016": "00:00->01:00,01:05->02:00,02:05->03:53,04:05->05:30,09:45->12:00,14:20->16:45,19:45->22:00,22:40->24:00",
  "23/03/2016": "00:00->01:15,01:20->07:12,09:45->12:00"
}