Hw3 start.

hw2/.idea/workspace.xml

@@ -2,15 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="a11ee4a0-3787-4da9-80ca-2e586b2721a1" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/../hw1/Hw1.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/hw2.iml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/data/Tree.json" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/hw2.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/js/Node.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/js/Tree.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/js/script.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -25,11 +17,12 @@
     <session id="-371711873">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
-          <entry key="project.closed" value="2" />
+          <entry key="project.closed" value="4" />
+          <entry key="project.open.time.10" value="1" />
           <entry key="project.open.time.12" value="1" />
           <entry key="project.open.time.4" value="1" />
           <entry key="project.open.time.9" value="1" />
-          <entry key="project.opened" value="3" />
+          <entry key="project.opened" value="4" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
@@ -68,7 +61,7 @@
         <entry file="file://$PROJECT_DIR$/hw2.html">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="345">
-              <caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
+              <caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
             </state>
           </provider>
         </entry>
@@ -76,8 +69,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/data/Tree.json">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-128">
+            <state relative-caret-position="405">
-              <caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
+              <caret line="27" column="2" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
             </state>
           </provider>
         </entry>
@@ -85,8 +78,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/js/Tree.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="788">
+            <state relative-caret-position="295">
-              <caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
+              <caret line="83" column="32" lean-forward="true" selection-start-line="81" selection-start-column="8" selection-end-line="83" selection-end-column="32" />
             </state>
           </provider>
         </entry>
@@ -94,7 +87,7 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/js/Node.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="205">
+            <state relative-caret-position="360">
               <caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
             </state>
           </provider>
@@ -139,6 +132,17 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="hw2" type="b2602c69:ProjectViewProjectNode" />
+              <item name="hw2" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
       <pane id="Scope">
         <subPane subId="Scope 'Project Files'; set:Project Files; class com.intellij.psi.search.scope.ProjectFilesScope">
           <expand>
@@ -160,17 +164,6 @@
           <select />
         </subPane>
       </pane>
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="hw2" type="b2602c69:ProjectViewProjectNode" />
-              <item name="hw2" type="462c0819:PsiDirectoryNode" />
-            </path>
-          </expand>
-          <select />
-        </subPane>
-      </pane>
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -215,12 +208,13 @@
       <updated>1568584050957</updated>
       <workItem from="1568584054070" duration="4815000" />
       <workItem from="1568614403562" duration="1200000" />
-      <workItem from="1568644410386" duration="11879000" />
+      <workItem from="1568644410386" duration="12289000" />
+      <workItem from="1568850914755" duration="490000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="17894000" />
+    <option name="totallyTimeSpent" value="18794000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -234,7 +228,7 @@
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1280" height="731" extended-state="0" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -246,7 +240,7 @@
       <window_info anchor="bottom" id="TODO" order="6" weight="0.3286385" />
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
       <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
@@ -286,6 +280,27 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/hw2.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="345">
+          <caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/data/Tree.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="405">
+          <caret line="27" column="2" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/js/Node.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="360">
+          <caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/js/script.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="75">
@@ -293,31 +308,10 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/js/Node.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="205">
-          <caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/hw2.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="345">
-          <caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/data/Tree.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-128">
-          <caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/js/Tree.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="788">
+        <state relative-caret-position="295">
-          <caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
+          <caret line="83" column="32" lean-forward="true" selection-start-line="81" selection-start-column="8" selection-end-line="83" selection-end-column="32" />
         </state>
       </provider>
     </entry>

hw3/data/anscombe_I.csv

@@ -0,0 +1,12 @@
+a,b
+10,8.04
+8,6.95
+13,7.58
+9,8.81
+11,8.33
+14,9.96
+6,7.24
+4,4.26
+12,10.84
+7,4.82
+5,5.68

hw3/data/anscombe_II.csv

@@ -0,0 +1,12 @@
+a,b
+10,9.14
+8,8.14
+13,8.74
+9,8.77
+11,9.26
+14,8.1
+6,6.13
+4,3.1
+12,9.13
+7,7.26
+5,4.74

hw3/data/anscombe_III.csv

@@ -0,0 +1,12 @@
+a,b
+10,7.46
+8,6.77
+13,12.74
+9,7.11
+11,7.81
+14,8.84
+6,6.08
+4,5.39
+12,8.15
+7,6.42
+5,5.73

hw3/data/anscombe_IV.csv

@@ -0,0 +1,12 @@
+a,b
+8,6.58
+8,5.76
+8,7.71
+8,8.84
+8,8.47
+8,7.04
+8,5.25
+19,12.5
+8,5.56
+8,7.91
+8,6.89

hw3/hw3.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Homework 3 Solution</title>
+    <style>
+      .barChart {
+      fill: steelblue;
+      stroke: darkgray;
+      stroke-width: 1px;
+      }
+
+      .lines {
+      stroke: steelblue;
+      fill: none
+      }
+
+      .areas {
+      stroke: none;
+      fill: steelblue
+      }
+
+      circle {
+      fill: steelblue;
+      }
+
+      .frame {
+      fill: none;
+      stroke: black;
+      stroke-width: 2px;
+      }
+
+      /* Styles that clean up the layout;
+      * you can ignore these */
+      div {
+      display: inline-block;
+      border: 1px solid lightgray;
+      margin: 1em;
+      }
+
+      div, span {
+      padding: 1em;
+      }
+    </style>
+    <!--script src="https://d3js.org/d3.v4.js"></script-->
+    <script src="d3.js"></script>
+    <script type="application/javascript" src="script.js"></script>
+  </head>
+  <body onload="changeData()">
+
+    <h3>CS 5890 Homework 3</h3>
+    <address>
+      <span>Your Name</span>
+      <span>Your Email Address</span>
+      <span>Your A#</span>
+    </address>
+    <br>
+    <hr>
+    <br>
+
+    <span>
+      <button>Staircase</button>
+    </span>
+
+    <span>
+      <label>Dataset:</label>
+      <select id="dataset">
+        <option value="anscombe_I">Anscombe's Quartet I</option>
+        <option selected value="anscombe_II">Anscombe's Quartet II</option>
+        <option value="anscombe_III">Anscombe's Quartet III</option>
+        <option value="anscombe_IV">Anscombe's Quartet IV</option>
+      </select>
+    </span>
+
+    <span>
+      <input type="checkbox" id="random"> Random Subset
+    </span>
+
+    <br>
+
+    <div>
+      <h2>Bar Charts</h2>
+      <svg width="200" height="200" id="chart1">
+        <g transform="translate(0, 200) scale(1, -1)" class="barChart" >
+          <rect x="10" y="0" width="10" height="100"></rect>
+          <rect x="20" y="0" width="10" height="80"></rect>
+          <rect x="30" y="0" width="10" height="130"></rect>
+          <rect x="40" y="0" width="10" height="90"></rect>
+          <rect x="50" y="0" width="10" height="110"></rect>
+          <rect x="60" y="0" width="10" height="140"></rect>
+          <rect x="70" y="0" width="10" height="60"></rect>
+          <rect x="80" y="0" width="10" height="40"></rect>
+          <rect x="90" y="0" width="10" height="120"></rect>
+          <rect x="100" y="0" width="10" height="70"></rect>
+          <rect x="110" y="0" width="10" height="50"></rect>
+        </g>
+      </svg>
+
+      <svg width="200" height="200">
+        <g transform="translate(0, 200) scale(1, -1)" class="barChart" >
+          <rect x="10" y="0" width="10" height="91"></rect>
+          <rect x="20" y="0" width="10" height="81"></rect>
+          <rect x="30" y="0" width="10" height="87"></rect>
+          <rect x="40" y="0" width="10" height="88"></rect>
+          <rect x="50" y="0" width="10" height="93"></rect>
+          <rect x="60" y="0" width="10" height="81"></rect>
+          <rect x="70" y="0" width="10" height="61"></rect>
+          <rect x="80" y="0" width="10" height="31"></rect>
+          <rect x="90" y="0" width="10" height="91"></rect>
+          <rect x="100" y="0" width="10" height="73"></rect>
+          <rect x="110" y="0" width="10" height="47"></rect>
+        </g>
+      </svg>
+    </div>
+
+    <div>
+      <h2>Line Charts</h2>
+
+      <svg width="200" height="200">
+        <g transform="translate(10, 200) scale(1, -1)">
+          <path class="lines"
+                d="M 0 100 L 10 80 L 20 130 L 30 90 L 40 110 L 50 140 L 60 60 L 70 40 L 80 120 L 90 70 L 100 50"></path>
+        </g>
+      </svg>
+
+      <svg width="200" height="200">
+        <g class="lines" transform="translate(10, 200) scale(1, -1)">
+          <path class="lines"
+                d="M 0 91 L 10 81 L 20 87 L 30 88 L 40 93 L 50 81 L 60 61 L 70 31 L 80 91 L 90 73 L 100 47"></path>
+        </g>
+      </svg>
+    </div>
+
+    <div>
+      <h2>Area Charts</h2>
+
+      <svg width="200" height="200">
+        <g transform="translate(10, 200) scale(1, -1)">
+          <path  class="areas"
+                 d="M 0 0 L 0 100 L 10 80 L 20 130 L 30 90 L 40 110 L 50 140 L 60 60 L 70 40 L 80 120 L 90 70 L 100 50  L 100 0"></path>
+        </g>
+      </svg>
+
+      <svg width="200" height="200">
+        <g transform="translate(10, 200) scale(1, -1)">
+          <path class="areas"
+                d="M 0 0 L 0 91 L 10 81 L 20 87 L 30 88 L 40 93 L 50 81 L 60 61 L 70 31 L 80 91 L 90 73 L 100 47 L 100 0"></path>
+        </g>
+      </svg>
+    </div>
+
+    <div>
+      <h2>Scatterplot</h2>
+
+      <svg width="200" height="200">
+        <rect x="0" y="0" width="200" height="200" class="frame"></rect>
+        <g transform="translate(0, 200) scale(1, -1)">
+          <circle cx="100" cy="91" r="5"></circle>
+          <circle cx="80" cy="81" r="5"></circle>
+          <circle cx="130" cy="87" r="5"></circle>
+          <circle cx="90" cy="88" r="5"></circle>
+          <circle cx="110" cy="93" r="5"></circle>
+          <circle cx="140" cy="81" r="5"></circle>
+          <circle cx="60" cy="61" r="5"></circle>
+          <circle cx="40" cy="31" r="5"></circle>
+          <circle cx="120" cy="91" r="5"></circle>
+          <circle cx="70" cy="73" r="5"></circle>
+          <circle cx="50" cy="47" r="5"></circle>
+        </g>
+      </svg>
+    </div>
+  </body>
+</html>

hw3/script.js

@@ -0,0 +1,99 @@
+/**
+ * Makes the first bar chart appear as a staircase.
+ *
+ * Note: use only the DOM API, not D3!
+ */
+function staircase() {
+  // ****** TODO: PART II ******
+}
+
+/**
+ * Render the visualizations
+ * @param error
+ * @param data
+ */
+function update(data) {
+  // Set up the scales
+  let aScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d => d.a)])
+    .range([0, 150]);
+  let bScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d => d.b)])
+    .range([0, 150]);
+  let iScale = d3.scaleLinear()
+    .domain([0, data.length])
+    .range([0, 110]);
+
+
+  // ****** TODO: PART III (you will also edit in PART V) ******
+
+  // TODO: Select and update the 'a' bar chart bars
+
+  // TODO: Select and update the 'b' bar chart bars
+
+  // TODO: Select and update the 'a' line chart path using this line generator
+
+  let aLineGenerator = d3.line()
+    .x((d, i) => iScale(i))
+    .y((d) => aScale(d.a));
+
+  // TODO: Select and update the 'b' line chart path (create your own generator)
+
+  // TODO: Select and update the 'a' area chart path using this area generator
+  let aAreaGenerator = d3.area()
+    .x((d, i) => iScale(i))
+    .y0(0)
+    .y1(d => aScale(d.a));
+
+  // TODO: Select and update the 'b' area chart path (create your own generator)
+
+  // TODO: Select and update the scatterplot points
+
+  // ****** TODO: PART IV ******
+
+}
+
+/**
+ * Load the file indicated by the select menu
+ */
+function changeData() {
+  let dataFile = document.getElementById('dataset').value;
+  if (document.getElementById('random').checked) {
+    randomSubset();
+  }
+  else {
+    let filename = './data/' + dataFile + '.csv';
+    dataset = d3.csv(filename, function(d) {
+      // Convert each data item to a number.
+      return { a:+d.a, b:+d.b };
+    })
+    // After reading the entire dataset, call update().
+      .then(update);
+  }
+}
+
+/**
+ *   Load the file indicated by the select menu, and then slice out a random chunk before passing the data to update()
+ */
+function randomSubset() {
+  let dataFile = document.getElementById('dataset').value;
+  if (document.getElementById('random').checked) {
+    let filename = './data/' + dataFile + '.csv';
+    dataset = d3.csv(filename, function(d) {
+      // Convert each data item to a number.
+      return { a:+d.a, b:+d.b };
+    })
+    .then(function(data) {
+      let subset = [];
+      for (let d of data) {
+        if (Math.random() > 0.5) {
+          subset.push(d);
+        }
+      }
+      update(subset);
+    });
+  }
+  else {
+    changeData();
+  }
+}