mbostock · January 26, 2022 14:32 · Jul 6, 2016 · Jul 6, 2016 · Feb 9, 2016 · Oct 30, 2015
diff --git a/index.html b/index.html
@@ -59,9 +59,9 @@
   .transition()
     .duration(500)
     .ease(d3.easeLinear)
-    .on("start", slide);
+    .on("start", tick);
 
-function slide() {
+function tick() {
 
   // Push a new data point onto the back.
   data.push(random());
@@ -75,7 +75,7 @@
   d3.active(this)
       .attr("transform", "translate(" + x(0) + ",0)")
     .transition()
-      .on("start", slide);
+      .on("start", tick);
 
   // Pop the old data point off the front.
   data.shift();

diff --git a/index.html b/index.html
@@ -2,95 +2,82 @@
 <meta charset="utf-8">
 <style>
 
-svg {
-  font: 10px sans-serif;
-}
-
 .line {
   fill: none;
   stroke: #000;
   stroke-width: 1.5px;
 }
 
-.axis path,
-.axis line {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
 </style>
-<body>
-<script src="//d3js.org/d3.v3.min.js"></script>
+<svg width="960" height="500"></svg>
+<script src="//d3js.org/d3.v4.min.js"></script>
 <script>
 
 var n = 40,
-    random = d3.random.normal(0, .2),
+    random = d3.randomNormal(0, .2),
     data = d3.range(n).map(random);
 
-var margin = {top: 20, right: 20, bottom: 20, left: 40},
-    width = 960 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;
+var svg = d3.select("svg"),
+    margin = {top: 20, right: 20, bottom: 20, left: 40},
+    width = +svg.attr("width") - margin.left - margin.right,
+    height = +svg.attr("height") - margin.top - margin.bottom,
+    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-var x = d3.scale.linear()
+var x = d3.scaleLinear()
     .domain([1, n - 2])
     .range([0, width]);
 
-var y = d3.scale.linear()
+var y = d3.scaleLinear()
     .domain([-1, 1])
     .range([height, 0]);
 
-var line = d3.svg.line()
-    .interpolate("basis")
+var line = d3.line()
+    .curve(d3.curveBasis)
     .x(function(d, i) { return x(i); })
     .y(function(d, i) { return y(d); });
 
-var svg = d3.select("body").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-svg.append("defs").append("clipPath")
+g.append("defs").append("clipPath")
     .attr("id", "clip")
   .append("rect")
     .attr("width", width)
     .attr("height", height);
 
-svg.append("g")
-    .attr("class", "x axis")
+g.append("g")
+    .attr("class", "axis axis--x")
     .attr("transform", "translate(0," + y(0) + ")")
-    .call(d3.svg.axis().scale(x).orient("bottom"));
+    .call(d3.axisBottom(x));
 
-svg.append("g")
-    .attr("class", "y axis")
-    .call(d3.svg.axis().scale(y).orient("left"));
+g.append("g")
+    .attr("class", "axis axis--y")
+    .call(d3.axisLeft(y));
 
-var path = svg.append("g")
+g.append("g")
     .attr("clip-path", "url(#clip)")
   .append("path")
     .datum(data)
     .attr("class", "line")
-    .attr("d", line);
-
-tick();
+  .transition()
+    .duration(500)
+    .ease(d3.easeLinear)
+    .on("start", slide);
 
-function tick() {
+function slide() {
 
-  // push a new data point onto the back
+  // Push a new data point onto the back.
   data.push(random());
 
-  // redraw the line, and slide it to the left
-  path
+  // Redraw the line.
+  d3.select(this)
       .attr("d", line)
-      .attr("transform", null)
-    .transition()
-      .duration(500)
-      .ease("linear")
+      .attr("transform", null);
+
+  // Slide it to the left.
+  d3.active(this)
       .attr("transform", "translate(" + x(0) + ",0)")
-      .each("end", tick);
+    .transition()
+      .on("start", slide);
 
-  // pop the old data point off the front
+  // Pop the old data point off the front.
   data.shift();
 
 }

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 
 var n = 40,

diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>
 
 var n = 40,

diff --git a/index.html b/index.html
@@ -12,22 +12,23 @@
   stroke-width: 1.5px;
 }
 
-.axis path, .axis line {
+.axis path,
+.axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
 }
 
 </style>
 <body>
-<script src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
 var n = 40,
     random = d3.random.normal(0, .2),
     data = d3.range(n).map(random);
 
-var margin = {top: 10, right: 10, bottom: 20, left: 40},
+var margin = {top: 20, right: 20, bottom: 20, left: 40},
     width = 960 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 

diff --git a/README.md b/README.md
@@ -1,29 +1,3 @@
-D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:
+This example is the third of three in the [Path Transitions tutorial](http://bost.ocks.org/mike/path/); see the [previous example](/mbostock/1642874) for context.
 
-    M x0, y0 L x1, y1 L x2, y2 L x3, y3 
-       ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
-    M x0, y1 L x1, y2 L x2, y3 L x3, y4 
-
-For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing—you don't see the path slide to the left as intended.
-
-What you want to happen here is something like this: 
-
-    M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
-       ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
-    M xL, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4 
-
-Where xL is some negative value off the left side, and xR is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to  the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩. 
-
-Alternatively, you can achieve this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. In that case, the path is redrawn like this:
-
-    M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
-
-Then, a transform transition is applied:
-
-    translate(0)
-              ↓
-    translate(xL)
-
-Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.
-
-See also the [linear interpolation version](http://bl.ocks.org/1642874).
+When transitioning a transform on a path using basis interpolation, you must clip the path by two additional control points so that the change in tangent is not visible while the path slides left.
diff --git a/index.html b/index.html
@@ -58,7 +58,7 @@
 
 svg.append("g")
     .attr("class", "x axis")
-    .attr("transform", "translate(0," + height + ")")
+    .attr("transform", "translate(0," + y(0) + ")")
     .call(d3.svg.axis().scale(x).orient("bottom"));
 
 svg.append("g")
@@ -68,7 +68,7 @@
 var path = svg.append("g")
     .attr("clip-path", "url(#clip)")
   .append("path")
-    .data([data])
+    .datum(data)
     .attr("class", "line")
     .attr("d", line);
 
@@ -86,7 +86,7 @@
     .transition()
       .duration(500)
       .ease("linear")
-      .attr("transform", "translate(" + x(0) + ")")
+      .attr("transform", "translate(" + x(0) + ",0)")
       .each("end", tick);
 
   // pop the old data point off the front

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -26,4 +26,4 @@ Then, a transform transition is applied:
 
 Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.
 
-Note that for charts with spline interpolation, you’ll need to crop the visible part of the line by an extra point, so that the change in tangent is not visible.
+See also the [linear interpolation version](http://bl.ocks.org/1642874).
diff --git a/index.html b/index.html
@@ -32,14 +32,15 @@
     height = 500 - margin.top - margin.bottom;
 
 var x = d3.scale.linear()
-    .domain([0, n - 1])
+    .domain([1, n - 2])
     .range([0, width]);
 
 var y = d3.scale.linear()
     .domain([-1, 1])
     .range([height, 0]);
 
 var line = d3.svg.line()
+    .interpolate("basis")
     .x(function(d, i) { return x(i); })
     .y(function(d, i) { return y(d); });
 
@@ -85,7 +86,7 @@
     .transition()
       .duration(500)
       .ease("linear")
-      .attr("transform", "translate(" + x(-1) + ")")
+      .attr("transform", "translate(" + x(0) + ")")
       .each("end", tick);
 
   // pop the old data point off the front

diff --git a/README.md b/README.md
@@ -24,4 +24,6 @@ Then, a transform transition is applied:
               ↓
     translate(xL)
 
-Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.
+Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.
+
+Note that for charts with spline interpolation, you’ll need to crop the visible part of the line by an extra point, so that the change in tangent is not visible.
diff --git a/index.html b/index.html
@@ -23,8 +23,8 @@
 <script src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
 <script>
 
-var n = 20,
-    random = d3.random.normal(0, .1),
+var n = 40,
+    random = d3.random.normal(0, .2),
     data = d3.range(n).map(random);
 
 var margin = {top: 10, right: 10, bottom: 20, left: 40},
@@ -72,7 +72,6 @@
     .attr("d", line);
 
 tick();
-setInterval(tick, 1000);
 
 function tick() {
 
@@ -84,9 +83,10 @@
       .attr("d", line)
       .attr("transform", null)
     .transition()
-      .duration(1000)
+      .duration(500)
       .ease("linear")
-      .attr("transform", "translate(" + x(-1) + ")");
+      .attr("transform", "translate(" + x(-1) + ")")
+      .each("end", tick);
 
   // pop the old data point off the front
   data.shift();

diff --git a/README.md b/README.md
@@ -1,17 +1,27 @@
 D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:
 
-    Mx0,y0Lx1,y1Lx2,y2Lx3,y3 
-      ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
-    Mx0,y1Lx1,y2Lx2,y3Lx3,y4 
+    M x0, y0 L x1, y1 L x2, y2 L x3, y3 
+       ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
+    M x0, y1 L x1, y2 L x2, y3 L x3, y4 
 
 For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing—you don't see the path slide to the left as intended.
 
 What you want to happen here is something like this: 
 
-    Mx0,y0Lx1,y1Lx2,y2Lx3,y3LxR,y4 
-      ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
-    MxL,y0Lx0,y1Lx1,y2Lx2,y3Lx3,y4 
+    M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
+       ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
+    M xL, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4 
 
 Where xL is some negative value off the left side, and xR is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to  the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩. 
 
-You can also approximate this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. 
+Alternatively, you can achieve this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. In that case, the path is redrawn like this:
+
+    M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
+
+Then, a transform transition is applied:
+
+    translate(0)
+              ↓
+    translate(xL)
+
+Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 
 </style>
 <body>
-<script src="d3.js?2.7.2"></script>
+<script src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
 <script>
 
 var n = 20,

diff --git a/README.md b/README.md
@@ -1,16 +1,17 @@
-D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. The default behavior when interpolating two paths is like this:
+D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:
 
-    x0,y0 x1,y1 x2,y2 x3,y3 
-    x0,y1 x1,y2 x2,y3 x3,y4 
+    Mx0,y0Lx1,y1Lx2,y2Lx3,y3 
+      ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
+    Mx0,y1Lx1,y2Lx2,y3Lx3,y4 
 
-So, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing—you don't see the path 
-slide to the left as intended.
+For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing—you don't see the path slide to the left as intended.
 
 What you want to happen here is something like this: 
 
-    x0,y0 x1,y1 x2,y2 x3,y3 xR,y4 
-    xL,y0 x0,y1 x1,y2 x2,y3 x3,y4 
+    Mx0,y0Lx1,y1Lx2,y2Lx3,y3LxR,y4 
+      ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
+    MxL,y0Lx0,y1Lx1,y2Lx2,y3Lx3,y4 
 
-Where xL is some negative value off the left side, and xR is some  positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to  the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩. 
+Where xL is some negative value off the left side, and xR is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to  the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩. 
 
-You can also approximate this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. 
+You can also approximate this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. 
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. The default behavior when interpolating two paths is like this:
+
+    x0,y0 x1,y1 x2,y2 x3,y3 
+    x0,y1 x1,y2 x2,y3 x3,y4 
+
+So, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing—you don't see the path 
+slide to the left as intended.
+
+What you want to happen here is something like this: 
+
+    x0,y0 x1,y1 x2,y2 x3,y3 xR,y4 
+    xL,y0 x0,y1 x1,y2 x2,y3 x3,y4 
+
+Where xL is some negative value off the left side, and xR is some  positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to  the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩. 
+
+You can also approximate this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. 
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+svg {
+  font: 10px sans-serif;
+}
+
+.line {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+.axis path, .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+</style>
+<body>
+<script src="d3.js?2.7.2"></script>
+<script>
+
+var n = 20,
+    random = d3.random.normal(0, .1),
+    data = d3.range(n).map(random);
+
+var margin = {top: 10, right: 10, bottom: 20, left: 40},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+var x = d3.scale.linear()
+    .domain([0, n - 1])
+    .range([0, width]);
+
+var y = d3.scale.linear()
+    .domain([-1, 1])
+    .range([height, 0]);
+
+var line = d3.svg.line()
+    .x(function(d, i) { return x(i); })
+    .y(function(d, i) { return y(d); });
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+svg.append("defs").append("clipPath")
+    .attr("id", "clip")
+  .append("rect")
+    .attr("width", width)
+    .attr("height", height);
+
+svg.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.svg.axis().scale(x).orient("bottom"));
+
+svg.append("g")
+    .attr("class", "y axis")
+    .call(d3.svg.axis().scale(y).orient("left"));
+
+var path = svg.append("g")
+    .attr("clip-path", "url(#clip)")
+  .append("path")
+    .data([data])
+    .attr("class", "line")
+    .attr("d", line);
+
+tick();
+setInterval(tick, 1000);
+
+function tick() {
+
+  // push a new data point onto the back
+  data.push(random());
+
+  // redraw the line, and slide it to the left
+  path
+      .attr("d", line)
+      .attr("transform", null)
+    .transition()
+      .duration(1000)
+      .ease("linear")
+      .attr("transform", "translate(" + x(-1) + ")");
+
+  // pop the old data point off the front
+  data.shift();
+
+}
+
+</script>
No results found