{"id":101,"date":"2009-04-09T19:50:58","date_gmt":"2009-04-10T03:50:58","guid":{"rendered":"http:\/\/www.madpickles.org\/rokjoo\/?p=101"},"modified":"2009-04-28T14:35:23","modified_gmt":"2009-04-28T22:35:23","slug":"blue-and-yellow","status":"publish","type":"post","link":"https:\/\/www.madpickles.org\/rokjoo\/2009\/04\/09\/blue-and-yellow\/","title":{"rendered":"Blue And Yellow"},"content":{"rendered":"<p>While working with a friend on a project, I received a chunk of data consisting of 122443 schools\/parishes\/colleges along with their primary and secondary colors (in hexadecimal). I hacked together a simple color quantizer that converted the colors to the 216 color web safe palette. If the color combinations are given, 1 per row, formatted as <b>primary|secondary<\/b>, then this bit of Perl:<\/p>\n<pre>\r\nwhile(<>) {\r\n  my @colors = split(\/\\|\/,$_);\r\n  my @qColors = (); # will hold the quantized version of @colors\r\n  foreach my $orig (@colors) {\r\n    my $quantized = \"\";\r\n    for(my $i = 0; $i < 5; $i += 2) {\r\n      my $c = substr($orig,$i,2);\r\n      my $dec = hex($c);\r\n      if($dec <= 26) {\r\n        $quantized .= \"00\";\r\n      } elsif($dec <= 76) {\r\n        $quantized .= \"33\";\r\n      } elsif($dec <= 127) {\r\n        $quantized .= \"66\";\r\n      } elsif($dec <= 177) {\r\n        $quantized .= \"99\";\r\n      } elsif($dec <= 228) {\r\n        $quantized .= \"CC\";\r\n      } else {\r\n        $quantized .= \"FF\";\r\n      }\r\n    }\r\n    push(@qColors,$quantized);\r\n  }\r\n}\r\n\r\n<\/pre>\n<p>will get the job done. Looking back I probably could have just as easily computed the distance between points in 3 dimensional space. In addition, I probably could have reduced my palette to 32-64 colors and ended up with a similar result. If you're curious about the accuracy of this algorithm, here are the colors from the first 10000 schools. The original is on the left, the quantized on the right:<\/p>\n<style type=\"text\/css\">\ntd { color: #ffffff; text-align: center; } \n.blktxt { color: #000000; text-align: center; } \n<\/style>\n<table>\n<tr>\n<td bgcolor=\"#CE0505\">CE0505<\/td>\n<td bgcolor=\"#CC0000\">CC0000<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#11147F\">11147F<\/td>\n<td bgcolor=\"#000066\">000066<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FFB300\">FFB300<\/td>\n<td bgcolor=\"#FFCC00\">FFCC00<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FA620F\">FA620F<\/td>\n<td bgcolor=\"#FF6600\">FF6600<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#389CFF\">389CFF<\/td>\n<td bgcolor=\"#3399FF\">3399FF<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#808080\">808080<\/td>\n<td bgcolor=\"#999999\">999999<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#108810\">108810<\/td>\n<td bgcolor=\"#009900\">009900<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#4A0C76\">4A0C76<\/td>\n<td bgcolor=\"#330066\">330066<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#832C38\">832C38<\/td>\n<td bgcolor=\"#993333\">993333<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#181717\">181717<\/td>\n<td bgcolor=\"#000000\">000000<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#1B1640\">1B1640<\/td>\n<td bgcolor=\"#330033\">330033<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#0F4509\">0F4509<\/td>\n<td bgcolor=\"#003300\">003300<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#007080\">007080<\/td>\n<td bgcolor=\"#006699\">006699<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#6A371C\">6A371C<\/td>\n<td bgcolor=\"#663333\">663333<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FFEE44\">FFEE44<\/td>\n<td bgcolor=\"#FFFF33\">FFFF33<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FF4DB8\">FF4DB8<\/td>\n<td bgcolor=\"#FF66CC\">FF66CC<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#B9A36A\">B9A36A<\/td>\n<td bgcolor=\"#CC9966\">CC9966<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#C4C4C4\">C4C4C4<\/td>\n<td bgcolor=\"#CCCCCC\">CCCCCC<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#770B0B\">770B0B<\/td>\n<td bgcolor=\"#660000\">660000<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FF2400\">FF2400<\/td>\n<td bgcolor=\"#FF3300\">FF3300<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#F5E6BD\">F5E6BD<\/td>\n<td bgcolor=\"#FFFFCC\">FFFFCC<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#00BDEC\">00BDEC<\/td>\n<td bgcolor=\"#00CCFF\">00CCFF<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#DD46DD\">DD46DD<\/td>\n<td bgcolor=\"#CC33CC\">CC33CC<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#B55109\">B55109<\/td>\n<td bgcolor=\"#CC6600\">CC6600<\/td>\n<\/tr>\n<\/table>\n<p>Here are the statistics:<\/p>\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<th>Most Popular Primary Color Counts:<\/th>\n<tr>\n<td bgcolor=\"#000066\">60825<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#CC0000\">18359<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#009900\">8036<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#000000\">7126<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330033\">6686<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#993333\">6005<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330066\">4641<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FF6600\">3569<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#003300\">2424<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#3399FF\">2024<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#006699\">1476<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#663333\">375<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FFCC00\">283<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#660000\" color=\"#ffffff\">166<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#999999\" color=\"#ffffff\">108<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/table>\n<p><\/p>\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<th colspan=\"3\">Most Popular Primary+Secondary Color Counts:<\/th>\n<tr>\n<td bgcolor=\"#000066\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">44275<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#000066\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">13479<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#CC0000\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">10632<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#009900\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">4677<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#000000\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">4268<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#CC0000\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">3732<\/td>\n<td bgcolor=\"#000000\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330033\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2933<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#009900\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2700<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330066\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2449<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330033\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2397<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#993333\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2395<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">2294<\/td>\n<td bgcolor=\"#000000\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#993333\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">1840<\/td>\n<td bgcolor=\"#FFCC00\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#330066\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">1654<\/td>\n<td bgcolor=\"#FF6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td bgcolor=\"#000000\" width=\"40%\">&nbsp;<\/td>\n<td class=\"blktxt\" width=\"20%\">1522<\/td>\n<td bgcolor=\"#ff6600\" width=\"40%\">&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/table>\n<p>I had whipped up a neat HTML5 Canvas bar graph as well, but WordPress is not liking my JavaScript, maybe next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with a friend on a project, I received a chunk of data consisting of 122443 schools\/parishes\/colleges along with their primary and secondary colors (in hexadecimal). I hacked together a simple color quantizer that converted the colors to the 216 color web safe palette. If the color combinations are given, 1 per row, formatted [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[16,11],"_links":{"self":[{"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/posts\/101"}],"collection":[{"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":7,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/posts\/101\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.madpickles.org\/rokjoo\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}