d3visualizations/childvis.js at master · jshaw22/d3visualizations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
console.log(window.cleanData)
// [ [year, age group, number], ...[] ... [] .....]

function filterByYear(year){
  year = year.toString();
  console.log(year + "I was called!");
  return _.filter(window.cleanData, function(data){
    return data[0] === year;

  });
}

function howManyYears(){
  var onlyYears =_.map(window.cleanData, function(data){
    return data[0];
  })
  return _.uniq(onlyYears)
}

function ageGroups(){
  var onlyAges = _.map(window.cleanData, function(data){
    return data[1];
  })
  return _.unique(onlyAges)
}

console.log(ageGroups())
var appendYears = d3.select('body .years').selectAll('button')
                                          .data(howManyYears())
                                          .enter().append('button')
                                          .text(function(d){
                                            return d;
                                          })
                                          .attr('onclick', function(d){

                                            return 'render('+d+')'
                                          })
                                          ;

var preInitialize = d3.select('body .visual').selectAll('div')
                                             .data(_.range(9))
                                             .enter().append('div');


var render = function(year){
  console.log(d3.select(this))
  d3.select('body .yearIndicator').selectAll('p').remove();
  var dataArray = filterByYear(year);
  var showYear = d3.select('body .yearIndicator').append('p').text('Year Selected: ' + year);
  // var buildCharts = d3.select('body .visual').selectAll('div')
  //                                            .data(dataArray)
  //                                            .attr('style', function(d){
  //                                             return 'width:' + d[2]/200 + 'px';
  //                                            })
  //                                            .text(function(d){
  //                                             return d[1]
  //                                            });

  preInitialize.data(dataArray).transition().duration(1000)
  .attr('style', function(d){
    return 'height:' + d[2]/400 + 'px; ' + "margin-top:" + (380-d[2]/400) + 'px';
   })
   .text(function(d){
    return "Age Group: " + d[1] + "\n#: " + d[2]
   })
   .attr('class','bar');

 }


   // var initialAgeGroup = d3.select('body .ageGroup').selectAll('div')
   //                                           .data(ageGroups())
   //                                           .enter().append('div')
   //                                           .attr('class', 'ageAxis')
   //                                           .text(function(d){
   //                                            return d;
   //                                           })


// var i = 1988;
// setInterval(function(){
//   render(i)
//   i++;
//   if(i===2014){
//     i=1988;
//   }
// },800)