Build a multi-series area chart.

.idea/workspace.xml

@@ -3,8 +3,6 @@
   <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$/data/data.json" afterPath="$PROJECT_DIR$/data/data.json" />
-      <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" />
@@ -37,8 +35,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="588">
-              <caret line="56" column="39" selection-start-line="56" selection-start-column="39" selection-end-line="56" selection-end-column="39" />
+            <state relative-caret-position="213">
+              <caret line="37" column="23" selection-start-line="37" selection-start-column="23" selection-end-line="37" selection-end-column="23" />
               <folding />
             </state>
           </provider>
@@ -279,12 +277,12 @@
       <updated>1478355759772</updated>
       <workItem from="1478355760990" duration="14794000" />
       <workItem from="1478430008755" duration="3280000" />
-      <workItem from="1478438832989" duration="10159000" />
+      <workItem from="1478438832989" duration="10955000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="18767000" />
+    <option name="totallyTimeSpent" value="19563000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="916" height="877" extended-state="0" />
@@ -489,26 +487,26 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.js">
+    <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.node.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="253">
-          <caret line="16113" column="0" selection-start-line="16113" selection-start-column="0" selection-end-line="16113" selection-end-column="0" />
+        <state relative-caret-position="248">
+          <caret line="154" column="0" selection-start-line="154" selection-start-column="0" selection-end-line="154" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.node.js">
+    <entry file="file://$PROJECT_DIR$/node_modules/d3/build/d3.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="248">
-          <caret line="154" column="0" selection-start-line="154" selection-start-column="0" selection-end-line="154" selection-end-column="0" />
+        <state relative-caret-position="253">
+          <caret line="2094" column="11" selection-start-line="2094" selection-start-column="11" selection-end-line="2094" selection-end-column="11" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="588">
-          <caret line="56" column="39" selection-start-line="56" selection-start-column="39" selection-end-line="56" selection-end-column="39" />
+        <state relative-caret-position="213">
+          <caret line="37" column="23" selection-start-line="37" selection-start-column="23" selection-end-line="37" selection-end-column="23" />
           <folding />
         </state>
       </provider>

src/app.js

@@ -20,6 +20,7 @@ let svg = d3.select(".chart")
 
 d3.json("data/data.json", function (err, data) {
   const parseTime = d3.timeParse("%Y/%m/%d");
+
   // Normalize data.
   data.forEach(company => {
     company.values.forEach(d => {
@@ -51,19 +52,22 @@ d3.json("data/data.json", function (err, data) {
     .append("g")
     .call(d3.axisLeft(yScale));
 
-  let line = d3.line()
+  let area = d3.area()
     .x(d => xScale(d.date))
-    .y(d => yScale(d.close))
-    .curve(d3.curveCatmullRom.alpha(0.5));
-  svg.selectAll(".line")
+    .y0(yScale(yScale.domain()[0]))
+    .y1(d => yScale(d.close))
+    .curve(d3.curveCatmullRom.alpha(0.5))
+  ;
+  svg.selectAll(".area")
     .data(data)
     .enter()
     .append("path")
-    .attr("class", "line")
-    .attr("d", d => line(d.values))
-    // i is the index, alternating 0 and 1 (AMZN orange, GOOG blue).
-    .style("stroke", (d, i) => ["#FF9900", "#3369E8"][i])
-    .style("stroke-width", 2)
-    .style("fill", "none");
+      .attr("class", "area")
+      .attr("d", d => area(d.values))
+      // i is the index, alternating 0 and 1 (AMZN orange, GOOG blue).
+      .style("stroke", (d, i) => ["#FF9900", "#3369E8"][i])
+      .style("stroke-width", 2)
+      .style("fill",  (d, i) => ["#FF9900", "#3369E8"][i])
+      .style('fill-opacity', 0.5);
 
 });