Merge pull request square#20 from square/margolis/upgrade-to-d3-v4

zachmargolis · web-flow · commit 656fd4b1b78c · 2016-10-07T13:32:48.000-07:00
Upgrade to d3 v4
diff --git a/_includes/examples/axes.html b/_includes/examples/axes.html
@@ -7,11 +7,11 @@
   </head>
   <body>
     <script type="text/javascript"
-      src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
+      src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
     <script type="text/javascript">
       {% include examples/data.js %}
 
-      var x = d3.time.scale()
+      var x = d3.scaleTime()
           .range([50, 250])
           .domain(d3.extent(data, function(d) { return new Date(d.date); }));
 
diff --git a/_includes/examples/axes.js b/_includes/examples/axes.js
@@ -1,7 +1,6 @@
-var xAxis = d3.svg.axis()
-  .scale(x)         // x is the d3.time.scale()
-  .orient('bottom') // the ticks go below the graph
-  .ticks(4);        // specify the number of ticks
+// x is the d3.scaleTime()
+var xAxis = d3.axisBottom(x)
+  .ticks(4); // specify the number of ticks
 
 var svg = d3.select('body')
   .append('svg')        // create an <svg> element
diff --git a/_includes/examples/dom-styled.html b/_includes/examples/dom-styled.html
@@ -5,7 +5,7 @@
     {% include examples/dom.html %}
 
    <script type="text/javascript"
-      src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
+      src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
     <script type="text/javascript"
       src="{{ "/examples/dom.js" | prepend: site.baseurl }}"></script>
   </body>
diff --git a/_includes/examples/ex0.html b/_includes/examples/ex0.html
@@ -4,6 +4,6 @@
     </style>
   </head>
   <body>
-    <script src="../javascripts/d3.v3.min.js"></script>
+    <script src="../javascripts/d3.v4.min.js"></script>
   </body>
 </html>
diff --git a/_includes/examples/ex1.html b/_includes/examples/ex1.html
@@ -31,6 +31,6 @@
     class="fancy" />
 </svg>
 
-    <script src="../javascripts/d3.v3.min.js"></script>
+    <script src="../javascripts/d3.v4.min.js"></script>
   </body>
 </html>
diff --git a/_includes/examples/ex2.html b/_includes/examples/ex2.html
@@ -25,6 +25,6 @@
 </svg>
 
 
-    <script src="../javascripts/d3.v3.min.js"></script>
+    <script src="../javascripts/d3.v4.min.js"></script>
   </body>
 </html>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,3 +1,3 @@
 <div class="footer">
-  &copy; 2014 Square, Inc.
+  &copy; 2014 &ndash; {{ site.time | date: '%Y' }} Square, Inc.
 </div>
diff --git a/_includes/head.html b/_includes/head.html
@@ -10,5 +10,5 @@
   <link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="{{ "/css/graph.css" | prepend: site.baseurl }}">
 
-  <script type="text/javascript" src="{{ "/javascripts/d3.v3.min.js" | prepend: site.baseurl }}"></script>
+  <script type="text/javascript" src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
 </head>
diff --git a/index.md b/index.md
@@ -12,17 +12,30 @@ a tutorial — and worth sharing.
 
 ### Introduction
 
-The tutorial provides a quick intro to [D3.js](http://d3js.org/), a Javascript
+The tutorial provides a quick intro to [d3.js](http://d3js.org/), a Javascript
 library for creating data visualizations in the browser. D3 is built on top of
 common web standards like HTML, CSS, and SVG.
 
 D3 makes web-based visualizations easier by "automating the hard bits you already
 understand," as opposed to "hiding the hard
-bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849)).
+bits" (hat tip [@andy_matuschak][tweet]).
 
 Again, the tutorial is _not_ a deep dive — we want you to learn _how_ to learn
 D3 and gain a high-level understanding of this useful tool.
 
+### Notes
+
+The recent version of d3.js, v4, has some big breaks in the API from the
+previous version (see all the details of the [v3-to-v4 transition][v3-v4] in the
+D3 wiki). Since we expect this to be the future, and that people coming to learn
+d3 would want to be up to date from the beginning, we have updated this tutorial
+to work with the v4 version. We tagged the [v3 version][archive-v3] for
+posterity.
+
 <a href="{{ "/web-standards/" | prepend: site.baseurl }}" class="giant-button">
   Let's get started!
 </a>
+
+[tweet]: https://twitter.com/andy_matuschak/status/365547794129358849
+[v3-v4]: https://github.com/d3/d3/blob/master/CHANGES.md
+[archive-v3]: https://github.com/square/intro-to-d3/releases/tag/archive-v3
diff --git a/javascripts/d3.v3.min.js b/javascripts/d3.v3.min.js
diff --git a/javascripts/d3.v4.min.js b/javascripts/d3.v4.min.js
diff --git a/javascripts/data-binding.js b/javascripts/data-binding.js
@@ -36,11 +36,11 @@
   var width = 300,
       height = 75;
 
-  var x = d3.scale.linear()
+  var x = d3.scaleLinear()
     .range([0, 300])
     .domain([0, maxCount]);
-  var y = d3.scale.ordinal()
-    .rangeRoundBands([0, height])
+  var y = d3.scaleBand()
+    .range([0, height])
     .domain(sales.map(function(d, i) {
       return d.product;
     }));
@@ -60,17 +60,20 @@
       var rects = svg.selectAll('rect')
         .data(sales, function(d, i) { return d.product });
 
-      // When we enter, we only want to add the rect
-      rects.enter()
-        .append('rect');
-
-      // The default selection is the update selection
-      rects
-        .attr('x', x(0))
-        .attr('y', function(d, i) {
-          return y(d.product);
-        })
-        .attr('height', y.rangeBand())
+      // When we enter, we add the DOM element
+      // and set up the things that won't change
+      var enterRects = rects.enter()
+        .append('rect')
+          .attr('x', x(0))
+          .attr('y', function(d, i) {
+            return y(d.product);
+          })
+          .attr('height', y.bandwidth())
+
+      // "rects" represents the update selection, we need to
+      // manually merge it with the enter selection to update
+      // all rects at the same time
+      rects.merge(enterRects)
         .attr('width', function(d, i) {
           return x(d.count);
         });
@@ -94,20 +97,24 @@
       var rects = svg.selectAll('rect')
         .data(sales, function(d, i) { return d.product });
 
-      // When we enter, we only want to add the rect
-      rects.enter()
-        .append('rect');
-
-      rects.transition()
+      // When we enter, we add the DOM element
+      // and set up the things that won't change
+      var enterRects = rects.enter()
+        .append('rect')
+          .attr('x', x(0))
+          .attr('y', function(d, i) {
+            return y(d.product);
+          })
+          .attr('height', y.bandwidth())
+          .attr('width', function(d, i) {
+            return x(d.count);
+          });
+
+      rects.merge(enterRects).transition()
         .duration(1000)
-        .attr('x', x(0))
-        .attr('y', function(d, i) {
-          return y(d.product);
-        })
-        .attr('height', y.rangeBand())
-        .attr('width', function(d, i) {
-          return x(d.count);
-        });
+          .attr('width', function(d, i) {
+            return x(d.count);
+          });
     };
 
     update();
diff --git a/javascripts/parts-of-a-graph.js b/javascripts/parts-of-a-graph.js
@@ -37,19 +37,15 @@
   var width = 350,
       height = 120,
       margin = { top: 10, right: 50, bottom: 30, left: 50 },
-      x = d3.time.scale()
+      x = d3.scaleTime()
           .range([0, width])
           .domain(d3.extent(data, getDate)),
-      y = d3.scale.linear()
+      y = d3.scaleLinear()
           .range([height, 0])
           .domain([0, d3.max(data, getAmount)]),
-      xAxis = d3.svg.axis()
-               .scale(x)
-               .orient('bottom')
+      xAxis = d3.axisBottom(x)
                .ticks(3),
-      yAxis = d3.svg.axis()
-              .scale(y)
-              .orient('left')
+      yAxis = d3.axisLeft(y)
               .tickFormat(d3.format('$,d'))
               .ticks(5);
 
@@ -69,7 +65,7 @@
     .attr('class', 'y axis')
     .call(yAxis);
 
-  var line = d3.svg.line()
+  var line = d3.line()
       .x(function(d) { return x(getDate(d)) })
       .y(function(d) { return y(getAmount(d)) })
 
diff --git a/z02-parts-of-a-graph.md b/z02-parts-of-a-graph.md
@@ -163,7 +163,7 @@ Here is how we set up the y-scale for the above money example:
 <div class="example-row-1">
   <div class="example">
     {% highlight javascript %}
-var y = d3.scale.linear()
+var y = d3.scaleLinear()
   .domain([0, 80]) // $0 to $80
   .range([200, 0]); // Seems backwards because SVG is y-down
     {% endhighlight %}
@@ -203,7 +203,7 @@ We can even do the same things with dates!
 <div class="example-row-1">
   <div class="example">
     {% highlight javascript %}
-var x = d3.time.scale()
+var x = d3.scaleTime()
     .domain([
       new Date(Date.parse('2014-01-01')),
       new Date(Date.parse('2014-04-01'))
diff --git a/z03-data-binding.md b/z03-data-binding.md
@@ -136,10 +136,10 @@ attribute editing helpers to configure each circle per its data point.
 var maxCount = d3.max(sales, function(d, i) {
   return d.count;
 });
-var x = d3.scale.linear()
+var x = d3.scaleLinear()
   .range([0, 300])
   .domain([0, maxCount]);
-var y = d3.scale.ordinal()
+var y = d3.scaleOrdinal()
   .rangeRoundBands([0, 75])
   .domain(sales.map(function(d, i) {
     return d.product;
@@ -164,7 +164,7 @@ newRects.append('rect')
     </div>
 
     <p>
-      The <kbd>d3.scale.ordinal()</kbd> helps us create buckets for each
+      The <kbd>d3.scaleOrdinal()</kbd> helps us create buckets for each
       element. In this case, that's one per product.
     </p>
     <p>
@@ -390,23 +390,22 @@ function toggle() {
 
 function update() {
   var rects = svg.selectAll('rect')
-    .data(sales, function(d, i) {
-      return d.product
-    });
-
-  // When we enter, we just want to create the rect,
-  rects.enter()
-    .append('rect');
-
-  // We configure the rects here so the values
-  // apply to it applies to both new and existing
-  // rects
-  rects
-    .attr('x', x(0))
-    .attr('y', function(d, i) {
-      return y(d.product);
-    })
-    .attr('height', y.rangeBand())
+    .data(sales, function(d, i) { return d.product });
+
+  // When we enter, we add the DOM element
+  // and set up the things that won't change
+  var enterRects = rects.enter()
+    .append('rect')
+      .attr('x', x(0))
+      .attr('y', function(d, i) {
+        return y(d.product);
+      })
+      .attr('height', y.bandwidth())
+
+  // "rects" represents the update selection, we need to
+  // manually merge it with the enter selection to update
+  // all rects at the same time
+  rects.merge(enterRects)
     .attr('width', function(d, i) {
       return x(d.count);
     });
@@ -440,24 +439,27 @@ function toggle() {
 
 function update() {
   var rects = svg.selectAll('rect')
-    .data(sales, function(d, i) {
-      return d.product
-    });
-
-  rects.enter()
-    .append('rect');
-
-  rects.transition() // NEW!
-    .duration(1000)  // also NEW!
-    .attr('x', x(0))
-    .attr('y', function(d, i) {
-      return y(d.product);
-    })
-    .attr('height', y.rangeBand())
-    .attr('width', function(d, i) {
-      return x(d.count);
-    });
+    .data(sales, function(d, i) { return d.product });
+
+  var enterRects = rects.enter()
+    .append('rect')
+      .attr('x', x(0))
+      .attr('y', function(d, i) {
+        return y(d.product);
+      })
+      .attr('height', y.bandwidth())
+      .attr('width', function(d, i) {
+        return x(d.count);
+      });
+
+  rects.merge(enterRects)
+    .transition() // NEW
+    .duration(1000) // Also NEW
+      .attr('width', function(d, i) {
+        return x(d.count);
+      });
 };
+
     {% endhighlight %}
   </div>
 
diff --git a/z04-examples.md b/z04-examples.md
