PChallenge/mainController.js at master · anoraxdev/PChallenge · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
          var myApp = angular.module("myApp", []);


            myApp.controller('mainController', ['$scope', 'mainService',
                  function mainController($scope, valueService) {
                      $scope.mainModel = {
                          url: ""
                      };
                      var vm = this;

                      vm.values = [];

                      //gets results from factory
                      vm.getvalues = function() {
                          valueService.getvalues($scope.mainModel.url)
                              .then(function(values) {
                              vm.values = values;
                              console.log('values returned to controller.');
                              populateChart(values)
                              },
                              function(data) {
                                  console.log('values retrieval failed.')
                              });
                      }

                       $scope.search = function(){
                            vm.getvalues();
                      }

                  function populateChart(jsonResponse){
                  d3.selectAll("svg > *").remove();
                  var data = jsonResponse.slice();
                  var margin = {top: 20, right: 40, bottom: 70, left: 40},
                      width = 1300 - margin.left - margin.right,
                      height = 500 - margin.top - margin.bottom,
                      brushYearStart = 1848,
                      brushYearEnd = 1905;

                  //spaces between each bar
                  var x = d3.scale.ordinal().rangeRoundBands([0, width], .07);

                  var y = d3.scale.linear().range([height, 0]);

                  //axis
                  var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");

                  var yAxis = d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(10);

                  //change to var svg = d3.select("svg") var svg = d3.select("body").append("svg")
                  var zoom = d3.behavior.zoom().on('zoom', zoomed);
                  var svg = d3.select("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                      .attr("class", "canvas")
                      .append("g")
                      .append("g")
                      .on('mousedown.zoom',null)
                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                      .call(zoom) //calling zoom function
                            .on("mousedown.zoom", null); //cancels zoom on mouse drag, conflicts with brush

                  x.domain(data.map(function(d) { return d.date; }));
                  y.domain([0, d3.max(data, function(d) { return d.value; })]);

                  //appends the x axis
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis)
                      .selectAll("text")
                      .style("text-anchor", "end")
                      .attr("dx", "-.8em")
                      .attr("dy", "-.55em")
                      .attr("transform", "rotate(-90)" );

                  //appends the y axis
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                      .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text("Value ($)");


                  //add a rectangle (value) for each date
                  svg.selectAll(".bar")
                      .data(data)
                      .enter().append("rect")
                      .attr("x", function(d) { return x(d.date); })
                      .attr("width", x.rangeBand())
                      .attr("y", function(d) { return y(d.value); })
                      .attr('class', 'bar')
                      .attr("height", function(d) { return height - y(d.value); });

                  // Draw the brush
                  var brush = d3.svg.brush()
                      .x(x)
                      .on("brush", brushmove)

                  //circle at the edge of brush, just a fancy tweak ;)
                  var arc = d3.svg.arc()
                      .outerRadius(height / 15)
                      .startAngle(0)
                      .endAngle(function(d, i) { return i ? -Math.PI : Math.PI; });

                  //appends circle to brush
                  var brushg = svg.append("g")
                      .attr("class", "brush")
                      .call(brush);

                  brushg.selectAll(".resize").append("path")
                      .attr("transform", "translate(0," +  height / 2 + ")")
                      .attr("d", arc);

                  brushg.selectAll("rect")
                      .attr("height", height);

                  //brush function
                  function brushmove() {
                       y.domain(x.range()).range(x.domain());
                  }

                  //zoom function
                  function zoomed () {
                      svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
                        }
                  }
                }
            ]);