Skip to content

Instantly share code, notes, and snippets.

@chiaochi

chiaochi/SleepLog.csv

Created May 7, 2015 05:13
Show Gist options
  • Save chiaochi/a641c29a98fb7ec5dcb4 to your computer and use it in GitHub Desktop.
Save chiaochi/a641c29a98fb7ec5dcb4 to your computer and use it in GitHub Desktop.
Download ZIP
Sleepless in San Francisco
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>George Lee's Sleep Log</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin:0;
}
p {
font-size: : 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
g.highlight path {
stroke: red;
stroke-width: 2;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>George's Sleep Log</h1>
<p> I really need to sleep more ...</p>
<script type="text/javascript">
//Size and Padding
var w = 1000;
var h = 600;
var padding = [50, 50, 50, 50];
//Set up date formatting
var dateFormat = d3.time.format("%Y-%m-%d");
//Set up scales
var xScale = d3.time.scale()
.range([padding[3],w-padding[1]-padding[3] ]);
var yScale = d3.scale.linear()
.range([padding[0],h-padding[2] ]);
//Set up axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function(d){
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Set up line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.day));
})
.y(function(d) {
return yScale(+d.minutes);
});
//Set up SVG
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
//load data & transform
d3.csv("SleepLog.csv", function(data) {
//To test if the data loaded
//console.log(data);
//console.log(data.length);
//Those are the two lines we want to show. Making them an array
var columns = ["Asleep", "Awake"];
//Create an empty array for the newly formatted variable
var dataset = [];
//Inside the array, we'll load object. Each object is a column
for (var i = 0; i < columns.length; i++) {
dataset[i] = {
measures:columns[i],
xy: []
};
for (var j = 0; j < data.length ; j++){
//console.log(data[j].Date);
//console.log(data[j].Awake);
if (i == 0) {
dataset[i].xy.push({
day: data[j].Date,
minutes: data[j].Asleep
});
} else {
dataset[i].xy.push({
day: data[j].Date,
minutes: data[j].Awake
});
}
}
}
//Test if the data is reformatted correctly
console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(dataset, function(d) {
return d3.min(d.xy, function(d) {
return dateFormat.parse(d.day);
});
}),
d3.max(dataset, function(d) {
return d3.max(d.xy, function(d) {
return dateFormat.parse(d.day);
});
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.xy, function(d) {
return +d.minutes;
});
}),
0
]);
//Make a group for each line
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.measures == "Awake") {
return true;
} else {
return false;
}
});
//Append a title for tooltip
groups.append("title")
.text(function(d) {
return "On this day" + d.Date + d.measures;
});
//Within each group, create a new line/path,
groups.selectAll("path")
.data(function(d) {
return [ d.xy ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
SleepLog.csv
Date Asleep Awake
2014-05-31 333 4
2014-06-01 441 4
2014-06-02 417 13
2014-06-03 439 12
2014-06-04 381 22
2014-06-05 540 14
2014-06-06 320 12
2014-06-07 475 16
2014-06-08 365 15
2014-06-09 365 7
2014-06-10 365 7
2014-06-11 327 14
2014-06-12 371 13
2014-06-13 251 13
2014-06-14 395 21
2014-06-15 329 29
2014-06-16 361 10
2014-06-17 361 10
2014-06-18 447 29
2014-06-19 345 7
2014-06-20 378 22
2014-06-21 333 9
2014-06-22 463 11
2014-06-23 314 30
2014-06-24 345 18
2014-06-25 379 18
2014-06-26 389 32
2014-06-27 392 14
2014-06-28 441 21
2014-06-29 409 15
2014-06-30 396 40
2014-07-01 459 49
2014-07-02 459 49
2014-07-03 413 13
2014-07-04 413 13
2014-07-05 304 27
2014-07-06 509 40
2014-07-07 400 24
2014-07-08 400 24
2014-07-09 415 26
2014-07-10 386 30
2014-07-11 338 8
2014-07-12 440 45
2014-07-13 429 22
2014-07-14 380 24
2014-07-15 378 37
2014-07-16 340 48
2014-07-17 273 29
2014-07-18 452 24
2014-07-19 414 40
2014-07-20 414 40
2014-07-21 389 36
2014-07-22 450 18
2014-07-23 390 17
2014-07-24 456 8
2014-07-25 399 18
2014-07-26 361 18
2014-07-27 406 24
2014-07-28 447 37
2014-07-29 452 19
2014-07-30 450 36
2014-07-31 450 36
2014-08-01 390 4
2014-08-02 390 4
2014-08-03 469 38
2014-08-04 415 33
2014-08-05 405 17
2014-08-06 414 18
2014-08-07 387 25
2014-08-08 285 4
2014-08-09 459 12
2014-08-10 414 49
2014-08-11 410 30
2014-08-12 417 35
2014-08-13 411 23
2014-08-14 411 23
2014-08-15 440 26
2014-08-16 265 16
2014-08-17 429 22
2014-08-18 405 20
2014-08-19 190 6
2014-08-20 388 79
2014-08-21 331 28
2014-08-22 331 28
2014-08-23 411 29
2014-08-24 421 49
2014-08-25 410 10
2014-08-26 390 8
2014-08-27 409 10
2014-08-28 337 26
2014-08-29 448 11
2014-08-30 324 54
2014-08-31 362 41
2014-09-01 480 15
2014-09-02 419 27
2014-09-03 398 16
2014-09-04 488 5
2014-09-05 488 5
2014-09-06 413 5
2014-09-07 426 5
2014-09-08 426 5
2014-09-09 355 5
2014-09-10 388 16
2014-09-11 370 23
2014-09-12 360 42
2014-09-13 320 25
2014-09-14 433 29
2014-09-15 414 30
2014-09-16 477 26
2014-09-17 407 21
2014-09-18 407 21
2014-09-19 407 21
2014-09-20 407 21
2014-09-21 360 32
2014-09-22 360 32
2014-09-23 340 28
2014-09-24 340 28
2014-09-25 340 28
2014-09-26 594 75
2014-09-27 437 16
2014-09-28 497 63
2014-09-29 404 26
2014-09-30 408 27
2014-10-01 390 58
2014-10-02 395 6
2014-10-03 395 6
2014-10-04 413 20
2014-10-05 338 4
2014-10-06 391 20
2014-10-07 436 40
2014-10-08 393 20
2014-10-09 644 76
2014-10-10 447 24
2014-10-11 447 24
2014-10-12 447 24
2014-10-13 447 24
2014-10-14 310 22
2014-10-15 186 8
2014-10-16 397 7
2014-10-17 397 7
2014-10-18 397 7
2014-10-19 405 18
2014-10-20 434 43
2014-10-21 295 27
2014-10-22 426 34
2014-10-23 321 24
2014-10-24 375 16
2014-10-25 403 10
2014-10-26 536 70
2014-10-27 414 19
2014-10-28 424 18
2014-10-29 287 34
2014-10-30 458 13
2014-10-31 499 39
2014-11-01 333 26
2014-11-02 548 51
2014-11-03 548 51
2014-11-04 566 137
2014-11-05 208 18
2014-11-06 404 10
2014-11-07 363 45
2014-11-08 455 48
2014-11-09 455 48
2014-11-10 455 48
2014-11-11 455 48
2014-11-12 455 48
2014-11-13 457 41
2014-11-14 293 28
2014-11-15 293 28
2014-11-16 293 28
2014-11-17 293 28
2014-11-18 293 28
2014-11-19 293 28
2014-11-20 293 28
2014-11-21 293 28
2014-11-22 293 28
2014-11-23 293 28
2014-11-24 293 28
2014-11-25 293 28
2014-11-26 273 6
2014-11-27 312 12
2014-11-28 461 22
2014-11-29 311 17
2014-11-30 311 1
2014-12-01 350 24
2014-12-02 347 25
2014-12-03 438 14
2014-12-04 439 12
2014-12-05 429 18
2014-12-06 306 22
2014-12-07 557 42
2014-12-08 339 20
2014-12-09 339 20
2014-12-10 347 16
2014-12-11 337 19
2014-12-12 364 30
2014-12-13 217 12
2014-12-14 364 12
2014-12-15 279 23
2014-12-16 423 17
2014-12-17 437 23
2014-12-18 342 13
2014-12-19 278 16
2014-12-20 331 22
2014-12-21 331 22
2014-12-22 440 46
2014-12-23 323 30
2014-12-24 367 17
2014-12-25 326 24
2014-12-26 287 4
2014-12-27 417 35
2014-12-28 274 12
2014-12-29 493 33
2014-12-30 493 33
2014-12-31 293 20
2015-01-01 468 46
2015-01-02 397 11
2015-01-03 408 20
2015-01-04 435 21
2015-01-05 372 15
2015-01-06 385 26
2015-01-07 503 18
2015-01-08 341 27
2015-01-09 425 13
2015-01-10 331 22
2015-01-11 387 25
2015-01-12 355 31
2015-01-13 428 26
2015-01-14 428 26
2015-01-15 420 23
2015-01-16 333 14
2015-01-17 328 10
2015-01-18 389 34
2015-01-19 389 34
2015-01-20 397 17
2015-01-21 348 16
2015-01-22 348 21
2015-01-23 348 21
2015-01-24 349 34
2015-01-25 351 19
2015-01-26 403 37
2015-01-27 362 26
2015-01-28 388 35
2015-01-29 419 46
2015-01-30 391 31
2015-01-31 391 31
2015-02-01 359 22
2015-02-02 381 18
2015-02-03 381 31
2015-02-04 341 37
2015-02-05 404 17
2015-02-06 383 10
2015-02-07 285 8
2015-02-08 324 12
2015-02-09 313 28
2015-02-10 408 56
2015-02-11 383 16
2015-02-12 314 20
2015-02-13 386 4
2015-02-14 288 18
2015-02-15 288 18
2015-02-16 288 18
2015-02-17 288 18
2015-02-18 288 18
2015-02-19 288 18
2015-02-20 288 18
2015-02-21 288 18
2015-02-22 288 18
2015-02-23 288 18
2015-02-24 406 22
2015-02-25 372 10
2015-02-26 247 14
2015-02-27 379 15
2015-02-28 379 3
2015-03-01 434 30
2015-03-02 399 20
2015-03-03 404 19
2015-03-04 348 23
2015-03-05 428 30
2015-03-06 369 17
2015-03-07 340 18
2015-03-08 407 33
2015-03-09 286 13
2015-03-10 486 16
2015-03-11 419 8
2015-03-12 382 28
2015-03-13 325 33
2015-03-14 224 27
2015-03-15 419 27
2015-03-16 337 37
2015-03-17 355 37
2015-03-18 286 19
2015-03-19 367 29
2015-03-20 325 25
2015-03-21 244 14
2015-03-22 339 20
2015-03-23 413 32
2015-03-24 359 37
2015-03-25 349 20
2015-03-26 410 48
2015-03-27 355 28
2015-03-28 296 27
2015-03-29 375 50
2015-03-30 231 2
2015-03-31 367 18
2015-04-01 401 14
2015-04-02 427 29
2015-04-03 380 28
2015-04-04 365 16
2015-04-05 380 17
2015-04-06 377 26
2015-04-07 323 22
2015-04-08 323 22
2015-04-09 323 14
2015-04-10 488 27
2015-04-11 361 11
2015-04-12 362 28
2015-04-13 364 22
2015-04-14 430 19
2015-04-15 418 20
2015-04-16 392 9
2015-04-17 297 16
2015-04-18 326 21
2015-04-19 389 17
2015-04-20 418 16
2015-04-21 354 20
2015-04-22 415 22
2015-04-23 423 19
2015-04-24 380 10
2015-04-25 326 17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment