aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://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>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://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.length102)
	.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>