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…

Importing an existing SSL key/certificate pair into a Java keystore

I'm writing this blog post in case anyone else has to Google that. In Java 6 keytool has been improved so that it now becomes possible to import an existing key and certificate (say one you generated outside of the Java world) into a keystore.

You need: Java 6 and openssl.

1. Suppose you have a certificate and key in PEM format. The key is named host.key and the certificate host.crt.

2. The first step is to convert them into a single PKCS12 file using the command: openssl pkcs12 -export -in host.crt -inkey host.key > host.p12. You will be asked for various passwords (the password to access the key (if set) and then the password for the PKCS12 file being created).

3. Then import the PKCS12 file into a keystore using the command: keytool -importkeystore -srckeystore host.p12 -destkeystore host.jks -srcstoretype pkcs12. You now have a keystore named host.jks containing the certificate/key you need.

For the sake of completeness here's the output of a full session I performe…