SVG graphics containers and text: replace <rect> by <g><rect /><text /></g>.

.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$/index.html" afterPath="$PROJECT_DIR$/index.html" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -37,8 +36,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="336">
-              <caret line="24" column="25" selection-start-line="24" selection-start-column="25" selection-end-line="24" selection-end-column="25" />
+            <state relative-caret-position="462">
+              <caret line="33" column="0" selection-start-line="33" selection-start-column="0" selection-end-line="33" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -158,12 +157,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="10612000" />
+      <workItem from="1478355760990" duration="11208000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="1146000" />
+    <option name="totallyTimeSpent" value="1742000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -301,8 +300,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="336">
-          <caret line="24" column="25" selection-start-line="24" selection-start-column="25" selection-end-line="24" selection-end-column="25" />
+        <state relative-caret-position="462">
+          <caret line="33" column="0" selection-start-line="33" selection-start-column="0" selection-end-line="33" selection-end-column="0" />
           <folding />
         </state>
       </provider>

src/app.js

@@ -6,20 +6,28 @@ const scores = [
   { name: "Emily", score: 88 }
 ];
 
-/**
- * @see https://bost.ocks.org/mike/join/
- */
-d3.select(".chart")
+const bar = d3.select(".chart")
   .append('svg')
     .attr('width', 225)
     .attr('height', 300) // 5 * 33 = 165 < 300
-  .selectAll("rect")
+  .selectAll("g")
   .data(scores)
   .enter()
-    .append("rect")
+    // In D3, the SVG <g> is used as a generic container like a HTML <div>.
+    .append("g")
     // D3 convention: d for data, i for index.
-    .attr('y', (d, i) => i * 33)
-    .style("width", d => d.score)
-    .text(d => d.name)
-    // classed('bar', true) to set, classed('bar', false) to remove.
-    .attr("class", "bar");
+    // <g> doesn't support x,y, but needs transform.
+    // translate take a comma-separated list of x,y coordinates.
+    .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');
+
+// Notice how we don't pass data again or use a loop: they are included in the selection.
+bar.append('rect')
+  .style("width", d => d.score)
+  .text(d => d.name)
+  // classed('bar', true) to set, classed('bar', false) to remove.
+  .attr("class", "bar");
+
+bar.append('text')
+  .attr('y', 20)
+  .text(d => d.name);
+