I write this sitting in the kitchen sink… Just kidding! My kitchen sink barely holds one wriggling (fat) pug. In truth, I write this melting, Elmira-style, in the peak of #heatdome2016. Temperatures like these (mid 90’s, egads!), merit rewards merely for enduring them, and what is a five dollar vat of caffeine if not a reward?

There are three coffee shops within 1-2 blocks of my apartment, and another handful scattered round my office. I buy cold brew most mornings, but where I buy it depends on mood, lateness, grogginess, general aesthetic preference, etc. In my head, they all cost around $4, but I was vaguely curious to see how the price stacked up versus size, and, more importantly, jitter quotient. Call me a New Yorker (it’s been eight years — I’m close!), but I prefer to let the ice cubes do all the dilution.

I created the following visualization by modifying Michele Weigle’s scatterplot so that it rendered images instead of circles. Specifically, I replaced

 svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d) 
	        + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

with:

 svg.selectAll(".dot")
 .data(data)
 .enter().append("image")
 .attr('xlink:href',function(d){
 if (d.neighborhood =='Fidi'){
 return 'icedcoffee_blue.png'
 }
 else { 
 return ('icedcoffee_purple.png')
 }
 })
 .attr('class', 'dot')
 .attr('x', xMap)
 .attr('y', yMap)
 .attr('height', '50')
 .attr('width', '50')
 .on("mouseover", function(d) {
 tooltip.transition()
 .duration(200)
 .style("opacity", .9);
 tooltip.html("jitter-factor: "+ xValue(d)
 + ", " + "price/oz: $"+ yValue(d))
 .style("left", (d3.event.pageX + 5) + "px")
 .style("top", (d3.event.pageY - 28) + "px");
 })
 .on("mouseout", function(d) {
 tooltip.transition()
 .duration(500)
 .style("opacity", 0);
 });

The resulting viz indicates that our own cafeteria gives by far the best jitter bang for buck, while The Wooly Daily ought to be avoided (though the vibes are decent). Also, Fort Greene caffeine tends to be both stronger and pricier than its FiDi counterpart.

The code for this viz is up on github. Feel free to plug your own coffee places into the jitterbug.csv file and see how they shake up!