All of the custom colors found in d3.js blocks were used as input. The data was taken from enjalot’s block and includes 3250 different blocks. He parsed out hex codes, hsl(a) and rgb(a) in any html, js or coffee file found in each block and I converted all of these to 6-digit hex codes. There were 24700 different color statements in these blocks that make up 4350 unique colors. The Self Organizing Map clustering grouped similar colors together in hexagons and displays the “average” rgb value. The size of each hexagon is scaled to the number of (the 24700) colors that are present in each hexagon. The biggest one, pure black, #000000, has 1500 entries
Another version, based on a clustering of both the rgb & hsl values can be found here
A collection of blocks scanned with blockscanner for the bl.ocksplorer.org project with some further processing. Based on enjalot‘s block: block colors
///////////////////////////////////////////////////////////////////////////
/////////////////////////////// SOM Data //////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//The color of each hexagon
var color = ["#FFFFFF", "#FDFDFE", "#FFF8FA", "#FEFCEF", "#FEF5ED", "#FFFEE1", "#FFFFD6", "#FCF1CB", "#F7E1CF", "#FCDAC7", "#FDC2C7", "#FDB5BE", "#FBB4A7", "#FCAD91", "#FE9796", "#EB8B7D", "#FB7A6E", "#FC8655", "#FC8D3B", "#F47924", "#FE7E0E", "#FF7D00", "#EE6C13", "#F06300", "#D85F05", "#D44603", "#F45200", "#FA4200", "#FB2E00", "#FE0000", "#FBFCFC", "#FBFBF9", "#FEF8F4", "#FEEFF3", "#FCF5E5", "#FAF6DB", "#FAFAD2", "#FEE9CD", "#FCE6C5", "#F9DBB5", "#FCCCAD", "#EEB998", "#DFBB83", "#F1A483", "#FFA07A", "#FD946B", "#F88A62", "#ED8F4C", "#FC9B2A", "#F98F1B", "#FE8E00", "#EF7F08", "#E77600", "#DA6B06", "#B85A0D", "#E5540D", "#FB5519", "#EF3B1F", "#FD1509", "#E10507", "#F2FFFC", "#F7FAFE", "#F7F8F7", "#F2FDEF", "#F9EFE6", "#FDEDDF", "#FCEDD6", "#FEFCCC", "#FEF5BC", "#FEE3B5", "#FEDCAA", "#FDD1A0", "#E6C893", "#FDBD84", "#FDBC75", "#FDAD6A", "#F4A360", "#FCB24C", "#F2A541", "#FBBD07", "#FFA600", "#F5A30A", "#DF8800", "#DD8213", "#CF6823", "#E65D28", "#EF5934", "#FB4C2C", "#FE2223", "#FC034C", "#EFF8FD", "#F5F4F5", "#F1F1F1", "#EDF8E8", "#FDDCEE", "#FEE3DF", "#FCF2D0", "#FFFFBF", "#FFFEB2", "#FEEEA6", "#FDE190", "#FEDD8B", "#FBCB8B", "#FDD975", "#FEC960", "#FDB161", "#FEC34F", "#FDBF31", "#FDD832", "#FED400", "#E5AE04", "#D29A00", "#B98309", "#CF8425", "#E0763C", "#F76846", "#F94945", "#EE3529", "#D51147", "#E41A1C", "#DFFEFF", "#EEF2FD", "#F1EEF6", "#EDEEEE", "#EBE4F1", "#F9CAE5", "#F0D8DD", "#F3EEC5", "#F7FBB8", "#EDF8AF", "#FFFE98", "#F0E58C", "#FFE97E", "#FEED69", "#FCDA5D", "#EACE64", "#E8BD50", "#F0EC38", "#FFFD32", "#FDFD00", "#EFDD00", "#C4AD00", "#D8A621", "#BC802C", "#CE7D3E", "#D7634E", "#E25552", "#DD4734", "#D72C26", "#D51918", "#E1F4F8", "#E4E4FA", "#E9EAEA", "#E2F3DC", "#E0E0E0", "#E6DFD4", "#E6F4D0", "#E6F4C8", "#DCEBBB", "#EDE7AB", "#E4F699", "#D9EF8B", "#F2FE63", "#CBE564", "#DFCF79", "#D8AF67", "#C8C140", "#ADFE2F", "#DDE627", "#C0FF00", "#B4BF00", "#BDBF22", "#BB9E38", "#B08B4E", "#BE7B64", "#D25F64", "#D23E55", "#CB303F", "#CA191D", "#BA0000", "#DAECFE", "#DEEBF5", "#E6E0EF", "#E6E6E6", "#E2E2E3", "#DDDDDC", "#DFE1CB", "#D7F1D3", "#CDEAC5", "#C7E9B4", "#D8F2A2", "#D4DA93", "#CDE984", "#D0FE63", "#B3DE69", "#B4CE6A", "#BDB46B", "#A7D751", "#9ACA32", "#8AE40B", "#91D900", "#A3CC00", "#9D9D04", "#A56F1C", "#A07440", "#9E615D", "#AE494A", "#BD3A27", "#B21E27", "#C30023", "#C1E6FF", "#D2E4F0", "#D9D9EA", "#E6D3E7", "#DBDBDB", "#D8D8D8", "#D0D0D0", "#C4D5CF", "#C6E9C0", "#B9E4B7", "#BCDFAA", "#C2E599", "#BFE47B", "#B1FF62", "#A2D76B", "#A0BD66", "#8D9F55", "#7DBB43", "#85EC2D", "#7DFD00", "#7DE400", "#81B402", "#808000", "#8B6B31", "#7A563C", "#8C554B", "#A4542A", "#A32E28", "#A80321", "#960145", "#ACF1F3", "#CAEBE5", "#C6DAEF", "#CED2E6", "#DECBE2", "#CADDDA", "#CFCECE", "#CBCBCC", "#C6C6C6", "#B5C7B0", "#A4DBB4", "#A9DAA2", "#B3DD8A", "#9FEA87", "#93FF63", "#8ECA5F", "#7EC37D", "#6B9973", "#74CC32", "#52F400", "#69ED00", "#62B107", "#6C9A22", "#64740C", "#627A3A", "#776752", "#863A3A", "#853B20", "#9F3302", "#810426", "#B0E0E4", "#BAE6EF", "#BDD5E6", "#C3C9E1", "#CCD1D9", "#D4D3D1", "#D6D1C6", "#CCCBBA", "#BCBCBC", "#B6B6B6", "#9BB7B7", "#9FD899", "#96DD8A", "#93F494", "#6CFE64", "#66D161", "#73C376", "#63B962", "#3DE934", "#3AF900", "#45D40C", "#4DAC26", "#4D9022", "#58692F", "#554C40", "#535454", "#7F601B", "#88460D", "#8B231E", "#9C0003", "#9DE2C9", "#AEDED5", "#ACD8E7", "#B9B9FF", "#C6C0DC", "#E5C9CB", "#E2D8BF", "#D8CAAA", "#C6BDAB", "#B2B2B3", "#A9A9A9", "#ABAF9E", "#92BB8D", "#84D4A3", "#77DF94", "#60FE7B", "#6CE075", "#4ECD87", "#2FFA3B", "#00FC00", "#26C90E", "#4AA02E", "#2E9F2B", "#1E8D1E", "#386A2D", "#416156", "#494A4D", "#51510E", "#862903", "#840000", "#81FED5", "#9DD9E7", "#AFC6E3", "#BCBBDB", "#D6BAD8", "#F4B5D5", "#D6A9B5", "#D1B48A", "#BAAD9B", "#A0A1A1", "#9AAAB3", "#8DAA98", "#76C3AE", "#82CEC2", "#6EE3BA", "#62FEA2", "#1CF887", "#00FC8B", "#08DC51", "#32CC33", "#4FAB4A", "#418743", "#00B300", "#028400", "#266914", "#314E52", "#444444", "#524028", "#6B220B", "#660010", "#61F6FA", "#81D1EC", "#9FCAE1", "#B0C5CE", "#C6B0D5", "#E9A4C9", "#FB9DBA", "#E7959B", "#C79A95", "#B09997", "#989999", "#959595", "#8A88A6", "#7BA3B6", "#65C6A6", "#63FFCC", "#2DE9C3", "#00FFBB", "#0DCA75", "#3EAF73", "#43AA5E", "#2FA457", "#1F8B43", "#008E38", "#016302", "#155120", "#2F3A48", "#3D3E3E", "#57162D", "#542F05", "#8ACAFB", "#91C2DC", "#A3BBD2", "#BEA9D0", "#DD9ED9", "#E78AC2", "#DC77AC", "#D77780", "#BC8D8E", "#A6967C", "#87A17C", "#878787", "#789199", "#5BB2AD", "#52CFCC", "#3EDED1", "#00FEFD", "#00CCD0", "#20B1A9", "#448571", "#0DB54F", "#239254", "#197639", "#006A31", "#004510", "#153617", "#373536", "#323232", "#442728", "#39250F", "#5FC1F2", "#85B5E8", "#91B5CD", "#AFABD4", "#C694C8", "#EF81EF", "#F781BF", "#D96F93", "#BD6682", "#A37380", "#888565", "#7F7F7F", "#6F838F", "#5F9B9E", "#43A4A0", "#3FB6C0", "#35A6FA", "#01C1FF", "#17BECF", "#2B9295", "#189F76", "#019268", "#2B7B6F", "#016557", "#00592B", "#00412F", "#0D3031", "#2B2842", "#2B2C2D", "#252525", "#6BAED6", "#7FB1D3", "#9BA0C6", "#9C99E3", "#D86DD9", "#E377C2", "#FE68B5", "#B460A5", "#956AA9", "#7B6786", "#777777", "#677886", "#667997", "#6795B7", "#47ACD1", "#289DD6", "#1492FC", "#00AAE4", "#00A5AD", "#008A8D", "#00807B", "#226A8B", "#03507A", "#174759", "#013B5B", "#032F46", "#172944", "#212C30", "#212122", "#2A1F15", "#63A3CD", "#74ABD0", "#8C9AC8", "#A48DC2", "#BB7EBC", "#D569B6", "#F8639E", "#DC457D", "#9E519B", "#85559E", "#727271", "#727866", "#666699", "#776DB1", "#587CBB", "#4391C5", "#387EFA", "#0269FD", "#0296CC", "#037FB0", "#05739C", "#03598A", "#25577C", "#07407F", "#09306B", "#06305F", "#081E57", "#0B0E39", "#11202B", "#1A1A1A", "#6488D2", "#817DBB", "#9570DA", "#9664BD", "#BA54D4", "#C93EA4", "#E92D90", "#A54778", "#893E9F", "#7A4073", "#656565", "#5F697E", "#6C56A3", "#5D61AB", "#4682B3", "#427BC2", "#3E67DD", "#1F8AC5", "#026DCC", "#056CAE", "#025C9F", "#074E9A", "#2B3696", "#092B8C", "#02287C", "#181A6F", "#03055F", "#070524", "#0E131E", "#111110", "#6299F6", "#6B6ECC", "#6957CC", "#9933CB", "#BC18C7", "#EB26D3", "#E11E70", "#C81884", "#942563", "#782E8B", "#6A4767", "#50566B", "#663E99", "#6B5092", "#5268AF", "#4171B2", "#3283BD", "#2A80B9", "#1E77B3", "#186BB1", "#0548CF", "#0A3DB3", "#2C2CD1", "#0D1B98", "#010086", "#15117F", "#3C1865", "#2B034B", "#350409", "#06060B", "#706EF6", "#4E41FA", "#8E2BE6", "#9300D8", "#FE01FE", "#FE1196", "#F30183", "#B00178", "#860286", "#72026E", "#383A76", "#4F308A", "#4D518D", "#5553A3", "#376698", "#387FB4", "#308FBD", "#2C7AB4", "#216FB6", "#2262AA", "#052AF7", "#0200FE", "#0100CD", "#0301B6", "#3410A0", "#460481", "#490068", "#470149", "#130000", "#000000"];
var counts = [1410, 8, 41, 61, 68, 49, 30, 7, 28, 19, 39, 40, 30, 14, 43, 58, 79, 63, 69, 13, 53, 39, 29, 65, 49, 62, 37, 63, 33, 194, 38, 141, 21, 35, 29, 69, 25, 40, 56, 56, 18, 7, 40, 29, 25, 25, 37, 13, 30, 10, 67, 2, 52, 1, 29, 42, 4, 23, 15, 18, 51, 74, 90, 38, 26, 33, 69, 60, 23, 38, 42, 59, 44, 55, 48, 37, 29, 35, 41, 11, 37, 6, 52, 19, 39, 9, 11, 27, 19, 25, 47, 71, 78, 27, 26, 62, 1, 47, 48, 37, 33, 35, 19, 29, 35, 81, 24, 18, 24, 49, 36, 52, 33, 17, 7, 94, 26, 29, 56, 72, 26, 28, 63, 213, 29, 33, 8, 4, 19, 26, 34, 26, 2, 37, 29, 14, 49, 13, 23, 54, 3, 63, 33, 18, 49, 31, 19, 35, 111, 34, 38, 29, 15, 32, 33, 7, 17, 11, 22, 32, 27, 20, 28, 11, 7, 15, 7, 26, 2, 4, 53, 43, 38, 11, 16, 64, 33, 18, 20, 74, 19, 58, 14, 64, 28, 197, 23, 15, 28, 19, 21, 56, 10, 32, 25, 28, 36, 26, 37, 1, 52, 52, 7, 39, 13, 56, 42, 21, 60, 38, 29, 24, 55, 14, 35, 77, 21, 8, 38, 37, 3, 14, 8, 20, 42, 7, 44, 41, 3, 51, 52, 17, 26, 32, 13, 38, 61, 58, 68, 67, 37, 31, 90, 29, 18, 9, 7, 455, 54, 5, 27, 43, 55, 1, 14, 23, 32, 6, 4, 41, 48, 19, 67, 6, 35, 24, 40, 3, 41, 31, 42, 5, 35, 25, 1, 42, 2, 7, 186, 23, 8, 52, 38, 56, 42, 8, 68, 62, 3, 24, 2, 12, 19, 36, 9, 127, 13, 52, 19, 48, 33, 38, 50, 14, 1, 7, 14, 37, 7, 33, 230, 15, 36, 1, 5, 23, 1, 5, 6, 70, 9, 2, 61, 38, 9, 14, 38, 7, 29, 99, 30, 40, 70, 66, 60, 47, 6, 35, 15, 19, 14, 4, 7, 79, 2, 28, 3, 60, 6, 34, 38, 15, 27, 56, 20, 38, 116, 8, 24, 42, 61, 40, 98, 11, 48, 14, 17, 32, 48, 14, 209, 62, 27, 11, 65, 28, 2, 3, 14, 44, 18, 72, 51, 19, 49, 9, 22, 44, 13, 17, 45, 39, 55, 39, 57, 18, 23, 13, 30, 26, 8, 97, 44, 16, 41, 30, 52, 36, 31, 18, 9, 62, 19, 53, 28, 9, 11, 293, 1, 8, 54, 8, 8, 19, 23, 32, 17, 31, 16, 8, 7, 81, 33, 35, 22, 34, 11, 34, 35, 38, 44, 16, 9, 51, 25, 40, 3, 10, 16, 45, 82, 29, 65, 42, 34, 37, 33, 28, 47, 32, 295, 17, 9, 16, 47, 34, 49, 36, 18, 57, 47, 23, 25, 9, 29, 7, 18, 4, 261, 6, 36, 39, 30, 23, 36, 54, 27, 13, 72, 47, 47, 13, 1, 91, 14, 63, 7, 14, 38, 40, 8, 29, 16, 26, 48, 18, 26, 21, 9, 37, 15, 20, 34, 53, 32, 7, 59, 19, 16, 34, 257, 11, 34, 20, 44, 10, 37, 30, 11, 56, 34, 62, 46, 35, 12, 30, 9, 13, 18, 90, 56, 37, 27, 30, 10, 5, 33, 70, 21, 26, 38, 28, 32, 36, 38, 43, 89, 33, 86, 1, 13, 10, 3, 6, 79, 6, 6, 15, 13, 39, 57, 15, 31, 34, 48, 31, 39, 15, 89, 33, 41, 58, 21, 60, 50, 36, 43, 27, 45, 47, 12, 93, 45, 9, 6, 54, 14, 31, 7, 1500];
//svg sizes and margins
var margin = {left: 50, top: 50, right: 0, bottom: -30},
width = 920,
height = 550;
//The number of columns and rows of the heatmap
var MapColumns = 30,
MapRows = 20;
///////////////////////////////////////////////////////////////////////////
/////////////////////// Create hexagon variables //////////////////////////
///////////////////////////////////////////////////////////////////////////
//The maximum radius the hexagons can have to still fit the screen
var hexRadius = d3.min([width/(Math.sqrt(3)*(MapColumns+3)),
height/((MapRows+3)*1.5)]);
//Set the new height and width based on the max possible
//width = MapColumns*hexRadius*Math.sqrt(3);
//heigth = MapRows*1.5*hexRadius;//+0.5*hexRadius;
//Scale for the min and max hex sizes, based on circular sqrt
var hexSize = d3.scale.sqrt()
.range([hexRadius*0.3,hexRadius*3])
.domain([d3.min(counts), d3.max(counts)]);
//Initiate hexbin
var hexbin = d3.hexbin()
.radius(hexRadius)
.size([width, height])
.x(function(d) { return d.xPos; })
.y(function(d) { return d.yPos; });
//Calculate the center positions of each hexagon
var points = [],
counter = 0;
for (var i = 0; i < MapRows; i++) {
for (var j = 0; j < MapColumns; j++) {
points[counter] = {
xPos: hexRadius * j * 1.75,
yPos: hexRadius * i * 1.5,
color: color[counter],
counts: counts[counter]
}
counter = counter + 1;
}//for j
}//for i
///////////////////////////////////////////////////////////////////////////
////////////////////////////// Initiate SVG ///////////////////////////////
///////////////////////////////////////////////////////////////////////////
var svg = d3.select("#chart").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 + ")");
///////////////////////////////////////////////////////////////////////////
////////////////////// Draw hexagons and color them ///////////////////////
///////////////////////////////////////////////////////////////////////////
//Create the hexbin data
var hexData = hexbin(points);
//Add extra data to the hexbin result
hexData.forEach(function(d,i) {
d.color = points[i].color;
d.counts = points[i].counts;
});
//Sort from biggest to smallest hexbin
hexData.sort(function(a, b) { return b.counts - a.counts; })
//Start drawing the hexagons
svg.append("g")
.selectAll(".hexagon")
.data(hexData)
.enter().append("path")
.attr("class", "hexagon")
.attr("d", function (d,i) {return "M" + d.x + "," + d.y + hexbin.hexagon(hexSize(d.counts)); })
.attr("stroke", function (d,i) { return d3.rgb(d.color).darker(0.5); })
.attr("stroke-opacity", "0.75")
.attr("stroke-width", "1px")
.style("fill", function (d,i) { return d.color; })
.style("opacity", 0.9)
.on("mouseover", mover)
.on("mouseout", mout);
///////////////////////////////////////////////////////////////////////////
///////////////// Mouse over and Mouse out functions //////////////////////
///////////////////////////////////////////////////////////////////////////
//Function to call when you mouseover a node
function mover(d,i) {
var el = d3.select(this)
.transition().duration(10)
.style("opacity", 1);
$(this).popover({
placement: 'auto top', //place the tooltip above the item
container: '#chart', //the name (class or id) of the container
trigger: 'manual',
html : true,
content: function() { //the html content to show inside the tooltip
return "<span>" + d.color + "</span>"; }
});
$(this).popover('show');
}
//Mouseout function
function mout(d,i) {
var el = d3.select(this)
.transition().duration(1000)
.style("opacity", 0.9);
//Hide the tooltip
$('.popover').each(function() {
$(this).remove();
});
};
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Block Color Clustering</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="//d3js.org/d3.hexbin.v0.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style>
body {
text-align: center;
}
.header {
font-family: 'Montserrat', sans-serif;
margin-top: 20px;
margin-left: 40px;
padding-bottom: 20px;
font-size: 34px;
text-align: left;
max-width: 900px;
color: #525252;
}
.hint {
font-family: 'Lora', serif;
margin-top: 10px;
color: #AAAAAA;
font-size: 12px;
max-width: 750px;
}
.popover{
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 400;
color: #525252;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
A Self Organizing Map Clustering of block Colors
<div class="hint">
<p>All of the custom colors found in d3.js blocks were used as input. The data was taken from the <a href="//bl.ocks.org/enjalot/de262983e3ba0c0f89c1">enjalot's block</a> and includes 3250 different blocks.
He parsed out hex codes, hsl(a) and rgb(a) in any html, js or coffee file found in each block and I converted all of these to 6-digit hex codes. There were 24700 different color statements in these blocks that make up 4350 unique colors.</p>
<p>The clustering grouped similar colors together in 600 hexagons (based on their RGB values, thus 3 variables in total). The map below displays the "average" hex value and the size of each hexagon is scaled to the number of (the 24700) colors that are grouped in each hexagon.
The biggest one, pure black, #000000, has 1500 entries. In essence it is an exercise in trying to map a 3D color space into a 2D plane while also looking at the nuances in colors used in blocks :)</p>
</div>
</div>
<div id="chart"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>