Thursday, December 01, 2005

CSS absolute positioning scatter plot

I've been working to overhaul the code that sits behind the Anti-spam Tool League Table page. The entire page is created from a data file containing the spam filter test results which is read by a simple Perl script which spits out the HTML.

The graphics were being created by a hideous combination of that Perl script and gnuplot. gnuplot was outputting png files that were included in the final web page. Unforunately the results weren't very pretty, and making the chart clickable or have popup information was going to be a nightmare of Javascript and an image map.

The new page is going to use CSS absolute positioning to draw the scatter plot on the page with no external graphics at all. Not only is the chart better (it's clickable, has popups, I can scale it as I need to), it's also smaller and prettier.

Here's a sample of what the chart will look like (note that I've done nothing with colors or other prettification at this point and although each x has a link it goes nowhere):


































.5



.6


.7


.8


.9

.4

Ham Strike Rate

0


1

.4


To see how that works just look at the source. (And if any reader is a CSS expert and sees a better way for me to do this then please let me know; I'm eager to learn the best way to make this work).

Labels:

If you enjoyed this blog post, you might enjoy my travel book for people interested in science and technology: The Geek Atlas. Signed copies of The Geek Atlas are available.

<$BlogCommentBody$>

<$BlogCommentDateTime$> <$BlogCommentDeleteIcon$>

Post a Comment

Links to this post:

<$BlogBacklinkControl$> <$BlogBacklinkTitle$> <$BlogBacklinkDeleteIcon$>
<$BlogBacklinkSnippet$>
Create a Link

<< Home