xxxxxxxxxx<meta charset="utf-8"><head> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="map-container"> <div id="world-map"></div> <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> <div id="time-series"></div> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script> <script src="https://d3js.org/queue.v1.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="plot.js"></script> <script src="clockMap.js"></script> <script src="clockFace.js"></script> <script> // 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