Step 1: static chart.

.idea/workspace.xml

@@ -2,6 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
+      <change type="DELETED" beforePath="$PROJECT_DIR$/data/data.json" afterPath="" />
+      <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$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
@@ -31,7 +33,28 @@
     <favorites_list name="v4-tutorial" />
   </component>
   <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300" />
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <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="280">
+              <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <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="630">
+              <caret line="45" column="47" selection-start-line="45" selection-start-column="47" selection-end-line="45" selection-end-column="47" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
   </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
@@ -138,20 +161,6 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="v4-tutorial" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="v4-tutorial" />
-              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="data" />
-              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
-            </PATH_ELEMENT>
-          </PATH>
         </subPane>
       </pane>
       <pane id="Scope">
@@ -267,18 +276,18 @@
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
       <workItem from="1478438832989" duration="10955000" />
-      <workItem from="1478462386719" duration="2991000" />
+      <workItem from="1478462386719" duration="3801000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="22554000" />
+    <option name="totallyTimeSpent" value="23364000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="916" height="877" extended-state="0" />
-    <editor active="false" />
+    <editor active="true" />
     <layout>
-      <window_info id="Project" active="true" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25743708" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25743708" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="true" content_ui="tabs" />
@@ -467,16 +476,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="406">
-          <caret line="29" column="0" selection-start-line="29" selection-start-column="0" selection-end-line="29" selection-end-column="0" />
+        <state relative-caret-position="280">
+          <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="378">
-          <caret line="27" column="17" selection-start-line="27" selection-start-column="17" selection-end-line="27" selection-end-column="17" />
+        <state relative-caret-position="630">
+          <caret line="45" column="47" selection-start-line="45" selection-start-column="47" selection-end-line="45" selection-end-column="47" />
           <folding />
         </state>
       </provider>

data/data.json

@@ -1,144 +0,0 @@
-[
-  {
-    "ticker": "AMZN",
-    "values": [
-      { "date": "2016/11/04","close": "755.0500" },
-      { "date": "2016/11/03","close": "767.0300" },
-      { "date": "2016/11/02","close": "765.5600" },
-      { "date": "2016/11/01","close": "785.4100" },
-      { "date": "2016/10/31", "close": "789.8200" },
-      { "date": "2016/10/28", "close": "776.3200" },
-      { "date": "2016/10/27", "close": "818.3600" },
-      { "date": "2016/10/26", "close": "822.5900" },
-      { "date": "2016/10/25", "close": "835.1800" },
-      { "date": "2016/10/24", "close": "838.0900" },
-      { "date": "2016/10/21", "close": "818.9900" },
-      { "date": "2016/10/20", "close": "810.3200" },
-      { "date": "2016/10/19", "close": "817.6900" },
-      { "date": "2016/10/18", "close": "817.6500" },
-      { "date": "2016/10/17", "close": "812.9500" },
-      { "date": "2016/10/14", "close": "822.9600" },
-      { "date": "2016/10/13", "close": "829.2800" },
-      { "date": "2016/10/12", "close": "834.0900" },
-      { "date": "2016/10/11", "close": "831.0000" },
-      { "date": "2016/10/10", "close": "841.7100" },
-      { "date": "2016/10/07", "close": "839.4300" },
-      { "date": "2016/10/06", "close": "841.6600" },
-      { "date": "2016/10/05", "close": "844.3600" },
-      { "date": "2016/10/04", "close": "834.0300" },
-      { "date": "2016/10/03", "close": "836.7400" },
-      { "date": "2016/09/30", "close": "837.3100" },
-      { "date": "2016/09/29", "close": "829.0500" },
-      { "date": "2016/09/28", "close": "828.7200" },
-      { "date": "2016/09/27", "close": "816.1100" },
-      { "date": "2016/09/26", "close": "799.1600" },
-      { "date": "2016/09/23", "close": "805.7500" },
-      { "date": "2016/09/22", "close": "804.7000" },
-      { "date": "2016/09/21", "close": "789.7400" },
-      { "date": "2016/09/20", "close": "780.2200" },
-      { "date": "2016/09/19", "close": "775.1000" },
-      { "date": "2016/09/16", "close": "778.5200" },
-      { "date": "2016/09/15", "close": "769.6900" },
-      { "date": "2016/09/14", "close": "761.0900" },
-      { "date": "2016/09/13", "close": "761.0100" },
-      { "date": "2016/09/12", "close": "771.4900" },
-      { "date": "2016/09/09", "close": "760.1400" },
-      { "date": "2016/09/08", "close": "784.0600" },
-      { "date": "2016/09/07", "close": "784.4800" },
-      { "date": "2016/09/06", "close": "788.8700" },
-      { "date": "2016/09/02", "close": "772.4400" },
-      { "date": "2016/09/01", "close": "770.6200" },
-      { "date": "2016/08/31", "close": "769.1600" },
-      { "date": "2016/08/30", "close": "767.5800" },
-      { "date": "2016/08/29", "close": "771.2900" },
-      { "date": "2016/08/26", "close": "769.0000" },
-      { "date": "2016/08/25", "close": "759.2200" },
-      { "date": "2016/08/24", "close": "757.2500" },
-      { "date": "2016/08/23", "close": "762.4500" },
-      { "date": "2016/08/22", "close": "759.4800" },
-      { "date": "2016/08/19", "close": "757.3100" },
-      { "date": "2016/08/18", "close": "764.4600" },
-      { "date": "2016/08/17", "close": "764.6300" },
-      { "date": "2016/08/16", "close": "764.0400" },
-      { "date": "2016/08/15", "close": "768.4900" },
-      { "date": "2016/08/12", "close": "772.5600" },
-      { "date": "2016/08/11", "close": "771.2400" },
-      { "date": "2016/08/10", "close": "768.5600" },
-      { "date": "2016/08/09", "close": "768.3100" },
-      { "date": "2016/08/08", "close": "766.5600" },
-      { "date": "2016/08/05", "close": "765.9800" },
-      { "date": "2016/08/04", "close": "760.7700" }
-    ]
-  },
-  {
-    "ticker": "GOOG",
-    "values": [
-      { "date": "2016/11/04", "close": "762.0200" },
-      { "date": "2016/11/03", "close": "762.1300" },
-      { "date": "2016/11/02", "close": "768.7000" },
-      { "date": "2016/11/01", "close": "783.6100" },
-      { "date": "2016/10/31", "close": "784.5400" },
-      { "date": "2016/10/28", "close": "795.3700" },
-      { "date": "2016/10/27", "close": "795.3500" },
-      { "date": "2016/10/26", "close": "799.0700" },
-      { "date": "2016/10/25", "close": "807.6700" },
-      { "date": "2016/10/24", "close": "813.1100" },
-      { "date": "2016/10/21", "close": "799.3700" },
-      { "date": "2016/10/20", "close": "796.9700" },
-      { "date": "2016/10/19", "close": "801.5600" },
-      { "date": "2016/10/18", "close": "795.2600" },
-      { "date": "2016/10/17", "close": "779.9600" },
-      { "date": "2016/10/14", "close": "778.5300" },
-      { "date": "2016/10/13", "close": "778.1900" },
-      { "date": "2016/10/12", "close": "786.1400" },
-      { "date": "2016/10/11", "close": "783.0700" },
-      { "date": "2016/10/10", "close": "785.9400" },
-      { "date": "2016/10/07", "close": "775.0800" },
-      { "date": "2016/10/06", "close": "776.8600" },
-      { "date": "2016/10/05", "close": "776.4700" },
-      { "date": "2016/10/04", "close": "776.4300" },
-      { "date": "2016/10/03", "close": "772.5600" },
-      { "date": "2016/09/30", "close": "777.2900" },
-      { "date": "2016/09/29", "close": "775.0100" },
-      { "date": "2016/09/28", "close": "781.5600" },
-      { "date": "2016/09/27", "close": "783.0100" },
-      { "date": "2016/09/26", "close": "774.2100" },
-      { "date": "2016/09/23", "close": "786.9000" },
-      { "date": "2016/09/22", "close": "787.2100" },
-      { "date": "2016/09/21", "close": "776.2200" },
-      { "date": "2016/09/20", "close": "771.4100" },
-      { "date": "2016/09/19", "close": "765.7000" },
-      { "date": "2016/09/16", "close": "768.8800" },
-      { "date": "2016/09/15", "close": "771.7600" },
-      { "date": "2016/09/14", "close": "762.4900" },
-      { "date": "2016/09/13", "close": "759.6900" },
-      { "date": "2016/09/12", "close": "769.0200" },
-      { "date": "2016/09/09", "close": "759.6600" },
-      { "date": "2016/09/08", "close": "775.3200" },
-      { "date": "2016/09/07", "close": "780.3500" },
-      { "date": "2016/09/06", "close": "780.0800" },
-      { "date": "2016/09/02", "close": "771.4600" },
-      { "date": "2016/09/01", "close": "768.7800" },
-      { "date": "2016/08/31", "close": "767.0500" },
-      { "date": "2016/08/30", "close": "769.0900" },
-      { "date": "2016/08/29", "close": "772.1500" },
-      { "date": "2016/08/26", "close": "769.5400" },
-      { "date": "2016/08/25", "close": "769.4100" },
-      { "date": "2016/08/24", "close": "769.6400" },
-      { "date": "2016/08/23", "close": "772.0800" },
-      { "date": "2016/08/22", "close": "772.1500" },
-      { "date": "2016/08/19", "close": "775.4200" },
-      { "date": "2016/08/18", "close": "777.5000" },
-      { "date": "2016/08/17", "close": "779.9100" },
-      { "date": "2016/08/16", "close": "777.1400" },
-      { "date": "2016/08/15", "close": "782.4400" },
-      { "date": "2016/08/12", "close": "783.2200" },
-      { "date": "2016/08/11", "close": "784.8500" },
-      { "date": "2016/08/10", "close": "784.6800" },
-      { "date": "2016/08/09", "close": "784.2600" },
-      { "date": "2016/08/08", "close": "781.7600" },
-      { "date": "2016/08/05", "close": "782.2200" },
-      { "date": "2016/08/04", "close": "771.6100" }
-    ]
-  }
-]

index.html

@@ -5,24 +5,19 @@
     <title>Egghead D3 v4</title>
     <script src="node_modules/d3/build/d3.js"></script>
     <style>
-      .block {
+      .chart {
         background: lightgray;
         border: 1px solid black;
-        width: 50px;
-        height: 50px;
-        margin-bottom: 1em;
+      }
+      rect {
+        fill: steelblue;
       }
     </style>
   </head>
 
   <body>
-    <div class="block a"></div>
-    <div class="block b"></div>
-
-    <button onclick="go()">Go</button>
-    <button onclick="goNow()">Go now</button>
+    <div class="chart"></div>
 
-    <script src="data/data.json"></script>
     <script src="src/responsivefy.js"></script>
     <script src="src/app.js"></script>
   </body>

src/app.js

@@ -1,37 +1,46 @@
-/*
-var t = d3.transition()
-  .delay(1000)
-  .duration(1000);
-// Gets created, executed...and deleted since the main file is done running.
-*/
+var data = [
+  { name: "Alice", score: 37 },
+  { name: "Billy", score: 69 },
+  { name: "Confy", score: 86 },
+  { name: "David", score: 44 },
+  { name: "Emily", score: 59 }
+];
 
-function go() {
-  // So create and use it immediately before it gets deleted.
-  var t = d3.transition()
-    .delay(1000)
-    .duration(1000);
+var margin = { top: 10, right: 10, bottom: 30, left: 30 };
+var width = 400 - margin.left - margin.right;
+var height = 565 - margin.top - margin.bottom;
 
-  d3.selectAll('.block')
-    .transition(t)
-    .style('width', '400px');
+var svg = d3.select(".chart")
+  .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .call(responsivefy)
+  .append("g")
+    .attr("transform", `translate(${margin.left},${margin.top})`);
 
-  d3.select('.a')
-    .transition(t)
-    .style('background-color', 'orange');
-  d3.select('.b')
-    .transition(t)
-    .style('background-color', 'blue');
-}
+var xScale = d3.scaleBand()
+  .domain(data.map(d => d.name))
+  .range([0, width])
+  .padding(0.2);
 
-function configure(t, delay, duration) {
-  return t
-    .delay(delay)
-    .duration(duration);
-}
+svg
+  .append("g")
+    .attr("transform", `translate(0, ${height})`)
+  .call(d3.axisBottom(xScale));
 
-function goNow() {
-  d3.selectAll('.block')
-    .transition()
-      .call(configure, 1000, 1000)
-      .style('height', '300px');
-}
+var yScale = d3.scaleLinear()
+  .domain([0, 100])
+  .range([height, 0]);
+
+svg
+  .append("g")
+    .call(d3.axisLeft(yScale));
+
+svg.selectAll("rect")
+  .data(data)
+  .enter()
+  .append("rect")
+  .attr("x", d => xScale(d.name))
+  .attr("y", d => yScale(d.score))
+  .attr("width", d => xScale.bandwidth())
+  .attr("height", d => height - yScale(d.score));