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>
<head>
<title>A circle as a table</title>
<style type="text/css">
body {background: #888;}
$styles
</style>
</head>
<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";
}

[download]

Is your purpose to generate the structure and the table graphic is just a way of demonstrating it? Or is the display of the result the real objective?

If the latter, it would probably be much faster and use less bandwidth to render to a .png using GD(or similar) and then link the image.

Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error.
"Science is about questioning the status quo. Questioning authority".
In the absence of evidence, opinion is indistinguishable from prejudice.
"Too many [] have been sedated by an oppressive environment of political correctness and risk aversion."

In reply to Re^5: Creating a circle in a data structure by BrowserUk
in thread Creating a circle in a data structure by AK108

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.