Start from an empty chart and simple HTML content.

.idea/workspace.xml

@@ -2,7 +2,6 @@
 <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$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
@@ -28,8 +27,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="252">
-              <caret line="18" column="17" selection-start-line="18" selection-start-column="17" selection-end-line="18" selection-end-column="17" />
+            <state relative-caret-position="168">
+              <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
               <folding />
             </state>
           </provider>
@@ -38,8 +37,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="532">
-              <caret line="38" column="38" selection-start-line="38" selection-start-column="38" selection-end-line="38" selection-end-column="38" />
+            <state relative-caret-position="322">
+              <caret line="23" column="0" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -56,6 +55,17 @@
       </list>
     </option>
   </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/src/app.js" />
+      </list>
+    </option>
+  </component>
   <component name="JsBowerSettings">
     <exe-path />
     <config-path />
@@ -148,12 +158,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="9475000" />
+      <workItem from="1478355760990" duration="9774000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="9000" />
+    <option name="totallyTimeSpent" value="308000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -283,16 +293,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="252">
-          <caret line="18" column="17" selection-start-line="18" selection-start-column="17" selection-end-line="18" selection-end-column="17" />
+        <state relative-caret-position="168">
+          <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="532">
-          <caret line="38" column="38" selection-start-line="38" selection-start-column="38" selection-end-line="38" selection-end-column="38" />
+        <state relative-caret-position="322">
+          <caret line="23" column="0" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
           <folding />
         </state>
       </provider>

index.html

@@ -15,11 +15,7 @@
   </head>
 
   <body>
-    <div class="chart">
-      <div>Billy</div>
-      <div>Cindy</div>
-      <div>Walter</div>
-    </div>
+    <div class="chart"></div>
 
     <script src="src/app.js"></script>
   </body>

src/app.js

@@ -9,34 +9,15 @@ const scores = [
 /**
  * @see https://bost.ocks.org/mike/join/
  */
-const update = d3.select('.chart')
+d3.select('.chart')
   .selectAll('div')
   // A "data join": merge the data with that selection.
-  .data(scores, function (d) {
-    return d ? d.name : this.innerText;
-  })
-  // Initially (empty div), 5 elements in Enter, 0 in update, 0 in exit.
-  // Returns the update selection by default.
-  // When we add divs for Billy and Cindy, they are already mapped, so won't get
-  // text added and color set at the next step, (by default), so we set them now:
-  // they are UPDATED, while...
-    .style('color', 'blue');
-
-// access the Enter selection
-const enter = update.enter()
-  // Append a div for everything in the data which doesn't already have a DOM element.
-  // ...Alicy, David and Emily are being created (appended)
-  .append('div') // create the divs
-  // populate them. The function receives each data element as its first argument.
-  // D3 convention: "d" is the name for the data element.
-  .text(d => d.name)
-  .style('color', 'green')
-
-update.exit() // access the Exit selection
-  .remove();
-
-update.merge(enter)
-  .style('width', d => d.score + 'px')
-  .style('height', '50px')
-  .style('background-color', 'lightgreen')
-  .style('border', '1px solid black');
+  .data(scores)
+  .enter()
+    .append('div')
+    .text(d => d.name)
+    .style('color', 'green')
+    .style('width', d => d.score + 'px')
+    .style('height', '50px')
+    .style('background-color', 'lightgreen')
+    .style('border', '1px solid black');