index.html
<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>MODIS Land Cover</title>
</head>
<body>
<div id="paleta"></div>
<script>
function rgb(r, g, b){
return "rgb("+r+","+g+","+b+")";
}
var data = [
{"id":0,"red":24,"green":24,"blue":128,"label":"Water"},
{"id":1,"red":33,"green":138,"blue":33,"label":"Evergreen Needleleaf forest"},
{"id":2,"red":50,"green":205,"blue":49,"label":"Evergreen Broadleaf forest"},
{"id":3,"red":154,"green":205,"blue":50,"label":"Deciduous Needleleaf forest"},
{"id":4,"red":153,"green":249,"blue":151,"label":"Deciduous Broadleaf forest"},
{"id":5,"red":144,"green":187,"blue":142,"label":"Mixed forest"},
{"id":6,"red":188,"green":142,"blue":144,"label":"Closed shrublands"},
{"id":7,"red":245,"green":222,"blue":180,"label":"Open shrublands"},
{"id":8,"red":218,"green":235,"blue":157,"label":"Woody savannas"},
{"id":9,"red":255,"green":214,"blue":0,"label":"Savannas"},
{"id":10,"red":240,"green":183,"blue":104,"label":"Grasslands"},
{"id":11,"red":70,"green":131,"blue":178,"label":"Permanent wetlands"},
{"id":12,"red":249,"green":237,"blue":115,"label":"Croplands"},
{"id":13,"red":254,"green":0,"blue":0,"label":"Urban and built-up"},
{"id":14,"red":151,"green":147,"blue":84,"label":"Cropland/Natural vegetation mosaic"},
{"id":15,"red":255,"green":255,"blue":249,"label":"Snow and ice"},
{"id":16,"red":189,"green":189,"blue":189,"label":"Barren or sparsely vegetated"}
];
var svg = d3.select("#paleta")
.append("svg")
.attr("width", 250)
.attr("height", data.length*10*2)
.style("background-color", "black");
svg.selectAll("labels")
.data( data )
.enter()
.append("text")
.attr("x", 25 )
.attr("y", function(d,i) {return 15+i*20;} )
.attr("fill","white")
.text( function(d) {return d.label; } );
svg.selectAll("circle")
.data( data )
.enter()
.append("circle")
.attr("r", 9 )
.attr("cx", 10 )
.attr("cy", function(d,i) {return 10+i*20;} )
.attr("fill", function(d,i) {return rgb(d.red, d.green, d.blue); } );
</script>
</body>
</html>