Burgernomics

Burgernomics and an excuse to play with d3 images?...

Real talk though, Whataburger > everything else.

🍔 🍔 🍔

Data:

http://www.economist.com/content/big-mac-index
https://www.statista.com/statistics/274326/big-mac-index-global-prices-for-a-big-mac/

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.tooltip {
  position: absolute;
  padding: 10px;
  font: 12px sans-serif;
  background: #222;
  color: #fff;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0.9;
  visibility: hidden;
}
</style>

///////////////////////
// Parse the Data
d3.csv("bigmac.csv", function(data) {

///////////////////////
  // Chart Size Setup
  var margin = { top: 35, right: 0, bottom: 30, left: 40 };

var width = 960 - margin.left - margin.right;
  var height = 500 - margin.top - margin.bottom;

var chart = d3.select(".chart")
      .attr("width", 960)
      .attr("height", 500)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

///////////////////////
  // Title
  chart.append("text")
    .text('Burgernomics (2016, US $)')
    .attr("text-anchor", "middle")
    .attr("class", "graph-title")
    .attr("y", -10)
    .attr("x", width / 2.0);

var yPos = function(i) {
    var row = Math.ceil((i + 1) / 10);
    return 100 * row - (5 * row * row);
  };

// I'm sure there's a better way to do this...
  // probably involves tweaking the math in yPos
  var labelOffset = function(i) {
    var row = Math.ceil((i + 1) / 10);
    return 2 * row;
  };

var xPos = function(i) {
    var col = i % 10;
    return 96 * col;
  };

var bSize = function(d) {
    return 14 * d['cost'];
  };

///////////////////////
  // Burgers
  var burger = chart.selectAll(".burger")
      .data(data)
    .enter().append("image")
      .attr("xlink:href", "https://www.mcdonalds.co.uk/content/dam/mcdonaldsuk/item/live/mcdonalds-Big-Mac.png")
      .attr("width", "5px")
      .attr("height", "5px")
      .attr("y", function(d, i) { return yPos(i) - bSize(d); })
      .attr("x", function(d, i) { return xPos(i) - bSize(d) / 2.0; });

burger.transition()
      .duration(4000)
      .ease("elastic")
      .attr("width", bSize)
      .attr("height", bSize);

///////////////////////
  // Tooltips
  var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip");

burger.on("mouseover", function(d) {
        tooltip.html("$"+d['cost'])
            .style("visibility", "visible");
      })
      .on("mousemove", function(d) {
        tooltip.style("top", event.pageY - (tooltip[0][0].clientHeight + 5) + "px")
            .style("left", event.pageX - (tooltip[0][0].clientWidth / 2.0) + "px");
      })
      .on("mouseout", function(d) {
        tooltip.style("visibility", "hidden");
      });
});
</script>

https://d3js.org/d3.v3.min.js