Fog Creek Software
Discussion Board




Design Advice Needed - For Generating Graphics

Hi:

I have a set of data - all numeric that can change depending on the parameters. An example of such data will be, say, the wind speed, barometer readings at Lake Erie, Lake Placid, Lake Huron and Lake Ontario.

Now the wind speed and barometer readings from all 4 lakes will effect the weather outlook pattern for a region - this is a fictitious rational and simply to illustrate the question I have below.

Now I would like to dynamically generate graphics based on the data from the 4 lakes onto a screen.

The screen will have 4 spheres - representing each lake. The size and color of the sphere will depend on the likelihood of bad weather - this data is dynamically calculated based on raw weather data, e.g wind speed.

How is it best to dynamically generate the above graphic? Ideally I would like to create a web based solution. Can I produce a JPEG output based on calculation from the raw data?

I am open to using .NET or J2EE - I am very familiar with .NET but have started to learn J2EE and would like to learn more - so I am extremely neutral on the platform.

How would it be best to list the data associated with each lake. Initially I though of tabulating the result below the graphical representation. However it will be neat if a user places his Cursor on a sphere - and the data appears in the alt pop-up (not a pop-up browser).

But I am not sure the above is possible as there are 4 spheres on 1 JPEG - each having different data sets.

The above problem is for my personal coding - so I am open on the platform, database and technology used.

Ram Dass
Friday, September 05, 2003

Haven't played with it much, but I believe PHP has some image-generation capabilities.  As for getting the pop-up, you could simply generate one image for each lake, and set its ALT tag accordingly.  Then the browser will take care of your pop-up for you.

Sam Livingston-Gray
Friday, September 05, 2003

Now's a perfect time to drop everything and go read at least one of the books by Edward Tufte. Start with "The Visual Display of Quantitative Information" - see his site at http://www.edwardtufte.com/tufte/

Once you read his work, you'll understand:

1. why certain visual information displays are better than others (no, it's not just subjective), and

2. how to maximize the information you can transmit visually [One of his books talks about the special issues related to displaying info on computers, rather than on paper or another medium; I don't remember which one].

I hope you find them helpful (plus, the pictures are pretty!).

</soapbox>

Exception guy
Friday, September 05, 2003

Exception Guy - that's exactly what I was thinking as I read the post. I attended his 1 day course 'Presenting Data and Information' this summer. Thoroughly recommended.

UI Designer
Friday, September 05, 2003

There's a ton of ways you could go.. There's a bunch of packages that will generate graphics like that (I can think of a couple in Perl anyway). 

However, its probably alot easier to do with some javascript and some CGI.  IE When you mouseover a sphere change the text in a div. 

I recently displayed percentage score by stretching a 1 px high graphic and changing its color based on certain thresholds.  Maybe your could have a set of 3-4 static graphics you could alternate based on certain conditions.

I'm not a big fan of displaying specific information in ALT tags.  IHMO, it's bad design because only someone whose very interested in your site or very bored will notice.

Lee
Friday, September 05, 2003

Yep, you can generate JPEGs on the fly using ASP.NET and GDI+.

Simply instantiate a Bitmap object, create a Graphics object from it, draw your snazzy spheres/circles on the graphics object, then save the JPEG (or GIF or PNG). 

Ankur
Friday, September 05, 2003

Maybe try ImageMagick?

Spam
Friday, September 05, 2003

"...using ASP.NET and GDI+.

Simply instantiate a Bitmap object, create a Graphics object from it, draw your snazzy spheres/circles on the graphics object, then save the JPEG (or GIF or PNG). "

...or send it directly to the browser

Opus
Friday, September 05, 2003

The Gimp has a scripting capability that powers image generation on a few sites I've seen (the only example I can remember the URL for right now is cooltext.com)

van pelt
Friday, September 05, 2003

GNUPLOT is what all the *nix weenies use for that sort of stuff.  It runs on Windows (and most OSes), but I don't know how well it will interface with your stuff.

It draws the graph, you just give it data & how you want it to look, which is easier than trying to draw the boxes and lines yourself, I think.

Alex
Friday, September 05, 2003

GD Image library is excellent. http://www.boutell.com/gd/faq.html

Israel Orange
Friday, September 05, 2003

http://msdn.microsoft.com/msdnmag/issues/03/07/scalablevectorgraphics/default.aspx

Anonymous Cowboy
Friday, September 05, 2003

For generating graphics on the web, bitmap is *not* the way to go.  I have worked with VML (vector markup language) on IE 5+ to create interactive graphics, and it's quite simple to do--Google will give you all the resources you need.

Also, there are ActiveX controls available if you don't want to bother learning VML. I have not used them, but I assume they are easy to use, and some will also generate bitmaps for other platforms.

jdm
Saturday, September 06, 2003

You could also use SVG (scalable vector graphics) which is similar to VML, but has the blessings of W3.  Both vector languages use simple text markup to generate graphics, similar to HTML--in fact, they are really instances of XML.  The graphics can be changed readily using DOM and Javascript.

SVG is fast becoming the language of choice for generating maps on the web.  I can't wait for SVG to be used in sites like Mapquest, because it is completely scalable and uses antialiasing.

Unfortunately SVG requires a plugin (see Adobe's version, for example); IE has so far supported rendering of only VML.

jdm
Saturday, September 06, 2003

Java's 2D graphics ability is truly amazing and no book shows it off better than:

  Java 2D API Graphics by Vincent J. Hardy.

It's just an awesome book. It's one of my few truly prized tech books. Sits proudly next to Design Patterns GoF book.

The graphics and layouts in the book rank up there with photoshop/illustrator manuals (I'm not kidding). You make graphics from this book, and they will be truly looking sweet.

Arron Bates
Sunday, September 07, 2003

"I am open to using .NET or J2EE - I am very familiar with .NET but have started to learn J2EE and would like to learn more - so I am extremely neutral on the platform."

If you decide to do it in J2EE, you might want to check out http://jcharts.sourceforge.net/ I doubt it does what you're after out of the box, but has a lot of example code (also for SVG support).

"How would it be best to list the data associated with each lake. Initially I though of tabulating the result below the graphical representation. However it will be neat if a user places his Cursor on a sphere - and the data appears in the alt pop-up (not a pop-up browser)."

I don't think the alt tag would be quite intuitive enough, but that's really for you to decide. If you want to only one image, you can create a map out of it, and assign alt-texts for individual areas.

Juha
Monday, September 08, 2003

Aabel will be able to handle what you need quite easily.

http://www.gigawiz.com/DataCharting.html

Grapher
Tuesday, September 09, 2003

*  Recent Topics

*  Fog Creek Home