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


































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

Comments

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.

Manni
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

My last name is "Graham-Cumming". But here's a typical form response when I enter it:


Does the web site have any idea how rude it is to claim that my last name contains invalid characters? Clearly not. What they actually meant is: our web site will not accept that hyphen in your last name. But do they say that? No, of course not. They decide to shove in my face the claim that there's something wrong with my name.

There's nothing wrong with my name, just as there's nothing wrong with someone whose first name is Jean-Marie, or someone whose last name is O'Reilly.

What is wrong is that way this is being handled. If the system can't cope with non-letters and spaces it needs to say that. How about the following error message:

Our system is unable to process last names that contain non-letters, please replace them with spaces.

Don't blame me for having a last name that your system doesn't like, whose fault is that? Saying "Your last name …

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

If you ever look at pictures of clocks and watches in advertising they are set to roughly 10:10 which is meant to be the most attractive (smiling!) position for the hands. They are actually set to 10:09.14 if the hands are truly symmetrical. CC BY 2.0image by Shinji
I wanted to know what all the possible symmetrical watch faces are and so I wrote some code using Processing. Here's the output (there's one watch face missing, 00:00 or 12:00, because it's very boring):



The key to writing this is to figure out the relationship between the hour and minute hands when the watch face is symmetrical. In an hour the minute hand moves through 360° and the hour hand moves through 30° (12 hours are shown on the watch face and 360/12 = 30).
The core loop inside the program is this:   for (int h = 0; h <= 12; h++) {
    float m = (360-30*float(h))*2/13;
    int s = round(60*(m-floor(m)));
    int col = h%6;
    int row = floor(h/6);
    draw_clock((r+f)*(2*col+1), (r+f)*(row*2+1), r, h, floor(m…

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…