http://www.perlmonks.org?node_id=618058

in reply to Re^4: Creating a circle in a data structure
in thread Creating a circle in a data structure

That color-codes the center going out (and would go to the edge of the circle, if I had enough CSS classes).

You could use the code from A hierarchy of color (intensity)? to generate your CSS classes to form a Color ramp. Below I've used 256 which seems to strike the best balance between smoothness and rendering speed.

I also added cellspacing=0 to the table definition as it much improves the appearance.

```sub colorRamp {
my( \$v, \$vmin, \$vmax ) = @_;
my( \$r, \$g, \$b ) = (1) x 3;
\$v = \$vmax if \$v > \$vmax;
\$v = \$vmin if \$v < \$vmin;

## Uncomment below to invert the color range
\$v = \$vmax + \$vmin - \$v;

my \$dv = \$vmax - \$vmin;
if( \$v < ( \$vmin + 0.25*\$dv ) ) {
\$r = 0;
\$g = 4 * (\$v - \$vmin) / \$dv;
}
elsif( \$v < ( \$vmin + 0.5 * \$dv ) ) {
\$r = 0;
\$b = 1 + 4 * (\$vmin + 0.25 * \$dv - \$v) / \$dv;
}
elsif( \$v < ( \$vmin + 0.75 * \$dv ) ) {
\$r = 4 * (\$v - \$vmin - 0.5 * \$dv) / \$dv;
\$b = 0;
}
else {
\$g = 1 + 4 * (\$vmin + 0.75 * \$dv - \$v) / \$dv;
\$b = 0;
}
return sprintf "#%02x%02x%02x", \$r*255, \$g*255, \$b*255;
}

my \$ColorRange = 255;

my \$styles = '';
\$styles .= sprintf ".c%d { background:%s;}\n",
\$_, colorRamp( \$_, 0, \$ColorRange )
for 0 .. \$ColorRange;

my \$output = qq~<html>
<title>A circle as a table</title>
<style type="text/css">
body {background: #888;}
\$styles
</style>
<body>
<table cellspacing=0 >
~;

foreach my \$rowid (0 .. max(keys %circle)) {
my \$row = \$circle{\$rowid};
\$output .= "<tr>";
foreach my \$columnid (0 .. max(keys %{\$row})) {
my \$column = \$row->{\$columnid};
my \$class = '';
\$column = \$ColorRange if \$column > \$ColorRange;
\$class = qq~ class="c\$column"~ if \$column;
\$output .= qq~<td\$class></td>~;
}
\$output .= "</tr>\n";
}