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
| 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 + ")" | |
| // }) | |
| } |
| <!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> |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| { | |
| "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" | |
| } |