Skip to main content

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


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

Unknown 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.
Unknown 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?

Popular posts from this blog

Your last name contains invalid characters







All the symmetrical watch faces (and code to generate them)


    int col = h%6;
    int row = floor(h/6);

The Elevator Button Problem

User interface design is hard. It's hard because people perceive apparently simple things very differently. For example, take a look at this interface to an elevator:

From flickr

Now imagine the following situation. You are on the third floor of this building and you wish to go to the tenth. The elevator is on the fifth floor and there's an indicator that tells you where it is. Which button do you press?

Most people probably say: "press up" since they want to go up. Not long ago I watched someone do the opposite and questioned them about their behavior. They said: "well the elevator is on the fifth floor and I am on the third, so I want it to come down to me".

Much can be learnt about the design of user interfaces by considering this, apparently, simple interface. If you think about the elevator button problem you'll find that something so simple has hidden depths. How do people learn about elevator calling? What's the right amount of informati…