earthjs
Version:
D3 Earth JS using SVG, Canvas & THREE js, build with some plugins.
38 lines (33 loc) • 947 B
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css" media="screen">
div {
width:60px;
height: 60px;
float: left;
padding: 1px;
}
</style>
</head>
<body>
<script type='text/javascript' src="../js/d3.min.js"></script>
<script type="text/javascript">
var body = d3.select("body");
var dataset= [0,1,2,3,4,5,6,7,8,10,11,12,13,14,15,16,17,18,19,20,9,8,7,6,5,4,3,2,1,0];
var length = dataset.length;
var range = [d3.rgb("#FF0000"), d3.rgb('#FFFFFF')];
var color = d3.scaleLinear().domain(d3.extent(dataset))
.interpolate(d3.interpolateHcl).range(range);
// .range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
for (var i = 0; i < length; i++) {
body.append('div').attr('style', function (d) {
return 'background-color: ' + color(dataset[i]);
});
}
</script>
</body>
</html>