xxxxxxxxxx<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); 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++; } }); }); 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