Color Sorting: HSV by hue, sat, then val

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
	<center>
		<p><b>Color Sorting: HSV by hue, sat, then val.</b> Hover over a square to see the Hex and HSV value.</p></center>
  <script>

var margin = {top: 20, right: 100, bottom: 20, left: 20},
    width = 1200 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
  	.attr("height", height + margin.top + margin.bottom)
	.append("g")
  	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("colors.csv", function(data){

var allColors = [];

data.forEach(function (d){
    		allColors.push({"hsv": d.hsv1, "hex": d.hex1});
    		allColors.push({"hsv": d.hsv2, "hex": d.hex2});
    		allColors.push({"hsv": d.hsv3, "hex": d.hex3});
    		allColors.push({"hsv": d.hsv4, "hex": d.hex4});
    		allColors.push({"hsv": d.hsv5, "hex": d.hex5});
    	});

allColors.sort(function(a, b){
			if (extractHue(a.hsv) == extractHue(b.hsv)){
				if (extractSat(a.hsv) == extractSat(b.hsv)){
					return extractVal(a.hsv) - extractVal(b.hsv);
				}
				return extractSat(a.hsv) - extractSat(b.hsv);
			}
			return (extractHue(a.hsv) - extractHue(b.hsv))
		});
		allColors.sort()

var rowCount = 0;
		var colCount = 0;

allColors.forEach(function(d){
			if(colCount < 100){
				svg.append("rect")
					.attr("x", colCount*11)
					.attr("y", rowCount*11)
					.attr("width", 10)
					.attr("height", 10)
					.attr("fill", d.hex)
					.on("mouseover", function(f){

svg.append("text")
							.attr("class", "tooltip")
							.attr("x", 1150)
							.attr("y", 50)
							.style("text-anchor", "middle")
							.text(d.hsv);

svg.append("text")
							.attr("class", "tooltip")
							.attr("x", 1150)
							.attr("y", 35)
							.style("text-anchor", "middle")
							.text(d.hex);
					})
					.on("mouseout", function(f){
						d3.selectAll(".tooltip").remove();
					});
				colCount++;
			}
			else{
				rowCount++;
				colCount = 0;
				svg.append("rect")
					.attr("x", colCount*11)
					.attr("y", rowCount*11)
					.attr("width", 10)
					.attr("height", 10)
					.attr("fill", d.hex)
					.on("mouseover", function(f){
						svg.append("text")
							.attr("class", "tooltip")
							.attr("x", 1150)
							.attr("y", 50)
							.style("text-anchor", "middle")
							.text(d.hsv);

}
		});

});

function extractHue(input){
    	return +(input.split("/")[0]);
    }

function extractVal(input){
    	return +(input.split("/")[2]);
    }

function extractSat(input){
    	return +(input.split("/")[1]);
    }

</script>
</body>

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