Created
July 11, 2014 17:39
-
-
Save stephanwehner/bfa52269c68631cf6d99 to your computer and use it in GitHub Desktop.
Generate HTML page showing the color names from the xkcd color survey
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# | |
# Suppose the file mainsurvey_sqldump.txt (available from colorsurvey.tar.gz, link at http://blog.xkcd.com/2010/05/03/color-survey-results/) has been loaded into file mainsurvey_sqldump.sqlite3, possibly with the command | |
# | |
# sqlite3 mainsurvey_sqldump.sqlite3 < mainsurvey_sqldump.txt | |
# | |
# Invocation of this Ruby script (UNIX command line) | |
# | |
# echo 'select r,g,b,colorname from answers;' | mainsurvey_sqldump.sqlite3 | ruby THIS-FILE > result.html | |
omit_colors = %w( grey gray yellow red green blue purple brown pink black violet white orange cyan gray ).sort.uniq | |
puts <<-HEADER | |
<!doctype html> | |
<head> | |
<style> | |
body { | |
font-family: Arial,Sans,sans-serif; | |
margin: 20px 10px; | |
padding: 0; | |
} | |
div.colors { | |
background: black; | |
padding: 10px; | |
} | |
div.colors span { | |
display: inline-block; | |
vertical-align: middle; | |
line-height: 40px; | |
margin: 0px; | |
height: 40px; | |
padding: 3px; | |
font-size: 90%; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>xkcd color survey names</h1> | |
<p>The names of colors extracted from the survey data of the 2010 <a href="http://blog.xkcd.com/2010/05/03/color-survey-results/">xkcd color survey</a>. | |
<p>Some of these are pretty funny; just have to look for a while!</p> | |
<p>Why would your browser not be able to load a ca. 150 MB file?</p> | |
<p>The order is as in the original database dump, however these colors are omitted: black, blue, brown, cyan, gray, green, grey, orange, pink, purple, red, violet, white, yellow.</p> | |
<h2>Related</h2> | |
<ul> | |
<li><a href="http://www.luminoso.com/colors/">Visualizing the XKCD Color Survey</a></li> | |
<li><a href="http://www.datapointed.net/2010/06/xkcd-color-name-strata/">The Color Strata</a></li> | |
</ul> | |
<p>July 2014, <a href="http://stephan.sugarmotor.org">Stephan Wehner</a></p> | |
<div class="colors"> | |
HEADER | |
def html_escape(s) | |
return '' if s.nil? | |
s.gsub(/[&"'><]/, {'&' => '&', | |
'>' => '>', | |
'<' => '<', | |
'"' => '"', | |
"'" => '''}) | |
end | |
def inverse_color(r,g,b) | |
r = 255 if r.to_i > 200 | |
g = 255 if g.to_i > 200 | |
b = 255 if b.to_i > 200 | |
r = 0 if r.to_i < 180 | |
g = 0 if g.to_i < 180 | |
b = 0 if b.to_i < 180 | |
ri, gi, bi = 255-r.to_i, 255-g.to_i, 255-b.to_i | |
"rgb(#{ri},#{gi},#{bi})" | |
end | |
# Want lines like <span style="background-color: rgb(72,100,175)">pastel blue</span> | |
begin | |
while(line = readline) | |
line.chomp =~ /^(\d+)\|(\d+)\|(\d+)\|(.*)$/ | |
r,g,b,colorname = [$1,$2,$3,$4].map { |s| html_escape(s) } | |
next if omit_colors.include?(colorname.strip.downcase) | |
puts %{<span style="color:#{inverse_color(r,g,b)};background:rgb(#{r},#{g},#{b})">#{colorname}</span>} | |
end | |
rescue EOFError | |
end | |
puts <<-FOOTER | |
</div> | |
</body> | |
FOOTER |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment