Added Terrain view. Completed dot view.

src/app/app.js

@@ -95,6 +95,7 @@ var app = angular.module('baw',
                              'bawApp.d3.calendarView',
                              'bawApp.d3.timelineView',
                              'bawApp.d3.dotView',
+                             'bawApp.d3.terrainView',
 
                              'bawApp.accounts',
                              'bawApp.annotationViewer',

src/app/d3Bindings/calendarView/calendarView.js

@@ -32,7 +32,7 @@ angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
             for(var i = 0;i<json.length; i++){
                 var item = json[i];
                 var recordedDate = moment(item.recordedDate);
-                var key = recordedDate.year() + "-" + baw.stringPad(recordedDate.month(), 2, '0') + "-" + baw.stringPad(recordedDate.date(), 2, '0');
+                var key = recordedDate.format('YYYY-MM-DD');
 
                 var itemYear = parseInt(recordedDate.year());
                 if (firstYear == null || itemYear > firstYear) {

src/app/d3Bindings/d3TestPage.tpl.html

@@ -9,8 +9,12 @@ <h2>Timeline view</h2>
     <div>
         <baw-timeline-view data="filteredAudioRecordings"></baw-timeline-view>
     </div>
-    <h2>Dot view</h2>
+    <h2>Dot view <small>Shows audio recordings per hour in a day for each year</small></h2>
     <div>
         <baw-dot-view data="filteredAudioRecordings"></baw-dot-view>
     </div>
+    <h2>Terrain view <small>Zoomable with mouse wheel and pannable by dragging</small></h2>
+    <div>
+        <baw-terrain-view data="filteredAudioRecordings"></baw-terrain-view>
+    </div>
 </div>

src/app/d3Bindings/dotView/_dotView.scss

@@ -1,7 +1,7 @@
-body{font-family: Arial, sans-serif;font-size:10px;}
-.axis path,.axis line {fill: none;stroke:#b6b6b6;shape-rendering: crispEdges;}
+#audioRecordingDots{font-family: Arial, sans-serif;font-size:10px;}
+#audioRecordingDots .axis path,#audioRecordingDots .axis line {fill: none;stroke:#b6b6b6;shape-rendering: crispEdges;}
 /*.tick line{fill:none;stroke:none;}*/
-.tick text{fill:#999;}
-g.journal.active{cursor:pointer;}
-text.label{font-size:12px;font-weight:bold;cursor:pointer;}
-text.value{font-size:12px;font-weight:bold;}
+#audioRecordingDots .tick text{fill:#999;}
+#audioRecordingDots g.journal.active{cursor:pointer;}
+#audioRecordingDots text.label{font-size:12px;font-weight:bold;cursor:pointer;}
+#audioRecordingDots text.value{font-size:12px;font-weight:bold;}

src/app/d3Bindings/dotView/dotView.js

@@ -6,110 +6,177 @@
 angular.module("bawApp.d3.dotView", ["bawApp.d3"])
     .directive("bawDotView", ["d3", "moment", function (d3, moment) {
 
-        var dataStore = [];
-
-        // d3 functions
-        function truncate(str, maxLength, suffix) {
-            if(str.length > maxLength) {
-                str = str.substring(0, maxLength + 1);
-                str = str.substring(0, Math.min(str.length, str.lastIndexOf(" ")));
-                str = str + suffix;
-            }
-            return str;
-        }
-
-        var margin = {top: 20, right: 200, bottom: 0, left: 20},
-            width = 800,
-            height = 650;
-
-        var start_year = 1970,
-            end_year = 2013;
-
-        var c = d3.scale.category20c();
+        function DotViewDetails(elementId, jsonResponse) {
+            var that = this;
+            that.elementId = elementId;
+
+            that.items = [];
+
+            // build data structure
+            angular.forEach(jsonResponse.data, function (value, key) {
+                // {"hoursOfDay": [[0,3],[1, 2], [2,6], [5, 1], ... [23, 1]], "year": 2012}
+
+                // get start and end in +10 timezone
+                var start = moment(value.recordedDate).zone('+10:00');
+                var end = moment(value.recordedDate).add('seconds', value.durationSeconds).zone('+10:00');
+
+                var startYear = start.year();
+                var startHour = start.hour();
+                var endHour = end.hour();
+
+                var minHour = Math.min(startHour, endHour);
+                var maxHour = Math.max(startHour, endHour);
+                for (var i = minHour; i <= maxHour; i++) {
+                    var hour = i;
+                    var foundYear = false;
+                    angular.forEach(that.items, function (valueItem, keyItem) {
+                        if (valueItem.year === startYear) {
+                            foundYear = true;
+                            var foundHour = false;
+                            angular.forEach(valueItem.hoursOfDay, function (valueHours, keyHours) {
+                                var existingHour = valueHours[0];
+                                if (hour === existingHour) {
+                                    foundHour = true;
+                                    // increment audioRecordingCount
+                                    found = true;
+                                    valueHours[1] += 1;
+                                }
+                            });
+
+                            if (!foundHour) {
+                                // add hour and count if it does not exist
+                                valueItem.hoursOfDay.push([hour, 1])
+                            }
+                        }
+                    });
+
+                    if (!foundYear) {
+                        that.items.push({"year": startYear, "hoursOfDay": [
+                            [hour, 1]
+                        ]})
+                    }
+                }
+            });
+
+            that.truncate = function truncate(str, maxLength, suffix) {
+                if (str.length > maxLength) {
+                    str = str.substring(0, maxLength + 1);
+                    str = str.substring(0, Math.min(str.length, str.lastIndexOf(" ")));
+                    str = str + suffix;
+                }
+                return str;
+            };
+
+            that.mouseover = function mouseover(p) {
+                var g = d3.select(this).node().parentNode;
+                d3.select(g).selectAll("circle").style("display", "none");
+                d3.select(g).selectAll("text.value").style("display", "block");
+            };
 
-        var x = d3.scale.linear()
-            .range([0, width]);
+            that.mouseout = function mouseout(p) {
+                var g = d3.select(this).node().parentNode;
+                d3.select(g).selectAll("circle").style("display", "block");
+                d3.select(g).selectAll("text.value").style("display", "none");
+            };
 
-        var xAxis = d3.svg.axis()
-            .scale(x)
-            .orient("top");
+            var margin = {top: 20, right: 200, bottom: 0, left: 20},
+                width = 800,
+                height = 650;
 
-        var formatYears = d3.format("0000");
-        xAxis.tickFormat(formatYears);
+            var firstHour = 0,
+                lastHour = 23;
 
-        var create = function create(data) {
-            var svg = d3.select("#audioRecordingDots").append("svg")
-                .attr("width", width + margin.left + margin.right)
-                .attr("height", height + margin.top + margin.bottom)
-                .style("margin-left", margin.left + "px")
-                .append("g")
-                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+            var c = d3.scale.category20c();
 
-            x.domain([start_year, end_year]);
-            var xScale = d3.scale.linear()
-                .domain([start_year, end_year])
+            var x = d3.scale.linear()
                 .range([0, width]);
 
-            svg.append("g")
-                .attr("class", "x axis")
-                .attr("transform", "translate(0," + 0 + ")")
-                .call(xAxis);
-
-            for (var j = 0; j < data.length; j++) {
-                var g = svg.append("g").attr("class","journal");
-
-                var circles = g.selectAll("circle")
-                    .data(data[j]['articles'])
-                    .enter()
-                    .append("circle");
-
-                var text = g.selectAll("text")
-                    .data(data[j]['articles'])
-                    .enter()
-                    .append("text");
-
-                var rScale = d3.scale.linear()
-                    .domain([0, d3.max(data[j]['articles'], function(d) { return d[1]; })])
-                    .range([2, 9]);
-
-                circles
-                    .attr("cx", function(d, i) { return xScale(d[0]); })
-                    .attr("cy", j*20+20)
-                    .attr("r", function(d) { return rScale(d[1]); })
-                    .style("fill", function(d) { return c(j); });
-
-                text
-                    .attr("y", j*20+25)
-                    .attr("x",function(d, i) { return xScale(d[0])-5; })
-                    .attr("class","value")
-                    .text(function(d){ return d[1]; })
-                    .style("fill", function(d) { return c(j); })
-                    .style("display","none");
-
-                g.append("text")
-                    .attr("y", j*20+25)
-                    .attr("x",width+20)
-                    .attr("class","label")
-                    .text(truncate(data[j]['name'],30,"..."))
-                    .style("fill", function(d) { return c(j); })
-                    .on("mouseover", mouseover)
-                    .on("mouseout", mouseout);
-            }
-
-            function mouseover(p) {
-                var g = d3.select(this).node().parentNode;
-                d3.select(g).selectAll("circle").style("display","none");
-                d3.select(g).selectAll("text.value").style("display","block");
-            }
-
-            function mouseout(p) {
-                var g = d3.select(this).node().parentNode;
-                d3.select(g).selectAll("circle").style("display","block");
-                d3.select(g).selectAll("text.value").style("display","none");
-            }
-        };
-
-
+            var xAxis = d3.svg.axis()
+                .scale(x)
+                .orient("top");
+
+            var formatYears = d3.format("00");
+            xAxis.tickFormat(formatYears);
+
+            that.createView = function createView(data) {
+                var svg = d3.select("#audioRecordingDots").append("svg")
+                    .attr("width", width + margin.left + margin.right)
+                    .attr("height", height + margin.top + margin.bottom)
+                    .style("margin-left", margin.left + "px")
+                    .append("g")
+                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+                x.domain([firstHour, lastHour]);
+                var xScale = d3.scale.linear()
+                    .domain([firstHour, lastHour])
+                    .range([0, width]);
+
+                svg.append("g")
+                    .attr("class", "x axis")
+                    .attr("transform", "translate(0," + 0 + ")")
+                    .call(xAxis);
+
+                for (var j = 0; j < data.length; j++) {
+                    var dataIndex = j;
+                    var g = svg.append("g").attr("class", "journal");
+
+                    var circles = g.selectAll("circle")
+                        .data(data[j]['hoursOfDay'])
+                        .enter()
+                        .append("circle");
+
+                    var text = g.selectAll("text")
+                        .data(data[j]['hoursOfDay'])
+                        .enter()
+                        .append("text");
+
+                    var rScale = d3.scale.linear()
+                        .domain([0, d3.max(data[j]['hoursOfDay'], function (d) {
+                            return d[1];
+                        })])
+                        .range([2, 9]);
+
+                    circles
+                        .attr("cx", function (d, i) {
+                            return xScale(d[0]);
+                        })
+                        .attr("cy", j * 20 + 20)
+                        .attr("r", function (d) {
+                            return rScale(d[1]);
+                        })
+                        .style("fill", function (d) {
+                            return c(dataIndex);
+                        });
+
+                    text
+                        .attr("y", j * 20 + 25)
+                        .attr("x", function (d, i) {
+                            return xScale(d[0]) - 5;
+                        })
+                        .attr("class", "value")
+                        .text(function (d) {
+                            return d[1];
+                        })
+                        .style("fill", function (d) {
+                            return c(dataIndex);
+                        })
+                        .style("display", "none");
+
+                    g.append("text")
+                        .attr("y", j * 20 + 25)
+                        .attr("x", width + 20)
+                        .attr("class", "label")
+                        .text(that.truncate(data[j]['year'], 30, "..."))
+                        .style("fill", function (d) {
+                            return c(dataIndex);
+                        })
+                        .on("mouseover", that.mouseover)
+                        .on("mouseout", that.mouseout);
+                }
+            };
+
+            that.createView(that.items);
+        }
 
         return {
             restrict: "EA",
@@ -131,8 +198,7 @@ angular.module("bawApp.d3.dotView", ["bawApp.d3"])
                     return $scope.data;
                 }, function (newValue, oldValue) {
                     if (newValue) {
-                        //updateCatalogueData(newValue.data);
-                        create(dataStore);
+                        $scope.details = new DotViewDetails('audioRecordingDots', newValue);
                     }
                 });
 

src/app/d3Bindings/dotView/dotView.tpl.html

@@ -1 +1 @@
-<div id="audioRecordingDots" style="height:500px;width:500px;"></div>
+<div id="audioRecordingDots"></div>

src/app/d3Bindings/terrainView/_terrainView.scss

@@ -0,0 +1,37 @@
+#audioRecordingTerrain svg {
+  font-size: 10px;
+}
+
+#audioRecordingTerrain .axis {
+  shape-rendering: crispEdges;
+}
+
+#audioRecordingTerrain .axis path, #audioRecordingTerrain  .axis line {
+  fill: none;
+  stroke-width: .5px;
+}
+
+#audioRecordingTerrain .x.axis path {
+  stroke: #000;
+}
+
+#audioRecordingTerrain .x.axis line {
+  stroke: #fff;
+  stroke-opacity: .5;
+}
+
+#audioRecordingTerrain .y.axis line {
+  stroke: #ddd;
+}
+
+#audioRecordingTerrain path.line {
+  fill: none;
+  stroke: #000;
+  stroke-width: .5px;
+}
+
+#audioRecordingTerrain rect.pane {
+  cursor: move;
+  fill: none;
+  pointer-events: all;
+}