anchor.diff:  				.attr("y2", height)
   		}
   
  +		function yAxis(g) {
  +			g.call(d3.axisLeft(y).tickSizeOuter(0).tickSizeInner(0))
  +			g.selectAll(".domain").remove()
  +		}
  +
   		// axis
   		g.append("g")
   			.attr("class", "x axis")
   			.call(xAxis)
   		g.append("g")
   			.attr("class", "y axis")
  -			.call(d3.axisLeft(y))
  +			.attr("transform", "translate(" + (-margin.left + gutter) + ",0)")
  +			.style("text-anchor", "start")
  +			.call(yAxis)
   
   		// circles
   		for (var i = 0; i < data.length; i++) {
   
  +			// PREPROCESS
  +			let nest = d3.nest()
  +  			.key(d => d3.timeMonth(new Date(d.key)))
  +				.rollup(d => _.sumBy(d, 'value'))
  +				.entries(data[i].value)
  +
   			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(data[i].value)
  +				.data(nest)
  +				// .data(data[i].value)
   				.enter()
   				.append("circle")
   				.attr("class", "circle")
  
positive.code: </div>
  
  <!-- Scripting -->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript">
  	const rowchart = (context, data) => {
  
negative.code: 			top: gutter / 1.5,
  			right: gutter,
  			bottom: gutter * 1.5,
  			left: gutter * 15
  		}
  
  		// helpers
  