Skip to content

Instantly share code, notes, and snippets.

@danharr danharr/index.html
Last active Apr 13, 2018

Embed
What would you like to do?
Withings data via IFTTT
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Show latest Withings data</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.limits {
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
stroke-dasharray: 4,9;
}
.start {
stroke: green;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<p>Tracking weight (kg) during half marathon training</p>
<script type="text/javascript">
var public_v = [];
//could, should make this read from data rather than hard code
var mindate = new Date(2014,2,1),
maxdate = new Date();
var dataset; //Declare global var
// Set the dimensions of the graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 470 - margin.top - margin.bottom;
// Set the ranges
var x = d3.time.scale().domain([mindate, maxdate]).range([0, width]);
var y = d3.scale.linear().domain([0,100]).range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var dan=[];
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right+50)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.nicedate); })
.y(function(d) { return y(d.kg); });
//this is our JSON data
d3.json("https://script.googleusercontent.com/macros/echo?user_content_key=usdMojNZPRcmiGMgx3TB4pT7Y_QSzqSXkqN5PzCvZlhqBVNVDl9jh6PD27tcbrKElyFYSGlDQRvJGLTNOaBxm9hyqBP0AxQ0OJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1GhPSVukpSQTydEwAEXFXgt_wltjJcH3XHUaaPC1fv5o9XyvOto09QuWI89K6KjOu0SP2F-BdwU_bHdEvMA1ZAseN0DDVILwljXtyAA-4uSbcTCwOx--LnHcH7xjEi2QVjlMJ3RLnnD5y7FLqOV0Tk27B8Rh4QJTQ&lib=MnrE7b2I2PjfH799VodkCPiQjIVyBAxva", function(error,data) {
//Hand CSV data off to global variable so it's accessible later if needed
dataset_raw = data.Sheet1;
var dataset = [];
for (var i = 0, len = dataset_raw.length; i<len; i++) {
if (dataset_raw[i].kg > 0 )
{dataset.push(dataset_raw[i]);};
};
console.log(dataset);
var parseDate = d3.time.format("%B %d, %Y").parse;
dataset.forEach(function(d) {
d.nicedate = parseDate(d.date.substring(0, d.date.indexOf(",")+6));
d.kg = +d.kg;
d.fat = +d.fatpercent;
});
dan=dataset;
console.log('this is the max');
console.log(d3.max(dataset, function(d) { return d.kg; }));
var max = d3.max(dataset, function(d) { return d.kg; });
var min = d3.min(dataset, function(d) { return d.kg; });
var d_length = dataset.length;
console.log('d_length');
console.log(d_length);
public_v = dataset;
var latest = dataset[d_length-1].kg;
console.log('latest');
console.log(latest);
var latest2 = dataset[d_length-1].date;
console.log('latest2');
console.log(latest2);
var latestz = dataset[d_length-8].kg;
console.log('latestz');
console.log(latestz);
var latestz2 = dataset[d_length-8].date;
console.log('latestz2');
console.log(latestz2);
var fat1 = dataset[d_length-1].fat;
var fat2 = dataset[d_length-8].fat;
d3.select("p").append("p").html('Latest: <b>' + latest + '</b> kg - Fat:<b> ' + fat1 + '% </b>(' + latest2 + ')');
d3.select("p").append("p").html('Previously: <b>' + latestz + '</b> kg - Fat:<b> ' + fat2 + '% </b>(' + latestz2 + ')');
d3.select("p").append("p").html("Change : <b>" + (latest-latestz).toFixed(2) + ' kg');
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(dataset));
//Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".limits").data([max,min]).enter().append("line").attr("x1",x(mindate)).attr("x2",x(maxdate)).attr("y1",function(d) {return y(d)}).attr("y2",function(d) {return y(d)}).attr("class","limits");
svg.selectAll(".labels").data([max,min]).enter().append("text").text(function(d) {return d+' kg'}).attr("x",x(maxdate)).attr("y",function(d) {return y(d)});
var start = new Date(2016, 01, 22);
var start2 = x(start);
console.log(start);
console.log(start2);
svg.selectAll(".start").data([1]).enter().append("line").attr("x1",start2).attr("x2",start2).attr("y1",y(0)).attr("y2",y(100)).attr("class","start");
svg.append("text").text("Training begins >>").attr("x",start2-110).attr("y",200).style("stroke","none").style("fill","green");
d3.select("body").append("p").html("Previously = about 7 'weigh-in's ago");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.