Skip to content

Commit 31e52c6

Browse files
currancurran
committed
Added generalizing D3 examples for handling resize
1 parent 4c8bc92 commit 31e52c6

23 files changed

+469
-81
lines changed

‎generalizingD3/README.html

+2
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ <h2 id="examples">Examples</h2>
6262
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08">Example 8</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot08">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08/index.html">index.html</a>) - Split up Y axis group creation and configuration</li>
6363
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09">Example 9</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot09">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09/index.html">index.html</a>) - Split up enter and update for bars</li>
6464
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10">Example 10</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot10">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10/index.html">index.html</a>) - Isolate hard-coded visualization size</li>
65+
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11">Example 11</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot11">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11/index.html">index.html</a>) - Allow CSS to determine visualization size</li>
66+
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12">Example 12</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot12">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12/index.html">index.html</a>) - Add resize support</li>
6567
</ul>
6668
<p>Final Result:</p>
6769
<ul>

‎generalizingD3/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ Listing of all examples:
5959
* [Example 8](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08) - ([run it!](http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot08) | [index.html](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08/index.html)) - Split up Y axis group creation and configuration
6060
* [Example 9](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09) - ([run it!](http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot09) | [index.html](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09/index.html)) - Split up enter and update for bars
6161
* [Example 10](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10) - ([run it!](http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot10) | [index.html](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10/index.html)) - Isolate hard-coded visualization size
62+
* [Example 11](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11) - ([run it!](http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot11) | [index.html](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11/index.html)) - Allow CSS to determine visualization size
63+
* [Example 12](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12) - ([run it!](http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot12) | [index.html](https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12/index.html)) - Add resize support
6264

6365
Final Result:
6466

‎generalizingD3/compileReadme.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,16 @@ function filePrecedence(name){
9393
return 0;
9494
} else if (ext === '.html') {
9595
return 1;
96-
} else if (ext === '.js') {
96+
} else if(name === 'main.js'){
9797
return 2;
98-
} else if (ext === '.json') {
98+
} else if (ext === '.js') {
9999
return 3;
100-
} else {
100+
} else if (ext === '.css') {
101101
return 4;
102+
} else if (ext === '.json') {
103+
return 5;
104+
} else {
105+
return 6;
102106
}
103107
}
104108

‎generalizingD3/examples.json

+52-24
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"files": [
1818
"index.html",
1919
"barChart.js",
20-
"data.tsv",
21-
"styles.css"
20+
"styles.css",
21+
"data.tsv"
2222
],
2323
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot02",
2424
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot02"
@@ -30,8 +30,8 @@
3030
"files": [
3131
"index.html",
3232
"barChart.js",
33-
"data.tsv",
34-
"styles.css"
33+
"styles.css",
34+
"data.tsv"
3535
],
3636
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot03",
3737
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot03"
@@ -43,8 +43,8 @@
4343
"files": [
4444
"index.html",
4545
"barChart.js",
46-
"data.tsv",
47-
"styles.css"
46+
"styles.css",
47+
"data.tsv"
4848
],
4949
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot04",
5050
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot04"
@@ -55,10 +55,10 @@
5555
"message": "Split bar chart and main program",
5656
"files": [
5757
"index.html",
58-
"barChart.js",
5958
"main.js",
60-
"data.tsv",
61-
"styles.css"
59+
"barChart.js",
60+
"styles.css",
61+
"data.tsv"
6262
],
6363
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot05",
6464
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot05"
@@ -69,10 +69,10 @@
6969
"message": "Split up SVG and Group creation and configuration",
7070
"files": [
7171
"index.html",
72-
"barChart.js",
7372
"main.js",
74-
"data.tsv",
75-
"styles.css"
73+
"barChart.js",
74+
"styles.css",
75+
"data.tsv"
7676
],
7777
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot06",
7878
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot06"
@@ -83,10 +83,10 @@
8383
"message": "Split up X axis group creation and configuration",
8484
"files": [
8585
"index.html",
86-
"barChart.js",
8786
"main.js",
88-
"data.tsv",
89-
"styles.css"
87+
"barChart.js",
88+
"styles.css",
89+
"data.tsv"
9090
],
9191
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot07",
9292
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot07"
@@ -97,10 +97,10 @@
9797
"message": "Split up Y axis group creation and configuration",
9898
"files": [
9999
"index.html",
100-
"barChart.js",
101100
"main.js",
102-
"data.tsv",
103-
"styles.css"
101+
"barChart.js",
102+
"styles.css",
103+
"data.tsv"
104104
],
105105
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08",
106106
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot08"
@@ -111,10 +111,10 @@
111111
"message": "Split up enter and update for bars",
112112
"files": [
113113
"index.html",
114-
"barChart.js",
115114
"main.js",
116-
"data.tsv",
117-
"styles.css"
115+
"barChart.js",
116+
"styles.css",
117+
"data.tsv"
118118
],
119119
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09",
120120
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot09"
@@ -125,12 +125,40 @@
125125
"message": "Isolate hard-coded visualization size",
126126
"files": [
127127
"index.html",
128-
"barChart.js",
129128
"main.js",
130-
"data.tsv",
131-
"styles.css"
129+
"barChart.js",
130+
"styles.css",
131+
"data.tsv"
132132
],
133133
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10",
134134
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot10"
135+
},
136+
{
137+
"name": "snapshot11",
138+
"number": 11,
139+
"message": "Allow CSS to determine visualization size",
140+
"files": [
141+
"index.html",
142+
"main.js",
143+
"barChart.js",
144+
"styles.css",
145+
"data.tsv"
146+
],
147+
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11",
148+
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot11"
149+
},
150+
{
151+
"name": "snapshot12",
152+
"number": 12,
153+
"message": "Add resize support",
154+
"files": [
155+
"index.html",
156+
"main.js",
157+
"barChart.js",
158+
"styles.css",
159+
"data.tsv"
160+
],
161+
"url": "https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12",
162+
"runUrl": "http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot12"
135163
}
136164
]

‎generalizingD3/examples/barChart.js

+48-43
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
function BarChart(){
1+
function BarChart(div){
22
var margin = {top: 20, right: 20, bottom: 30, left: 40},
3-
outerWidth = 960,
4-
outerHeight = 500,
5-
width = outerWidth - margin.left - margin.right,
6-
height = outerHeight - margin.top - margin.bottom,
73

8-
x = d3.scale.ordinal()
9-
.rangeRoundBands([0, width], .1),
4+
x = d3.scale.ordinal(),
105

11-
y = d3.scale.linear()
12-
.range([height, 0]),
6+
y = d3.scale.linear(),
137

148
xAxis = d3.svg.axis()
159
.scale(x)
@@ -20,7 +14,7 @@ function BarChart(){
2014
.orient("left")
2115
.ticks(10, "%"),
2216

23-
svg = d3.select("body").append("svg"),
17+
svg = d3.select(div).append("svg"),
2418
g = svg.append("g"),
2519

2620
xAxisG = g.append("g")
@@ -29,53 +23,64 @@ function BarChart(){
2923
yAxisG = g.append("g")
3024
.attr("class", "y axis"),
3125

32-
yAxisLabel = yAxisG.append("text");
26+
yAxisLabel = yAxisG.append("text")
27+
.attr("transform", "rotate(-90)")
28+
.attr("y", 6)
29+
.attr("dy", ".71em")
30+
.style("text-anchor", "end")
31+
.text("Frequency");
3332

34-
// Set width and height on the SVG element
35-
svg.attr("width", outerWidth)
36-
.attr("height", outerHeight);
33+
// Call once to initialize visualization
34+
updateSize();
3735

38-
// Transform the SVG group that contains the visualization
39-
// based on the margin
40-
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
36+
function updateSize(){
37+
var outerWidth = div.clientWidth,
38+
outerHeight = div.clientHeight,
39+
width = outerWidth - margin.left - margin.right,
40+
height = outerHeight - margin.top - margin.bottom;
4141

42-
yAxisLabel
43-
.attr("transform", "rotate(-90)")
44-
.attr("y", 6)
45-
.attr("dy", ".71em")
46-
.style("text-anchor", "end")
47-
.text("Frequency");
42+
y.range([height, 0]);
43+
x.rangeRoundBands([0, width], .1);
4844

49-
d3.tsv("data.tsv", type, function(error, data) {
50-
var bars;
45+
svg.attr("width", outerWidth)
46+
.attr("height", outerHeight);
5147

52-
x.domain(data.map(function(d) { return d.letter; }));
53-
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
48+
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
5449

55-
xAxisG
56-
.attr("transform", "translate(0," + height + ")")
57-
.call(xAxis);
50+
d3.tsv("data.tsv", type, function(error, data) {
51+
var bars;
5852

59-
yAxisG.call(yAxis);
53+
x.domain(data.map(function(d) { return d.letter; }));
54+
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
6055

61-
// Create the D3 selection with data binding
62-
bars = g.selectAll(".bar").data(data);
56+
xAxisG
57+
.attr("transform", "translate(0," + height + ")")
58+
.call(xAxis);
6359

64-
// Enter: stuff that happens only once when DOM elements are created.
65-
// Should be independent of data and visualization size.
66-
bars.enter().append("rect").attr("class", "bar");
60+
yAxisG.call(yAxis);
6761

68-
// Update: stuff that may happen many times,
69-
// and may change based on the data or visualization size.
70-
bars.attr("x", function(d) { return x(d.letter); })
71-
.attr("width", x.rangeBand())
72-
.attr("y", function(d) { return y(d.frequency); })
73-
.attr("height", function(d) { return height - y(d.frequency); });
62+
// Create the D3 selection with data binding
63+
bars = g.selectAll(".bar").data(data);
7464

75-
});
65+
// Enter: stuff that happens only once when DOM elements are created.
66+
// Should be independent of data and visualization size.
67+
bars.enter().append("rect").attr("class", "bar");
68+
69+
// Update: stuff that may happen many times,
70+
// and may change based on the data or visualization size.
71+
bars.attr("x", function(d) { return x(d.letter); })
72+
.attr("width", x.rangeBand())
73+
.attr("y", function(d) { return y(d.frequency); })
74+
.attr("height", function(d) { return height - y(d.frequency); });
75+
76+
});
77+
}
7678

7779
function type(d) {
7880
d.frequency = +d.frequency;
7981
return d;
8082
}
83+
84+
// Return a public API with updateSize()
85+
return { updateSize: updateSize };
8186
}

‎generalizingD3/examples/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<script src="barChart.js"> </script>
88
</head>
99
<body>
10+
<div id="barChartContainer"></div>
1011
<script src="main.js"> </script>
1112
</body>
1213
</html>

‎generalizingD3/examples/main.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
BarChart();
1+
(function (){
2+
var div = document.getElementById('barChartContainer'),
3+
barChart = BarChart(div);
4+
window.addEventListener('resize', barChart.updateSize);
5+
}());

‎generalizingD3/examples/snapshots/snapshot11/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Allow CSS to determine visualization size
2+
3+
What changed:
4+
5+
* Added container div
6+
* Added CSS for div position and size
7+
* Passing div into bar chart constructor
8+
* Using div width and height in bar chart
9+
* Appending SVG element to div, not body

0 commit comments

Comments
 (0)