Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 18b4a86

Browse files
tladendotladendo
committed
More styling. Made graphs responsive
1 parent 522ba70 commit 18b4a86

File tree

12 files changed

+504
-306
lines changed

12 files changed

+504
-306
lines changed

‎app/directives/distribution-graph/distribution-graph.directive.jade

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
.num {{rating}}
1010
.label RATING
1111

12-
.compare
13-
button(ng-click="graphState.show = 'history'") COMPARE
12+
a.compare(ng-click="graphState.show = 'history'")
13+
| COMPARE

‎app/directives/distribution-graph/distribution-graph.directive.js

Lines changed: 174 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -56,155 +56,195 @@
5656
'end': Infinity
5757
}
5858
];
59-
var w = 600,
60-
h = 400,
61-
padding = { top: 20, left: 100, bottom: 100, right: 0 };
62-
var totalW = w + padding.left + padding.right;
63-
var totalH = h + padding.top + padding.bottom;
59+
var measurements = {
60+
w: 600,
61+
h: 400,
62+
padding: {
63+
top: 20,
64+
left: 50,
65+
bottom: 100,
66+
right: 50
67+
}
68+
};
69+
70+
var mobileMeasurements = {
71+
w: 350,
72+
h: 200,
73+
padding: {
74+
top: 10,
75+
left: 30,
76+
bottom: 100,
77+
right: 30
78+
}
79+
};
80+
81+
var desktop = window.innerWidth >= 900 && true;
6482

65-
activate();
83+
$scope.promise.then(function(data) {
84+
$scope.distribution = data.distribution;
85+
draw(desktop ? measurements : mobileMeasurements, $scope.distribution);
86+
});
87+
88+
d3.select(window).on('resize.distribution', resize);
89+
90+
function resize() {
91+
if (window.innerWidth < 900 && desktop) {
92+
console.log('yo!')
93+
d3.select('.distribution-graph svg').remove();
94+
draw(mobileMeasurements, $scope.distribution);
95+
desktop = false;
96+
} else if (window.innerWidth >= 900 && !desktop) {
97+
d3.select('.distribution-graph svg').remove();
98+
draw(measurements, $scope.distribution);
99+
desktop = true;
100+
}
101+
}
102+
103+
function draw(measurements, distribution) {
104+
105+
var w = measurements.w,
106+
h = measurements.h,
107+
padding = measurements.padding;
108+
var totalW = w + padding.left + padding.right;
109+
var totalH = h + padding.top + padding.bottom;
66110

67-
function activate() {
68111
$scope.displayCoders = false;
69112
$scope.numCoders = 100;
70-
$scope.promise.then(function(data) {
71-
$scope.distribution = data.distribution;
72-
var ranges = getRanges($scope.distribution);
73-
removeLeadingZeroes(ranges);
74-
removeTrailingZeroes(ranges);
75-
var xScale = d3.scale.ordinal()
76-
.domain(d3.range(ranges.length))
77-
.rangeRoundBands([padding.left, padding.left + w], 0.05);
78-
var yScale = d3.scale.linear()
79-
.domain([0, d3.max(ranges, function(range) { return range.number }) + 1])
80-
.range([totalH - padding.bottom, padding.top]);
81-
var xScale2 = d3.scale.linear()
82-
.domain([ranges[0].start,
83-
d3.max(ranges, function(range) { return range.end })])
84-
.range([padding.left, totalW - padding.right]);
85-
var svg = d3.select('div.distribution-graph')
86-
.append('svg')
87-
.attr('width', totalW)
88-
.attr('height', totalH);
113+
var ranges = getRanges(distribution);
114+
removeLeadingZeroes(ranges);
115+
removeTrailingZeroes(ranges);
116+
var xScale = d3.scale.ordinal()
117+
.domain(d3.range(ranges.length))
118+
.rangeRoundBands([padding.left, padding.left + w], 0.05);
119+
var yScale = d3.scale.linear()
120+
.domain([0, d3.max(ranges, function(range) { return range.number }) + 1])
121+
.range([totalH - padding.bottom, padding.top]);
122+
var xScale2 = d3.scale.linear()
123+
.domain([ranges[0].start,
124+
d3.max(ranges, function(range) { return range.end })])
125+
.range([padding.left, totalW - padding.right]);
126+
var svg = d3.select('div.distribution-graph')
127+
.append('svg')
128+
.attr('width', totalW)
129+
.attr('height', totalH);
89130

90-
svg.append('rect')
91-
.attr('x', padding.left)
92-
.attr('y', padding.top)
93-
.attr('width', w)
94-
.attr('height', h)
95-
.attr('fill', '#f6f6f6')
131+
svg.append('rect')
132+
.attr('x', padding.left)
133+
.attr('y', padding.top)
134+
.attr('width', w)
135+
.attr('height', h)
136+
.attr('fill', '#f6f6f6')
96137

97-
svg.append('g')
98-
.attr('class', 'grid')
99-
.attr('transform', 'translate(' + padding.left + ',0)')
100-
.call(
101-
yAxis(5).tickSize(-totalW, 0, 0)
102-
.tickFormat('')
103-
)
138+
svg.append('g')
139+
.attr('class', 'grid')
140+
.attr('transform', 'translate(' + padding.left + ',0)')
141+
.call(
142+
yAxis(5).tickSize(-totalW, 0, 0)
143+
.tickFormat('')
144+
)
104145

105-
svg.append('g')
106-
.attr('class', 'axis')
107-
.attr('transform', 'translate(' + padding.left + ', 0)')
108-
.call(yAxis(5))
146+
svg.append('g')
147+
.attr('class', 'axis')
148+
.attr('transform', 'translate(' + padding.left + ', 0)')
149+
.call(yAxis(5))
109150

110151

111-
function logr(x) {
112-
console.log(x); return x;
113-
}
114-
svg.append('line')
115-
.attr('x1', xScale2($scope.rating))
116-
.attr('y1', totalH - padding.bottom)
117-
.attr('x2', xScale2($scope.rating))
118-
.attr('y2', padding.top)
119-
.attr('class', 'my-rating')
120-
.attr('stroke-width', 2)
121-
.attr('stroke', ratingToColor($scope.colors, $scope.rating));
152+
function logr(x) {
153+
console.log(x); return x;
154+
}
155+
svg.append('line')
156+
.attr('x1', xScale2($scope.rating))
157+
.attr('y1', totalH - padding.bottom)
158+
.attr('x2', xScale2($scope.rating))
159+
.attr('y2', padding.top)
160+
.attr('class', 'my-rating')
161+
.attr('stroke-width', 2)
162+
.attr('stroke', ratingToColor($scope.colors, $scope.rating));
122163

123-
svg.selectAll('rect.bar')
124-
.data(ranges)
125-
.enter()
126-
.append('rect')
127-
.attr('class', 'bar')
128-
.attr('x', function(d, i) {
129-
return xScale(i);
130-
})
131-
.attr('y', function(d) {
132-
return yScale(d.number);
133-
})
134-
.attr('width', xScale.rangeBand())
135-
.attr('height', function(d) {
136-
return totalH - padding.bottom - yScale(d.number);
137-
})
138-
.attr('fill', function(d) {
139-
return ratingToColor($scope.colors, d.start);
140-
})
141-
.on('mouseover', function(d) {
142-
d3.select(this)
143-
.attr('fill', ratingToDarkerColor($scope.colors, d.start));
144-
$scope.displayCoders = true;
145-
$scope.numCoders = d.number;
146-
$scope.$digest();
147-
})
148-
.on('mouseout', function(d) {
149-
d3.select(this)
150-
.attr('fill', ratingToColor($scope.colors, d.start));
151-
$scope.displayCoders = false;
152-
$scope.$digest();
153-
})
164+
svg.selectAll('rect.bar')
165+
.data(ranges)
166+
.enter()
167+
.append('rect')
168+
.attr('class', 'bar')
169+
.attr('x', function(d, i) {
170+
return xScale(i);
171+
})
172+
.attr('y', function(d) {
173+
return yScale(d.number);
174+
})
175+
.attr('width', xScale.rangeBand())
176+
.attr('height', function(d) {
177+
return totalH - padding.bottom - yScale(d.number);
178+
})
179+
.attr('fill', function(d) {
180+
return ratingToColor($scope.colors, d.start);
181+
})
182+
.on('mouseover', function(d) {
183+
d3.select(this)
184+
.attr('fill', ratingToDarkerColor($scope.colors, d.start));
185+
$scope.displayCoders = true;
186+
$scope.numCoders = d.number;
187+
$scope.$digest();
188+
})
189+
.on('mouseout', function(d) {
190+
d3.select(this)
191+
.attr('fill', ratingToColor($scope.colors, d.start));
192+
$scope.displayCoders = false;
193+
$scope.$digest();
194+
})
154195

155-
svg.selectAll('line.xaxis')
156-
.data(ranges)
157-
.enter()
158-
.append('line')
159-
.attr('class', 'xaxis')
160-
.attr('x1', function(d, i) {
161-
if (i === 0) {
162-
return padding.left;
163-
} else {
164-
return xScale(i) - .5;
165-
}
166-
})
167-
.attr('x2', function(d, i) {
168-
if (i === ranges.length - 1) {
169-
return totalW - padding.right;
170-
} else {
171-
return xScale(i) + xScale.rangeBand() + .5;
172-
}
173-
})
174-
.attr('y1', h + padding.top + .5)
175-
.attr('y2', h + padding.top + .5)
176-
.attr('stroke', function(d) {
177-
return ratingToColor($scope.colors, d.start);
178-
})
196+
svg.selectAll('line.xaxis')
197+
.data(ranges)
198+
.enter()
199+
.append('line')
200+
.attr('class', 'xaxis')
201+
.attr('x1', function(d, i) {
202+
if (i === 0) {
203+
return padding.left;
204+
} else {
205+
return xScale(i) - .5;
206+
}
207+
})
208+
.attr('x2', function(d, i) {
209+
if (i === ranges.length - 1) {
210+
return totalW - padding.right;
211+
} else {
212+
return xScale(i) + xScale.rangeBand() + .5;
213+
}
214+
})
215+
.attr('y1', h + padding.top + .5)
216+
.attr('y2', h + padding.top + .5)
217+
.attr('stroke', function(d) {
218+
return ratingToColor($scope.colors, d.start);
219+
})
179220

180-
var xAxis = d3.svg.axis()
181-
.scale(xScale)
182-
.orient('bottom')
183-
.ticks(ranges.length);
221+
var xAxis = d3.svg.axis()
222+
.scale(xScale)
223+
.orient('bottom')
224+
.ticks(ranges.length);
184225

185-
function yAxis(ticks) {
186-
return d3.svg.axis()
187-
.scale(yScale)
188-
.orient('left')
189-
.ticks(ticks);
190-
}
226+
function yAxis(ticks) {
227+
return d3.svg.axis()
228+
.scale(yScale)
229+
.orient('left')
230+
.ticks(ticks);
231+
}
191232

192-
svg.append('g')
193-
.attr('class', 'axis')
194-
.attr('transform', 'translate(0,' + (h + padding.top) + ')')
195-
.call(xAxis)
196-
.selectAll('text')
197-
.attr('x', 9)
198-
.attr('y', 0)
199-
.attr('dy', '.35em')
200-
.attr('transform', 'rotate(90)')
201-
.style('text-anchor', 'start')
202-
.text(function(d, i) {
203-
var range = ranges[i];
204-
return range.start + ' - ' + range.end;
205-
});
233+
svg.append('g')
234+
.attr('class', 'axis')
235+
.attr('transform', 'translate(0,' + (h + padding.top) + ')')
236+
.call(xAxis)
237+
.selectAll('text')
238+
.attr('x', 9)
239+
.attr('y', 0)
240+
.attr('dy', '.35em')
241+
.attr('transform', 'rotate(90)')
242+
.style('text-anchor', 'start')
243+
.text(function(d, i) {
244+
var range = ranges[i];
245+
return range.start + ' - ' + range.end;
246+
});
206247

207-
});
208248

209249
}
210250

‎app/directives/history-graph/history-graph.directive.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
.history-info(ng-if="historyRating")
99
| Attained on {{historyDate}} in challenge "{{historyChallenge}}"
1010
.lower
11-
button(ng-click="graphState.show = 'distribution'") COMPARE
11+
a.compare(ng-click="graphState.show = 'distribution'") COMPARE

0 commit comments

Comments
 (0)