Global Carbon Emission

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<div id="selector"> 
      <div class="bottom">
        <label class="switch">
          <input type="checkbox", id="nume">
          <span class="switch-on">annual</span>
          <span class="switch-off">cumulative</span>
        </label>
      </div>

<div class="bottom">
        <label class="switch">
          <input type="checkbox", id="deno">
          <span class="switch-on">area</span>
          <span class="switch-off">population</span>
        </label>
      </div>
    </div>
  </div>

// variable set up
  colors =['#313695',
  '#4575b4',
  '#74add1',
  '#abd9e9',
  '#e0f3f8',
  '#ffffbf',
  '#fee090',
  '#fdae61',
  '#f46d43',
  '#d73027',
  '#a50026']

// handling swicth
  var denoList = ['population', 'area'],
 denoSwitch = -0.5; // start with population
 var numeList = ['cumulative', 'annual'],
 numeSwitch = -0.5;
  
  // optimize waiting time
  queue()
  .defer(d3.json, "world-110m2.json")
  .defer(d3.json, "emission.json")
  .await(ready);

//d3.select(self.frameElement).style("height", height + "px");

</script>
</body>
</html>

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.js to a secure url

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.js

https://code.jquery.com/jquery-1.10.2.js