anchor.diff:  	  g.append("g")
   	    .attr("class", "y axis")
   	    .attr("transform", "translate(" + gutter + ", 0)")
  -	    .call(d3.axisLeft(y));
  +	    .call(d3.axisLeft(y).tickFormat(yTickFormat))
   	}
  +
   	const punchcard = (context, data, options = {}) => {
   	  // options
   		let itemHeight = options.itemHeight || 50
  
positive.code: 	  let g = svg.append("g")
  	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  
  		// TODO: configurable?
  	  data.sort((a, b) => a.value - b.value);
  
  	  x.domain([0, d3.max(data, d => d.value)]);
  	  y.domain(data.map(d => d.key)).padding(0.1);
  
  	  g.append("g")
  	    .attr("class", "x axis")
  	    .attr("transform", "translate(0," + (height + (gutter / 4)) + ")")
  	    .call(d3.axisBottom(x).ticks(5).tickSizeOuter(0));
  
  	  g.selectAll(".bar")
  	    .data(data)
  
negative.code: 		<div class="pure-u-1 pure-u-md-1-3">
  			<div id="rowchart-<%= SecureRandom.random_number(100) %>" class="rowchart"></div>
  		</div>
  	</div>
  	<h1>Pair rowcharts</h1>
  	<div class="pure-g gutters">
  		<div class="pure-u-1 pure-u-md-1-2">
  			<div id="rowchart-<%= SecureRandom.random_number(100) %>" class="rowchart"></div>
  