MODIS Land Cover (paleta)

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>MODIS Land Cover</title>
</head>
<body>
  <div id="paleta"></div>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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