Load and inspect JSON / CSV / TSV data.

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="Babel" />
+</project>

.idea/workspace.xml

@@ -2,6 +2,11 @@
 <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="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" />
@@ -36,8 +41,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="126">
-              <caret line="9" column="0" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
+            <state relative-caret-position="0">
+              <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -62,6 +67,9 @@
       <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$/src/app.js" />
       </list>
     </option>
@@ -143,6 +151,20 @@
               <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" />
@@ -161,6 +183,15 @@
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
     <property name="js-jscs-nodeInterpreter" value="/usr/local/bin/node" />
   </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+      <recent name="$PROJECT_DIR$/src/data" />
+    </key>
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src" />
+    </key>
+  </component>
   <component name="RunManager">
     <configuration default="true" type="BashConfigurationType" factoryName="Bash">
       <option name="INTERPRETER_OPTIONS" value="" />
@@ -249,12 +280,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="2865000" />
+      <workItem from="1478355760990" duration="4403000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="2865000" />
+    <option name="totallyTimeSpent" value="4403000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1032" height="877" extended-state="0" />
@@ -366,10 +397,34 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/data/data.tsv">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="70">
+          <caret line="5" column="2" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="2" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/data/data.csv">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="70">
+          <caret line="5" column="0" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/data/data.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="308">
+          <caret line="22" column="0" selection-start-line="22" selection-start-column="0" selection-end-line="22" 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="126">
-          <caret line="9" column="0" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
+        <state relative-caret-position="0">
+          <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
           <folding />
         </state>
       </provider>

data/data.csv

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

data/data.json

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

data/data.tsv

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

src/app.js

@@ -1,9 +1,30 @@
-var domain = ["poor", "good", "great"];
-var ordinalScale = d3.scaleOrdinal()
-  .domain(domain)
-  .range(["blue", "white", "red"]);
+d3.json('data/data.json', function (data) {
+  // The full parsed row set.
+  console.log(data);
+});
+
+d3.csv('data/data.csv', function (data) {
+  console.log(data);
+});
 
-// Arrow functions: Chrome 45, FF 22, Edge, Opera 32, Safari 10. No IE.
-domain.forEach(grade => {
-  console.log(grade, ordinalScale(grade));
+d3.tsv('data/data.tsv', function (data) {
+  console.log(data);
 });
+
+d3.json('data/data.json', function (data) {
+  // const min = d3.min(data, d => d.age);
+  // const max = d3.max(data, d => d.age);
+  const extent = d3.extent(data, d => d.age);
+
+  console.log(extent);
+  const scale = d3.scaleLinear()
+   .domain(extent)
+   .range([0, 600]);
+
+  console.log(scale(24), scale(37));
+
+  var ages = d3.set(data, d => d.age);
+  // Usable for a quantize scale.
+  console.log(ages.values());
+});
+