Skip to content

Commit 656fd4b

Browse files
zachmargoliszachmargolis
authored
Merge pull request square#20 from square/margolis/upgrade-to-d3-v4
Upgrade to d3 v4
2 parents 32ce189 + 14159e5 commit 656fd4b

16 files changed

+178
-169
lines changed

‎_includes/examples/axes.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
</head>
88
<body>
99
<script type="text/javascript"
10-
src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
10+
src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
1111
<script type="text/javascript">
1212
{% include examples/data.js %}
1313

14-
var x = d3.time.scale()
14+
var x = d3.scaleTime()
1515
.range([50, 250])
1616
.domain(d3.extent(data, function(d) { return new Date(d.date); }));
1717

‎_includes/examples/axes.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
var xAxis = d3.svg.axis()
2-
.scale(x) // x is the d3.time.scale()
3-
.orient('bottom') // the ticks go below the graph
4-
.ticks(4); // specify the number of ticks
1+
// x is the d3.scaleTime()
2+
var xAxis = d3.axisBottom(x)
3+
.ticks(4); // specify the number of ticks
54

65
var svg = d3.select('body')
76
.append('svg') // create an <svg> element

‎_includes/examples/dom-styled.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% include examples/dom.html %}
66

77
<script type="text/javascript"
8-
src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
8+
src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
99
<script type="text/javascript"
1010
src="{{ "/examples/dom.js" | prepend: site.baseurl }}"></script>
1111
</body>

‎_includes/examples/ex0.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
</style>
55
</head>
66
<body>
7-
<script src="../javascripts/d3.v3.min.js"></script>
7+
<script src="../javascripts/d3.v4.min.js"></script>
88
</body>
99
</html>

‎_includes/examples/ex1.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@
3131
class="fancy" />
3232
</svg>
3333

34-
<script src="../javascripts/d3.v3.min.js"></script>
34+
<script src="../javascripts/d3.v4.min.js"></script>
3535
</body>
3636
</html>

‎_includes/examples/ex2.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
</svg>
2626

2727

28-
<script src="../javascripts/d3.v3.min.js"></script>
28+
<script src="../javascripts/d3.v4.min.js"></script>
2929
</body>
3030
</html>

‎_includes/footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="footer">
2-
&copy; 2014 Square, Inc.
2+
&copy; 2014 &ndash; {{ site.time | date: '%Y' }} Square, Inc.
33
</div>

‎_includes/head.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
<link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
1111
<link rel="stylesheet" href="{{ "/css/graph.css" | prepend: site.baseurl }}">
1212

13-
<script type="text/javascript" src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
13+
<script type="text/javascript" src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
1414
</head>

‎index.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,30 @@ a tutorial — and worth sharing.
1212

1313
### Introduction
1414

15-
The tutorial provides a quick intro to [D3.js](http://d3js.org/), a Javascript
15+
The tutorial provides a quick intro to [d3.js](http://d3js.org/), a Javascript
1616
library for creating data visualizations in the browser. D3 is built on top of
1717
common web standards like HTML, CSS, and SVG.
1818

1919
D3 makes web-based visualizations easier by "automating the hard bits you already
2020
understand," as opposed to "hiding the hard
21-
bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849)).
21+
bits" (hat tip [@andy_matuschak][tweet]).
2222

2323
Again, the tutorial is _not_ a deep dive — we want you to learn _how_ to learn
2424
D3 and gain a high-level understanding of this useful tool.
2525

26+
### Notes
27+
28+
The recent version of d3.js, v4, has some big breaks in the API from the
29+
previous version (see all the details of the [v3-to-v4 transition][v3-v4] in the
30+
D3 wiki). Since we expect this to be the future, and that people coming to learn
31+
d3 would want to be up to date from the beginning, we have updated this tutorial
32+
to work with the v4 version. We tagged the [v3 version][archive-v3] for
33+
posterity.
34+
2635
<a href="{{ "/web-standards/" | prepend: site.baseurl }}" class="giant-button">
2736
Let's get started!
2837
</a>
38+
39+
[tweet]: https://twitter.com/andy_matuschak/status/365547794129358849
40+
[v3-v4]: https://github.com/d3/d3/blob/master/CHANGES.md
41+
[archive-v3]: https://github.com/square/intro-to-d3/releases/tag/archive-v3

‎javascripts/d3.v3.min.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎javascripts/d3.v4.min.js

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎javascripts/data-binding.js

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@
3636
var width = 300,
3737
height = 75;
3838

39-
var x = d3.scale.linear()
39+
var x = d3.scaleLinear()
4040
.range([0, 300])
4141
.domain([0, maxCount]);
42-
var y = d3.scale.ordinal()
43-
.rangeRoundBands([0, height])
42+
var y = d3.scaleBand()
43+
.range([0, height])
4444
.domain(sales.map(function(d, i) {
4545
return d.product;
4646
}));
@@ -60,17 +60,20 @@
6060
var rects = svg.selectAll('rect')
6161
.data(sales, function(d, i) { return d.product });
6262

63-
// When we enter, we only want to add the rect
64-
rects.enter()
65-
.append('rect');
66-
67-
// The default selection is the update selection
68-
rects
69-
.attr('x', x(0))
70-
.attr('y', function(d, i) {
71-
return y(d.product);
72-
})
73-
.attr('height', y.rangeBand())
63+
// When we enter, we add the DOM element
64+
// and set up the things that won't change
65+
var enterRects = rects.enter()
66+
.append('rect')
67+
.attr('x', x(0))
68+
.attr('y', function(d, i) {
69+
return y(d.product);
70+
})
71+
.attr('height', y.bandwidth())
72+
73+
// "rects" represents the update selection, we need to
74+
// manually merge it with the enter selection to update
75+
// all rects at the same time
76+
rects.merge(enterRects)
7477
.attr('width', function(d, i) {
7578
return x(d.count);
7679
});
@@ -94,20 +97,24 @@
9497
var rects = svg.selectAll('rect')
9598
.data(sales, function(d, i) { return d.product });
9699

97-
// When we enter, we only want to add the rect
98-
rects.enter()
99-
.append('rect');
100-
101-
rects.transition()
100+
// When we enter, we add the DOM element
101+
// and set up the things that won't change
102+
var enterRects = rects.enter()
103+
.append('rect')
104+
.attr('x', x(0))
105+
.attr('y', function(d, i) {
106+
return y(d.product);
107+
})
108+
.attr('height', y.bandwidth())
109+
.attr('width', function(d, i) {
110+
return x(d.count);
111+
});
112+
113+
rects.merge(enterRects).transition()
102114
.duration(1000)
103-
.attr('x', x(0))
104-
.attr('y', function(d, i) {
105-
return y(d.product);
106-
})
107-
.attr('height', y.rangeBand())
108-
.attr('width', function(d, i) {
109-
return x(d.count);
110-
});
115+
.attr('width', function(d, i) {
116+
return x(d.count);
117+
});
111118
};
112119

113120
update();

‎javascripts/parts-of-a-graph.js

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,15 @@
3737
var width = 350,
3838
height = 120,
3939
margin = { top: 10, right: 50, bottom: 30, left: 50 },
40-
x = d3.time.scale()
40+
x = d3.scaleTime()
4141
.range([0, width])
4242
.domain(d3.extent(data, getDate)),
43-
y = d3.scale.linear()
43+
y = d3.scaleLinear()
4444
.range([height, 0])
4545
.domain([0, d3.max(data, getAmount)]),
46-
xAxis = d3.svg.axis()
47-
.scale(x)
48-
.orient('bottom')
46+
xAxis = d3.axisBottom(x)
4947
.ticks(3),
50-
yAxis = d3.svg.axis()
51-
.scale(y)
52-
.orient('left')
48+
yAxis = d3.axisLeft(y)
5349
.tickFormat(d3.format('$,d'))
5450
.ticks(5);
5551

@@ -69,7 +65,7 @@
6965
.attr('class', 'y axis')
7066
.call(yAxis);
7167

72-
var line = d3.svg.line()
68+
var line = d3.line()
7369
.x(function(d) { return x(getDate(d)) })
7470
.y(function(d) { return y(getAmount(d)) })
7571

‎z02-parts-of-a-graph.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ Here is how we set up the y-scale for the above money example:
163163
<div class="example-row-1">
164164
<div class="example">
165165
{% highlight javascript %}
166-
var y = d3.scale.linear()
166+
var y = d3.scaleLinear()
167167
.domain([0, 80]) // $0 to $80
168168
.range([200, 0]); // Seems backwards because SVG is y-down
169169
{% endhighlight %}
@@ -203,7 +203,7 @@ We can even do the same things with dates!
203203
<div class="example-row-1">
204204
<div class="example">
205205
{% highlight javascript %}
206-
var x = d3.time.scale()
206+
var x = d3.scaleTime()
207207
.domain([
208208
new Date(Date.parse('2014-01-01')),
209209
new Date(Date.parse('2014-04-01'))

‎z03-data-binding.md

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,10 @@ attribute editing helpers to configure each circle per its data point.
136136
var maxCount = d3.max(sales, function(d, i) {
137137
return d.count;
138138
});
139-
var x = d3.scale.linear()
139+
var x = d3.scaleLinear()
140140
.range([0, 300])
141141
.domain([0, maxCount]);
142-
var y = d3.scale.ordinal()
142+
var y = d3.scaleOrdinal()
143143
.rangeRoundBands([0, 75])
144144
.domain(sales.map(function(d, i) {
145145
return d.product;
@@ -164,7 +164,7 @@ newRects.append('rect')
164164
</div>
165165

166166
<p>
167-
The <kbd>d3.scale.ordinal()</kbd> helps us create buckets for each
167+
The <kbd>d3.scaleOrdinal()</kbd> helps us create buckets for each
168168
element. In this case, that's one per product.
169169
</p>
170170
<p>
@@ -390,23 +390,22 @@ function toggle() {
390390

391391
function update() {
392392
var rects = svg.selectAll('rect')
393-
.data(sales, function(d, i) {
394-
return d.product
395-
});
396-
397-
// When we enter, we just want to create the rect,
398-
rects.enter()
399-
.append('rect');
400-
401-
// We configure the rects here so the values
402-
// apply to it applies to both new and existing
403-
// rects
404-
rects
405-
.attr('x', x(0))
406-
.attr('y', function(d, i) {
407-
return y(d.product);
408-
})
409-
.attr('height', y.rangeBand())
393+
.data(sales, function(d, i) { return d.product });
394+
395+
// When we enter, we add the DOM element
396+
// and set up the things that won't change
397+
var enterRects = rects.enter()
398+
.append('rect')
399+
.attr('x', x(0))
400+
.attr('y', function(d, i) {
401+
return y(d.product);
402+
})
403+
.attr('height', y.bandwidth())
404+
405+
// "rects" represents the update selection, we need to
406+
// manually merge it with the enter selection to update
407+
// all rects at the same time
408+
rects.merge(enterRects)
410409
.attr('width', function(d, i) {
411410
return x(d.count);
412411
});
@@ -440,24 +439,27 @@ function toggle() {
440439

441440
function update() {
442441
var rects = svg.selectAll('rect')
443-
.data(sales, function(d, i) {
444-
return d.product
445-
});
446-
447-
rects.enter()
448-
.append('rect');
449-
450-
rects.transition() // NEW!
451-
.duration(1000) // also NEW!
452-
.attr('x', x(0))
453-
.attr('y', function(d, i) {
454-
return y(d.product);
455-
})
456-
.attr('height', y.rangeBand())
457-
.attr('width', function(d, i) {
458-
return x(d.count);
459-
});
442+
.data(sales, function(d, i) { return d.product });
443+
444+
var enterRects = rects.enter()
445+
.append('rect')
446+
.attr('x', x(0))
447+
.attr('y', function(d, i) {
448+
return y(d.product);
449+
})
450+
.attr('height', y.bandwidth())
451+
.attr('width', function(d, i) {
452+
return x(d.count);
453+
});
454+
455+
rects.merge(enterRects)
456+
.transition() // NEW
457+
.duration(1000) // Also NEW
458+
.attr('width', function(d, i) {
459+
return x(d.count);
460+
});
460461
};
462+
461463
{% endhighlight %}
462464
</div>
463465

0 commit comments

Comments
 (0)