title: Sum the values for the same dates
body: <p>I am trying to plot a graph in <code>D3.js</code>. It is a Date VS value graph. But, few of my values are different when Date is same. I want to consider the summation of the values where Date is similar. This is how, Data looks like, </p>
  
  <pre><code>[
  
      {
          Date : "2017-12-15",
          Sales : "50"
  
      },
      {   Date : "2017-12-16",
          Sales : "20"
  
      },
      {
          Date : "2017-12-17",
          Sales : "30"
      },
      {
          Date : "2017-12-18",
          Sales : "10"
      },
      {
          Date : "2017-12-18",
          Sales : "40"
      },
      {
          Date : "2017-12-19",
          Sales : "60"
      }
  
  
  ]
  </code></pre>
  
  <p>As, you can see, on <code>2017-12-18</code> there are two <code>Sales</code> values, <code>10</code> and <code>40</code> . I want to consider the sum that is <code>(10 + 40)</code> for <code>2017-12-18</code> (Whenever there is a different <code>Sales</code> value for the same <code>Date</code>).</p>
  
  <p>JS :- </p>
  
  <pre><code>var data = [
  
      {
          Date : "2017-12-15",
          Sales : "50"
  
      },
      {   Date : "2017-12-16",
          Sales : "20"
  
      },
      {
          Date : "2017-12-17",
          Sales : "30"
      },
      {
          Date : "2017-12-18",
          Sales : "10"
      },
      {
          Date : "2017-12-18",
          Sales : "40"
      },
      {
          Date : "2017-12-19",
          Sales : "60"
      }
  
  
  ].map(function(entry) {
    return {
      Date: d3.timeParse("%Y-%m-%d")(entry.Date),
      Sales: +entry.Sales
    }
  });
  
  var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var x = d3.scaleTime()
      .rangeRound([0, width]);
  
  var y = d3.scaleLinear()
      .rangeRound([height, 0]);
  
  var line = d3.line()
      .x(function(d) { return x(d.Date); })
      .y(function(d) { return y(d.Sales); });
  
  x.domain(d3.extent(data, function(d) { return d.Date; }));
  y.domain(d3.extent(data, function(d) { return d.Sales; }));
  
  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
  
  g.append("g")
      .call(d3.axisLeft(y))
  
  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
  </code></pre>
  
  <p>HTML :- </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;svg width="600" height="180"&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>What is happening here is, it is taking the higher value only if Date is same, not taking the sum value.</p>