quantifiedSelfViz.js

/* Copyright (c) 2013-present The TagSpaces Authors.
 * Use of this source code is governed by the MIT license which can be found in the LICENSE.txt file. */

define(function(require, exports, module) {
"use strict";
	console.log("Loading Quantified Self");

	var TSCORE = require("tscore");
    
    require("d3");
        
    var margin = {top: 20, right: 40, bottom: 30, left: 20},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        barWidth = Math.floor(width / 19) - 1;
    
    var x = d3.scale.linear()
        .range([barWidth / 2, width - barWidth / 2]);
    
    var y = d3.scale.linear()
        .range([height, 0]);
    
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("right")
        .tickSize(-width)
        .tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });
    

    function draw(svg) {
        console.log("Drawing Quantified Self");
/*
          var data = d3.csv.parse(TSCORE.PerspectiveManager.csvExport());
        
          // Convert strings to numbers.
          data.forEach(function(d) {
            d.people = +d.tag3;
            d.year = +d.tag0;
            d.age = +d.tag1;
          });
        
          // Compute the extent of the data set in age and years.
          var age1 = d3.max(data, function(d) { return d.age; }),
              year0 = d3.min(data, function(d) { return d.year; }),
              year1 = d3.max(data, function(d) { return d.year; }),
              year = year1;
        
          // Update the scale domains.
          x.domain([year1 - age1, year1]);
          y.domain([0, d3.max(data, function(d) { return d.people; })]);
        
          // Produce a map from year and birthyear to [male, female].
          data = d3.nest()
              .key(function(d) { return d.year; })
              .key(function(d) { return d.year - d.age; })
              .rollup(function(v) { return v.map(function(d) { return d.people; }); })
              .map(data);
        
          // Add an axis to show the population values.
          svg.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + width + ",0)")
              .call(yAxis)
            .selectAll("g")
            .filter(function(value) { return !value; })
              .classed("zero", true);
        
        // A sliding container to hold the bars by birthyear.
        var birthyears = svg.append("g")
            .attr("class", "birthyears");
        
        // A label for the current year.
        var title = svg.append("text")
            .attr("class", "title")
            .attr("dy", ".71em")
            .text(2000);
    
          function update() {
            if (!(year in data)) return;
            title.text(year);
        
            birthyears.transition()
                .duration(750)
                .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)");
        
            birthyear.selectAll("rect")
                .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
              .transition()
                .duration(750)
                .attr("y", y)
                .attr("height", function(value) { return height - y(value); });
          }
        
          // Add labeled rects for each birthyear (so that no enter or exit is required).
          var birthyear = birthyears.selectAll(".birthyear")
              .data(d3.range(year0 - age1, year1 + 1, 5))
              .enter().append("g")
              .attr("class", "birthyear")
              .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)"; });
        
          birthyear.selectAll("rect")
              .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
            .enter().append("rect")
              .attr("x", -barWidth / 2)
              .attr("width", barWidth)
              .attr("y", y)
              .attr("height", function(value) { return height - y(value); });
        
          // Add labels to show birthyear.
          birthyear.append("text")
              .attr("y", height - 4)
              .text(function(birthyear) { return birthyear; });
        
          // Add labels to show age (separate; not animated).
          svg.selectAll(".age")
              .data(d3.range(0, age1 + 1, 5))
            .enter().append("text")
              .attr("class", "age")
              .attr("x", function(age) { return x(year - age); })
              .attr("y", height + 4)
              .attr("dy", ".71em")
              .text(function(age) { return age; });
        
          // Allow the arrow keys to change the displayed year.
          window.focus();
          d3.select(window).on("keydown", function() {
            switch (d3.event.keyCode) {
              case 37: year = Math.max(year0, year - 10); break;
              case 39: year = Math.min(year1, year + 10); break;
            }
            update();
          });      */

    }
		
	// Methods
	exports.draw					= draw;
	
});