Skip to content

Commit d35f043

Browse files
matthiasnmatthiasn
committed
simplifying barchart; bug fix
1 parent 38e558c commit d35f043

File tree

3 files changed

+27
-73
lines changed

3 files changed

+27
-73
lines changed

‎app/assets/javascripts/barchart.js

Lines changed: 15 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
/** utils service */
44
angular.module('charts.barchart', []).service('barchart', function () {
55

6-
var BarChart = function (addSearch, maxBarWidth, element) {
6+
var BarChart = function (callback, maxBarWidth, element, noItems) {
77
var me = {};
88

99
me.maxBarWidth = maxBarWidth;
10-
var sortedData, xScale, yScale,chart, rect, gridContainer, labelContainer, barsContainer;
10+
var sortedData, xScale, yScale, chart, rect, labelContainer, barsContainer;
1111

1212
var valueLabelWidth = 40; // space reserved for value labels (right)
1313
var barHeight = 15; // height of one bar
14-
var barLabelWidth = 130; // space reserved for bar labels
14+
var barLabelWidth = 120; // space reserved for bar labels
1515
var barLabelPadding = 5; // padding between bar and bar labels (left)
1616
var gridLabelHeight = 18; // space reserved for grid line labels
17-
var gridChartOffset = 5; // space between start of grid and first bar
1817

1918
// accessor functions
2019
var barLabel = function (d) { return d.key; };
@@ -27,26 +26,11 @@ angular.module('charts.barchart', []).service('barchart', function () {
2726
// svg container element
2827
chart = d3.select("#" + element.context.id).append("svg")
2928
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
30-
.attr('height', gridLabelHeight + gridChartOffset + sortedData.length * barHeight);
29+
.attr('height', gridLabelHeight + noItems * barHeight);
3130

32-
// grid line labels
33-
gridContainer = chart.append('g')
34-
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
35-
gridContainer.selectAll("text").data(xScale.ticks(10)).enter().append("text")
36-
.attr("x", xScale)
37-
.attr("dy", -3)
38-
.attr("text-anchor", "middle")
39-
.text(String);
40-
// vertical grid lines
41-
gridContainer.selectAll("line").data(xScale.ticks(10)).enter().append("line")
42-
.attr("x1", xScale)
43-
.attr("x2", xScale)
44-
.attr("y1", 0)
45-
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
46-
.style("stroke", "#ccc");
4731
// bar labels
4832
labelContainer = chart.append('g')
49-
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
33+
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight) + ')');
5034
labelContainer.selectAll('text').data(sortedData).enter().append('text')
5135
.attr('y', yText)
5236
.attr('stroke', 'none')
@@ -56,7 +40,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
5640
.text(barLabel);
5741
// bars
5842
barsContainer = chart.append('g')
59-
.attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
43+
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
6044
barsContainer.selectAll("rect").data(sortedData).enter().append("rect")
6145
.attr('y', y)
6246
.attr('height', yScale.rangeBand())
@@ -65,7 +49,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
6549
.attr('fill', '#428bca')
6650
.on("click", function(d) {
6751
var tag = barLabel(d).replace('#','');
68-
addSearch(tag);
52+
callback(tag);
6953
});
7054

7155
// bar value labels
@@ -80,8 +64,8 @@ angular.module('charts.barchart', []).service('barchart', function () {
8064
.text(function (d) { return d3.round(barValue(d), 2); });
8165
// start line
8266
barsContainer.append("line")
83-
.attr("y1", -gridChartOffset)
84-
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
67+
.attr("y1", 0)
68+
.attr("y2", yScale.rangeExtent()[1])
8569
.style("stroke", "#000");
8670
}
8771

@@ -105,7 +89,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
10589

10690
me.redraw = function(dataSource) {
10791
me.update(dataSource);
108-
92+
10993
barsContainer.selectAll("rect").data(sortedData).enter().append("rect")
11094
.attr('y', y)
11195
.attr('height', yScale.rangeBand())
@@ -114,7 +98,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
11498
.attr('fill', 'steelblue')
11599
.on("click", function(d) {
116100
var tag = barLabel(d).replace('#','');
117-
addSearch(tag);
101+
callback(tag);
118102
});
119103

120104
barsContainer.selectAll("rect")
@@ -123,7 +107,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
123107
.attr('y', y)
124108
.attr('height', yScale.rangeBand())
125109
.attr('width', function (d) { return xScale(barValue(d)); });
126-
110+
127111
barsContainer.selectAll("rect")
128112
.data(sortedData)
129113
.exit()
@@ -137,7 +121,7 @@ angular.module('charts.barchart', []).service('barchart', function () {
137121
.attr("dy", ".35em") // vertical-align: middle
138122
.attr("text-anchor", "start") // text-align: right
139123
.attr("fill", "black")
140-
.attr("stroke", "none")
124+
.attr("stroke", "black")
141125
.text(function (d) { return d3.round(barValue(d), 2); });
142126

143127
barsContainer.selectAll("text").data(sortedData)
@@ -157,11 +141,6 @@ angular.module('charts.barchart', []).service('barchart', function () {
157141
.transition()
158142
.remove();
159143

160-
barsContainer.selectAll("line")
161-
.attr("y1", -gridChartOffset)
162-
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
163-
.style("stroke", "#000");
164-
165144
labelContainer.selectAll("text").data(sortedData).enter().append("text")
166145
.attr('y', yText)
167146
.attr('stroke', 'none')
@@ -185,34 +164,9 @@ angular.module('charts.barchart', []).service('barchart', function () {
185164
.transition()
186165
.remove();
187166

188-
/** insert, update and change grid text */
189-
var gridText = gridContainer.selectAll("text").data(xScale.ticks(10));
190-
191-
gridText.enter().insert("text")
192-
.attr("x", xScale)
193-
.attr("dy", -3)
194-
.attr("text-anchor", "middle")
195-
.text(String);
196-
197-
gridText.transition()
198-
.attr("x", xScale)
199-
.attr("dy", -3)
200-
.attr("text-anchor", "middle")
201-
.text(String);
202-
203-
gridText.exit().remove();
204-
205-
/** insert, update and change grid lines */
206-
gridContainer.selectAll("line").data(xScale.ticks(10))
207-
.attr("x1", xScale)
208-
.attr("x2", xScale)
209-
.attr("y1", 0)
210-
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
211-
.style("stroke", "#ccc").exit().remove();
212-
213167
barsContainer.append("line")
214-
.attr("y1", -gridChartOffset)
215-
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
168+
.attr("y1", 0)
169+
.attr("y2", yScale.rangeExtent()[1])
216170
.style("stroke", "#000");
217171
};
218172

‎app/assets/javascripts/controllers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ angular.module('birdwatch.controllers', ['birdwatch.services', 'charts.barchart'
66
$scope.prevSizeOpts = ['100', '500', '1000', '2000', '5000', '10000', '20000'];
77
$scope.prevSize = $scope.prevSizeOpts[2];
88
$scope.pageSizeOpts = [5, 10, 25, 50, 100];
9-
$scope.pageSize = $scope.pageSizeOpts[2];
9+
$scope.pageSize = $scope.pageSizeOpts[1];
1010
$scope.live = true;
1111
$scope.toggleLive = function () { // freezes view when switched off by having the
1212
if ($scope.live) { cf.freeze(); } else { cf.unfreeze(); } // crossfilter limit results to tweets older

‎app/assets/javascripts/directives.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,18 @@ angular.module('birdwatch.directives', ['charts.barchart', 'charts.wordcloud'])
1515
return {
1616
restrict: 'C',
1717
scope: { words: "=words", live: "=live", callback: "=callback" },
18-
template: '',
1918
link: function ($scope, element, attrs) {
2019
$scope.barchartDefined = false;
21-
$scope.barchart = barchart.BarChart($scope.callback, element.width() - 170, element);
20+
$scope.barchart = barchart.BarChart($scope.callback, element.width() - 180, element, 25);
2221

2322
$scope.$watch("words", function() {
24-
if ($scope.words.length > 10 && $scope.live) {
23+
if ($scope.live) {
2524
if ($scope.barchartDefined === false) {
2625
$scope.barchart.init($scope.words.slice(0, 26));
2726
$scope.barchartDefined = true;
28-
} else { $scope.barchart.redraw($scope.words.slice(0, 26)) }
27+
} else {
28+
$scope.barchart.redraw($scope.words.slice(0, 26))
29+
}
2930
}
3031
});
3132
}
@@ -35,23 +36,22 @@ angular.module('birdwatch.directives', ['charts.barchart', 'charts.wordcloud'])
3536
return {
3637
restrict: 'C',
3738
scope: { words: "=words", live: "=live", interval: "=interval", callback: "=callback" },
38-
template: '',
3939
link: function ($scope, elem, attrs) {
40-
var lastCloudUpdate = new Date().getTime() - $scope.interval;
41-
$scope.wordCloud = wordcloud.WordCloud(elem.width(), elem.width() * 0.75, 250, $scope.callback, elem);
42-
43-
/** resize wordCloud on window resize when div size changes */
44-
function resizeWordcloud() {
40+
function init() {
4541
elem.empty();
4642
$scope.wordCloud = wordcloud.WordCloud(elem.width(), elem.width() * 0.75, 250, $scope.callback, elem);
4743
}
48-
$(window).resize(function () { _.throttle(resizeWordcloud, 1000)(); });
44+
init();
4945

46+
var lastCloudUpdate = new Date().getTime() - $scope.interval;
5047
$scope.$watch("words", function() {
5148
if ((new Date().getTime() - lastCloudUpdate) > $scope.interval && $scope.live) {
5249
$scope.wordCloud.redraw($scope.words);
5350
}
5451
});
52+
53+
/** re-initialize wordCloud on window resize */
54+
$(window).resize(function () { _.throttle(init, 1000)(); });
5555
}
5656
}
5757
});

0 commit comments

Comments
 (0)