anchor.diff:  
   		// preprocess data sample
   		for (var i = 0; i < data.length; i++) {
  -			for (var j = 0; j < data[i].value.length; j++) {
  -				let d = data[i].value[j]
  -
  -				d._key = d.key // replace old key
  -				d.key = d3.timeMonth(new Date(d3.timeFormat("%Y/%m/%d")(new Date(d.key))))
  -			}
  +
  +			// reduce data, group by month
  +			let nest = d3.nest()
  +				.key(d => d3.timeMonth((new Date(d.key))))
  +				.rollup(d => _.sumBy(d, 'value'))
  +				.entries(data[i].value)
  +				.map(g => {
  +					g.key = d3.timeMonth(new Date(d3.timeFormat("%Y/%m/%d")(new Date(g.key))))
  +					return g
  +				})
  +
  +			// update original data
  +			data[i].value = nest
   		}
   
   	  $(".punchcard").each((i, container) => {
  
positive.code: 			d3.min(data.map(d => d3.min(d.value.map(v => v.key)))),
  			d3.max(data.map(d => d3.max(d.value.map(v => v.key))))
  		]);
  	  // x.domain([
  	  //   d3.timeMonth(new Date(d3.min(data.map(d => d3.min(d.value.map((t) => d3.timeFormat("%Y/%m/%d")(new Date(t.key)))))))),
  	  //   d3.timeMonth(new Date(d3.max(data.map(d => d3.max(d.value.map((t) => d3.timeFormat("%Y/%m/%d")(new Date(t.key))))))))
  	  // ]);
  	  y.domain(data.map(d => d.key)).padding(0.5);
  
  	  let g = svg.append("g")
  
negative.code: 	      .attr("width", +container.node().getBoundingClientRect().width)
  	      .attr("height", itemHeight);
  
  	    let g = svg.append("g")
  	      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  
  	    r.domain([0, d3.max(data[i].value, d => d.value)]);
  
  	    g.selectAll("circle")
  	      // .data(nest)
  	      .data(data[i].value)
  	      .enter()
  	      .append("circle")
  	      .attr("class", "circle")
  	      .attr("cx", d => x(d.key))
  	      .attr("cy", d => y(data[i].key))
  	      .transition()
  	      .duration(800)
  