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):







Ham Strike Rate




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).


Manni said...

Hi John,

that CSS trick is pretty neat and elegant. I don't believe that there is any way to make it even more neat and elegant.

Nice to see you blogging now.


Li said...

I'm seeing extra vertical space in the bounding box enclosing the plot, below the X axis. When I add more data points, the vertical space increases in height. It seems that the space is related to the image you used for the "x" marker ("cross.png"). I'm using Internet Explorer. When I switched to Firefox, there was still extra vertical space, not within the bounding box but after the bounding box. Any idea how to get rid of this space? Thanks.

Li said...

Looks like the unwanted vertical margin was caused by
after every data point. After I removed them, everything looks good now. Thanks for the example!

Lehmia Kiran said...

From where i can get the code of this demo..? frequent reply is highly apprciated..

Lehmia Kiran said...

From where i can get the code of this example.? frequent reply is highly appreciated..

Lehmia Kiran said...

From where i can get the code of this example?