cjhin/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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/


## bigmac.csv

          
            cost
            country

            
              6.59
              Switzerland

            
              5.51
              Norway

            
              5.23
              Sweden

            
              5.06
              Finland

            
              5.04
              United States

            
              4.78
              Brazil

            
              4.62
              Italy

            
              4.60
              Canada

            
              4.51
              France

            
              4.44
              Denmark

            
              4.40
              Ireland

            
              4.38
              Israel

            
              4.35
              Belgium

            
              4.30
              Australia

            
              4.22
              New Zealand

            
              4.21
              Euro area

            
              4.17
              Germany

            
              4.12
              Costa Rica

            
              4.08
              Uruguay

            
              4.01
              Singapore

            
              3.96
              Austria

            
              3.94
              Britain

            
              3.86
              South Korea

            
              3.85
              Spain

            
              3.80
              Netherlands

            
              3.69
              Greece

            
              3.63
              Sri Lanka

            
              3.58
              Pakistan

            
              3.54
              UAE

            
              3.53
              Turkey

            
              3.53
              Chile

            
              3.47
              Japan

            
              3.41
              Estonia

            
              3.40
              Thailand

            
              3.38
              Venezuela

            
              3.36
              Portugal

            
              3.35
              Argentina

            
              3.20
              Saudi Arabia

            
              3.15
              Hungary

            
              3.06
              Czech Republic

            
              3.04
              Colombia

            
              3.02
              Peru

            
              2.82
              Philippines

            
              2.79
              China

            
              2.69
              Vietnam

            
              2.59
              Egypt

            
              2.48
              Hong Kong

            
              2.42
              Poland

            
              2.41
              India

            
              2.37
              Mexico

            
              2.36
              Indonesia

            
              2.15
              Taiwan

            
              2.10
              South Africa

            
              2.05
              Russia

            
              1.99
              Malaysia

            
              1.57
              Ukraine

## index.html
<!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>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>

///////////////////////
// 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", "http://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);

  var label = chart.selectAll(".label")
      .data(data)
    .enter().append("text")
      .text(function(d) { return d['country']; })
      .attr("class", "label")
      .attr("text-anchor", "middle")
      .attr("alignment-baseline", "baseline")
      .attr("y", function(d, i) { return yPos(i) + labelOffset(i); })
      .attr("x", function(d, i) { return xPos(i); });

  ///////////////////////
  // 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>

<body>
  <svg class="chart"></svg>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	cost	country
	6.59	Switzerland
	5.51	Norway
	5.23	Sweden
	5.06	Finland
	5.04	United States
	4.78	Brazil
	4.62	Italy
	4.60	Canada
	4.51	France
	4.44	Denmark
	4.40	Ireland
	4.38	Israel
	4.35	Belgium
	4.30	Australia
	4.22	New Zealand
	4.21	Euro area
	4.17	Germany
	4.12	Costa Rica
	4.08	Uruguay
	4.01	Singapore
	3.96	Austria
	3.94	Britain
	3.86	South Korea
	3.85	Spain
	3.80	Netherlands
	3.69	Greece
	3.63	Sri Lanka
	3.58	Pakistan
	3.54	UAE
	3.53	Turkey
	3.53	Chile
	3.47	Japan
	3.41	Estonia
	3.40	Thailand
	3.38	Venezuela
	3.36	Portugal
	3.35	Argentina
	3.20	Saudi Arabia
	3.15	Hungary
	3.06	Czech Republic
	3.04	Colombia
	3.02	Peru
	2.82	Philippines
	2.79	China
	2.69	Vietnam
	2.59	Egypt
	2.48	Hong Kong
	2.42	Poland
	2.41	India
	2.37	Mexico
	2.36	Indonesia
	2.15	Taiwan
	2.10	South Africa
	2.05	Russia
	1.99	Malaysia
	1.57	Ukraine
	<!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>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	///////////////////////
	// 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", "http://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);

	var label = chart.selectAll(".label")
	.data(data)
	.enter().append("text")
	.text(function(d) { return d['country']; })
	.attr("class", "label")
	.attr("text-anchor", "middle")
	.attr("alignment-baseline", "baseline")
	.attr("y", function(d, i) { return yPos(i) + labelOffset(i); })
	.attr("x", function(d, i) { return xPos(i); });

	///////////////////////
	// 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>

	<body>
	<svg class="chart"></svg>
	</body>