Create and remove DOM elements.

.idea/workspace.xml

@@ -2,8 +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>
     <ignored path="v4-tutorial.iws" />
@@ -28,8 +26,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="210">
-              <caret line="15" column="19" selection-start-line="15" selection-start-column="19" selection-end-line="15" selection-end-column="19" />
+            <state relative-caret-position="420">
+              <caret line="30" column="9" selection-start-line="30" selection-start-column="9" selection-end-line="30" selection-end-column="9" />
               <folding />
             </state>
           </provider>
@@ -38,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="420">
-              <caret line="30" column="0" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" />
+            <state relative-caret-position="378">
+              <caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -263,12 +261,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="6262000" />
+      <workItem from="1478355760990" duration="6995000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="6262000" />
+    <option name="totallyTimeSpent" value="6995000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1032" height="877" extended-state="0" />
@@ -398,16 +396,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="15" column="19" selection-start-line="15" selection-start-column="19" selection-end-line="15" selection-end-column="19" />
+        <state relative-caret-position="420">
+          <caret line="30" column="9" selection-start-line="30" selection-start-column="9" selection-end-line="30" selection-end-column="9" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="420">
-          <caret line="30" column="0" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" />
+        <state relative-caret-position="378">
+          <caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
           <folding />
         </state>
       </provider>

src/app.js

@@ -1,30 +1,26 @@
-const secondLink = d3.selectAll('a:nth-child(2)');
+d3.select('.title') // returns a first selection
+  // D3 convention: things that create a new selection are indented 2 spaces
+  .append('div') // returns a NEW selection
+    // D3 convention: things that modify current selection are
+    // indented 4 spaces
+    .html('Inventory <b>SALE</b>')
+    .classed('red', true)
+  .append('button')
+    .style('display', 'block')
+    .text('submit');
 
-console.log(secondLink.attr('href'));
-// 1 arg: getter, 2 args: setter
-secondLink.attr('href', 'http://google.com');
-console.log(secondLink.attr('href'));
+d3.select('.title')
+  // defaults to inserting as last child, i.e. appending.
+  .insert('button', 'a:first-child')
+    .html('Flash event');
 
-d3.selectAll('a:nth-child(2)')
-  // 1 arg: getter, 2 args: setter
-  .style('color', 'green');
+d3.select('.title')
+  .insert('button', 'a:nth-child(4)')
+  .html('Moar buttons');
 
-const thirdLink = d3.selectAll('a:nth-child(3)')
-  // attr(elem, val) returns the selection on which it has been called
-  .attr('href', 'http://bing.com')
-  // Usually, use CSS rather than inline styles.
-  // 1 arg: getter, 2 args: setter
-  .style('color', 'orange');
-console.log(thirdLink.attr('href'));
+/* The 1st argument to insert() is mostly like the ones passed
+  to document.createElement().
+ */
 
-const firstChild = d3.selectAll('a:nth-child(1)')
-  // Can't use "class" as it's a JS keyword.
-  .classed('red', true);
-console.log(firstChild.attr('class'));
-
-// 0 arg: getter, 1 args: setter
-d3.select('a.action')
-  .text('Inventory');
-
-d3.select('a')
-  .html('About <b>SALE</b>')
+d3.select('.action')
+  .remove();