Select DOM elements.

.idea/workspace.xml

@@ -2,11 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/watcherTasks.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/data/data.csv" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/data/data.json" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/data/data.tsv" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -31,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="112">
+            <state relative-caret-position="406">
-              <caret line="8" column="29" selection-start-line="8" selection-start-column="29" selection-end-line="8" selection-end-column="29" />
+              <caret line="29" column="0" selection-start-line="29" selection-start-column="0" selection-end-line="29" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -41,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="0">
+            <state relative-caret-position="350">
-              <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+              <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -65,11 +61,11 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/src/data.json" />
         <option value="$PROJECT_DIR$/src/data.csv" />
         <option value="$PROJECT_DIR$/src/data.tsv" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/src/app.js" />
       </list>
     </option>
@@ -151,20 +147,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" />
@@ -280,12 +262,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="4403000" />
+      <workItem from="1478355760990" duration="5293000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="4403000" />
+    <option name="totallyTimeSpent" value="5293000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1032" height="877" extended-state="0" />
@@ -373,14 +355,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="112">
-          <caret line="8" column="29" selection-start-line="8" selection-start-column="29" selection-end-line="8" selection-end-column="29" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/node_modules/d3-time/build/d3-time.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="280">
@@ -421,10 +395,18 @@
         </state>
       </provider>
     </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" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
+        <state relative-caret-position="350">
-          <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
           <folding />
         </state>
       </provider>

data/data.csv

@@ -1,6 +0,0 @@
-age,name
-23,Welch
-38,Villareal
-13,Sheryl
-37,Marshall
-37,Aimee

data/data.json

@@ -1,22 +0,0 @@
-[
-  {
-    "age": 23,
-    "name": "Welch"
-  },
-  {
-    "age": 38,
-    "name": "Villareal"
-  },
-  {
-    "age": 13,
-    "name": "Sheryl"
-  },
-  {
-    "age": 37,
-    "name": "Marshall"
-  },
-  {
-    "age": 37,
-    "name": "Aimee"
-  }
-]

data/data.tsv

@@ -1,6 +0,0 @@
-age	name
-23	Welch
-38	Villareal
-13	Sheryl
-37	Marshall
-37	Aimee

index.html

@@ -4,8 +4,26 @@
     <meta charset="UTF-8">
     <title>Egghead D3 v4</title>
     <script src="node_modules/d3/build/d3.js"></script>
+    <style>
+      div {
+        border: 1px solid black;
+        display: inline-block;
+      }
+      a {
+        display: block;
+      }
+    </style>
   </head>
+
   <body>
+    <div class="title">
+      <a href="#">About</a>
+      <a href="#">Products</a>
+      <a href="#">Contact</a>
+    </div>
+
+    <a class="action" href="#">Buy now</a>
+
     <script src="src/app.js"></script>
   </body>
 </html>

src/app.js

@@ -1,30 +1,24 @@
-d3.json('data/data.json', function (data) {
+const div = d3.select('div');
-  // The full parsed row set.
+console.log(div.nodes());
-  console.log(data);
-});
 
-d3.csv('data/data.csv', function (data) {
+const link = d3.select('a');
-  console.log(data);
+console.log(link.nodes()); // The first, in div.title
-});
 
-d3.tsv('data/data.tsv', function (data) {
+const links = d3.selectAll('a');
-  console.log(data);
+console.log(links.nodes()); // All 4
-});
 
-d3.json('data/data.json', function (data) {
+let divLinks = div.selectAll('a');
-  // const min = d3.min(data, d => d.age);
+console.log(divLinks.nodes()); // The three links in div.title
-  // const max = d3.max(data, d => d.age);
-  const extent = d3.extent(data, d => d.age);
 
-  console.log(extent);
+divLinks = d3.selectAll('div a');
-  const scale = d3.scaleLinear()
+console.log(divLinks.nodes()); // The three links in div.title
-   .domain(extent)
-   .range([0, 600]);
 
-  console.log(scale(24), scale(37));
+const actionLink = d3.select('.action');
+console.log(actionLink.nodes()); // The last link.
 
-  var ages = d3.set(data, d => d.age);
+const secondLink = d3.selectAll('a:nth-child(2)');
-  // Usable for a quantize scale.
+console.log(secondLink.nodes()); // The 2nd link in div.title: "products"
-  console.log(ages.values());
-});
 
+// Can use an object instead of a CSS selector.
+var allLinks = d3.selectAll(document.links);
+console.log(allLinks.size(), allLinks.nodes());