Added comments to explain elements

Author: peterlamar

19-svgdots/src/components/Dots.vue

@@ -1,5 +1,7 @@
 <template>
   <svg>
+    <!-- v-for directive renders a list based on an array. 
+          in this case, an array of pairs. -->
     <circle r="20"
             v-for="(item, index) in dataset"
             :cx="item[0]"

20-d3connectdots/src/components/ConnectDots.vue

@@ -28,16 +28,27 @@ export default {
       console.log('this is the item!', item)
     }
   },
+  // computed is cached and re-evaluated based on reactive dependencies
   computed: {
     lineGenerator() {
       return d3
         .line()
-        .x(v => v[0])
-        .y(v => v[1])
+        // These vars can be any letter as long as they are consistent (q, m, etc)
+        // Defined at https://github.com/d3/d3-shape#lines
+        .x(q => q[0])
+        .y(q => q[1])
     },
     d() {
       return this.lineGenerator(this.dataset)
     }
   }
 }
+/* Arrow Functions: 
+parameters => expression
+// is equivalent to:
+function (parameters){
+  return expression;
+}
+https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc
+*/
 </script>

20-d3connectdots/src/components/FancyConnectDots.vue

@@ -22,7 +22,7 @@ export default {
   data() {
     return {
       dataset,
-      curve: 'curveStepAfter'
+      curve: 'curveMonotoneY'
     }
   },
   methods: {