Reuse transitions: beware deletion.

.idea/workspace.xml

@@ -2,9 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -37,8 +35,8 @@
       <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="154">
-              <caret line="11" column="22" selection-start-line="11" selection-start-column="22" selection-end-line="11" selection-end-column="22" />
+            <state relative-caret-position="294">
+              <caret line="21" column="24" selection-start-line="21" selection-start-column="24" selection-end-line="21" selection-end-column="24" />
               <folding />
             </state>
           </provider>
@@ -47,18 +45,8 @@
       <file leaf-file-name="app.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="238">
-              <caret line="17" column="0" selection-start-line="17" selection-start-column="0" selection-end-line="17" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="package.json" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/package.json">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="224">
-              <caret line="15" column="5" selection-start-line="15" selection-start-column="5" selection-end-line="15" selection-end-column="5" />
+            <state relative-caret-position="336">
+              <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -86,8 +74,8 @@
         <option value="$PROJECT_DIR$/data/AMZN.csv" />
         <option value="$PROJECT_DIR$/data/GOOG.csv" />
         <option value="$PROJECT_DIR$/data/data.json" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/package.json" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/src/app.js" />
       </list>
     </option>
@@ -300,12 +288,12 @@
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
       <workItem from="1478438832989" duration="10955000" />
-      <workItem from="1478462386719" duration="1414000" />
+      <workItem from="1478462386719" duration="2091000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="20977000" />
+    <option name="totallyTimeSpent" value="21654000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="916" height="877" extended-state="0" />
@@ -490,26 +478,26 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="154">
-          <caret line="11" column="22" selection-start-line="11" selection-start-column="22" selection-end-line="11" selection-end-column="22" />
+        <state relative-caret-position="224">
+          <caret line="15" column="5" selection-start-line="15" selection-start-column="5" selection-end-line="15" selection-end-column="5" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
+    <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="224">
-          <caret line="15" column="5" selection-start-line="15" selection-start-column="5" selection-end-line="15" selection-end-column="5" />
+        <state relative-caret-position="294">
+          <caret line="21" column="24" selection-start-line="21" selection-start-column="24" selection-end-line="21" selection-end-column="24" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="238">
-          <caret line="17" column="0" selection-start-line="17" selection-start-column="0" selection-end-line="17" selection-end-column="0" />
+        <state relative-caret-position="336">
+          <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
           <folding />
         </state>
       </provider>

index.html

@@ -5,17 +5,21 @@
     <title>Egghead D3 v4</title>
     <script src="node_modules/d3/build/d3.js"></script>
     <style>
-      #block {
+      .block {
         background: lightgray;
         border: 1px solid black;
-        width: 100px;
-        height: 100px;
+        width: 50px;
+        height: 50px;
+        margin-bottom: 1em;
       }
     </style>
   </head>
 
   <body>
-    <div id="block"></div>
+    <div class="block a"></div>
+    <div class="block b"></div>
+
+    <button onclick="go()">Go</button>
 
     <script src="data/data.json"></script>
     <script src="src/responsivefy.js"></script>

src/app.js

@@ -1,17 +1,24 @@
+/*
+var t = d3.transition()
+  .delay(1000)
+  .duration(1000);
+// Gets created, executed...and deleted since the main file is done running.
+*/
 
-d3.select("#block")
-  .transition()
-    .duration(600) // msec
-    .delay(750)
-    .ease(d3.easeBounceOut)
-    .style("width", "400px")
-  .transition()
-    // Will use the same values as the previous transition if not overridden.
-    // .duration(600)
-    // .delay(750)
-    // .ease(d3.easeBounceOut)
-    .style("height", "600px")
-  .transition()
-    .duration(2000)
-    .ease(d3.easeQuadOut)
-    .style("background-color", "purple");
+function go() {
+  // So create and use it immediately before it gets deleted.
+  var t = d3.transition()
+    .delay(1000)
+    .duration(1000);
+
+  d3.selectAll('.block')
+    .transition(t)
+    .style('width', '400px');
+
+  d3.select('.a')
+    .transition(t)
+    .style('background-color', 'orange');
+  d3.select('.b')
+    .transition(t)
+    .style('background-color', 'blue');
+}