Friday, November 7th, 2008

JavaScript Graph Plotting Tool

Category: JavaScript

We’ve seen the community do a lot with <canvas> over the past few months, and every so often it’s fun to see the good ol’ <div> approach to graphics and animation.

Tavs Dokkedahl gives us a good one of those with his JavaScript Graph Plotting Tool:

As part of a larger animation framework I have created a plotting tool for
visualizing functions. It is made entirely in JavaScript, uses no graphics
and the generated source code is W3C compliant.

The first beta is ready for public viewing (and hopefully feedback) and
currently supports

Real valued functions of one variable y = f(x)
Parameter functions for plane curves (x,y) = f(t)
Customizable plots like curve resolution and axis positioning.
Simple zoom functionality (not for plane curves)

It’s actually a pretty cool little cross-browser app.

Posted by Ben Galbraith at 9:00 am
15 Comments

++++-
4.2 rating from 26 votes

15 Comments »

Comments feed TrackBack URI

We’ve seen the community do a lot with <canvas> over the past few months, and every so often it’s fun to see the good ol’ <div> approach to graphics and animation.

No, it’s not. Shitty, obsolete misuse of HTML is shitty and obsolete, and why stuff like canvas and SVG have been created.

Comment by eyelidlessness — November 7, 2008

eyelidlessness, I am really stunned by this – other than that I really hope we never meet in a project. If somebody would please delete both of these comments?

Comment by FrankThuerigen — November 7, 2008

Why delete the comments? Maybe we could have a discussion. Why do you think that it’s appropriate to use a series of divs to create an image when there are several vector formats readily available?

Comment by eyelidlessness — November 7, 2008

Indeed, good concept, bad execution. There is no need to implement this the way it was, use Vector Graphics or the canvas for God’s sake, that’s why it was invented.
.
The best use of the old school approach that I’ve seen is this:
http://www.slimeland.com/raytrace/
.
Load one of the presets to save time (like the flower)

Comment by TNO — November 7, 2008

@eyelidlessness: Calling someone else’s work “shitty and obsolete” for no good reason is not how you “have a discussion”. Especially in a forum that is pretty much all about people freely donating their time and tools for public use. It’s just being crude and disrepectful.

Just because a tool doesn’t use the latest fad in HTML design does not mean you should immediately dismiss it. Quite the contrary, there are several reasons why HTML/CSS may be a better solution here:

– Browser support. It’s better supported on all browsers. (witness the hoops you have to jump through to get SVG or Canvas to work on IE).

– Printing. Valid HTML will print more reliably than either Canvas or SVG

– Accessibility. If you want to enable tab-navigation, alt text, titles, or any of the other accessibility features HTML supports, than you want HTML+CSS.

– Skinning. It’s not hard to imagine this as an embeddable widget, in which case people will want to skin it, which is much easier to do with CSS than … well… whatever you would do with Canvas.

This is not to say that HTML is the ideal solution – it obviously has it’s downsides – but depending on what you need from a graphing widget it’s not unrealistic to think this might be the best alternative, in which case I’d think you would be happy find something like this already exists.

Comment by broofa — November 7, 2008

Don’t overlook VML…

Comment by TNO — November 7, 2008

@eyelidlessness: Your critique is welcome but I think you should reconsider your phrasing.

I created it using divs as I have little experience with VML, SVG and canvas. The one thing I do know about those technologies is that they are not cross browser.

I don’t think it’s “shitty” – I actually like the way it came out and considering that this is a beta and something I put together in 7 days should speak for itself. Its not minimized, compressed or otherwise optimized yet it seems to work with decent speed.

I fail to understand the importance of the technique being obsolete. If it works is that not good enough for you? If not then please explain why.

Comment by Tavs — November 8, 2008

Tavs:
The memory requirement for the technique you use is ungodly when things get complex. Each tag is an instance of a new class and contains a large number of methods/properties/events that are all worthless
.
Here’s an old presentation on the subject. (fullscreen your browser and don’t use IE)
http://people.mozilla.com/~vladimir/xtech2006/

Comment by TNO — November 8, 2008

@broofa:

Calling someone else’s work “shitty and obsolete”

I didn’t. I called the entire concept of using divs to create psuedo-vector “graphics” shitty and obsolete, because it is. It has nothing to do with their work, which very well may be an interest and an achievement in its own right, despite the concept behind it being wholly wrongheaded, outdated, and completely replaceable with more appropriate code.

for no good reason

Except I specifically detailed a good reason: it is inappropriate use of HTML and there are appropriate technologies already available.

Especially in a forum that is pretty much all about people freely donating their time and tools for public use.

Er, it is? I don’t remember that ever being advanced by the site operators, who routinely post about Adobe, Microsoft and Ext.

It’s just being crude and disrepectful.

I certainly meant no disrespect, and certainly no more than I would have meant if I were to say “shitty and obsolete” about, say, IE (which I doubt anyone here would disagree with, unless Chris Wilson is around, and he can take it).

Just because a tool doesn’t use the latest fad in HTML design does not mean you should immediately dismiss it.

It’s not about fads, it’s about using appropriate tools. Just above this post there is a post about using JS for layout, and there are plenty of people dismissing it on the grounds that it isn’t the appropriate tool for the job. There is no harm done. Criticism is good! It’s how we learn and grow.

Browser support. It’s better supported on all browsers. (witness the hoops you have to jump through to get SVG or Canvas to work on IE).

There are plenty of libraries out there that would make producing graphs of this nature dead simple with Canvas/VML.

Printing.

I simply don’t believe this, and would love to see proof.

Accessibility.

Nothing is preventing you from providing those things alongside a proper vector graphic.

Skinning.

Proper vector graphics allow much more control over appearance than HTML rectangles.

All of that said, those are good points to raise and there are certainly some worth considering in a broader use case (particularly in more complex graphics than we’re discussing here, browser compatibility may be more of an issue).

it’s not unrealistic to think this might be the best alternative

I wholeheartedly disagree. You’ll note that the creator added that they did implemented it with HTML rather than vector graphics because they “have little experience with VML, SVG and canvas”. That’s fine, but that doesn’t make it the right tool for the job.

Comment by eyelidlessness — November 8, 2008

@Tavs:

Your critique is welcome but I think you should reconsider your phrasing.

Perhaps you’re right. I think it’s clear a few people misunderstood me. I’ll try to be more clear in the future. To reiterate from my last comment, I definitely didn’t mean to insult you.

I created it using divs as I have little experience with VML, SVG and canvas.

Well, that’s fine. Although as a friendly recommendation, I’d say that you might be better suited using existing libraries that do graphing with vector graphics.

The one thing I do know about those technologies is that they are not cross browser.

It’s not as simple as that. VML and Canvas have a lot of functional overlap, allowing abstraction to accomplish quite a lot. There are certainly libraries out there that already do this, even some specifically built around graphing, that are extremely capable and powerful.

I don’t think it’s “shitty” – I actually like the way it came out and considering that this is a beta and something I put together in 7 days should speak for itself.

To reiterate and to be absolutely clear, I wasn’t saying your code was shitty, I was saying using HTML to create “vector graphics” is shitty.

I fail to understand the importance of the technique being obsolete. If it works is that not good enough for you? If not then please explain why.

Well, my biggest objections are:
1. It’s a misuse of HTML. Running the function in the screenshot, the DOM has what looks like a few hundred divs that do not describe any kind of document structure nor have any particular semantic meaning.
2. It’s actually not graphically accurate, due to position rounding and a lack of anti-aliasing.
3. There are better technologies available, which properly solve the above problems within their intended scope of use.

Comment by eyelidlessness — November 8, 2008

I’d like to add that I think it’s a really cool proof of concept despite its problems.

Comment by eyelidlessness — November 8, 2008

@ TNO:

The memory requirement for the technique you use is ungodly

Yes it does use a lot of memory – how does my approach compare to SVG memorywise?

Each tag is an instance of a new class and contains a large number of methods/properties/events that are all worthless

No it just looks like that from the way I structure my code. No internal objects are used – I merely extend the functionality of elements.
@ eyelidlessness

There are certainly libraries out there that already do this

I know. Which one would you recommend?

It’s a misuse of HTML. Running the function in the screenshot, the DOM has what looks like a few hundred divs that do not describe any kind of document structure nor have any particular semantic meaning

I know that there is no semantical meaning to a 1×1 px div representing a point on a curve but then again a div really have no semantical meaning in the first place – except for dividing content into blocks (or am I missing your point?).
I’ve never really liked the above argument. It is certainly true that HTML was meant for structuring documents but websites have evolved to be so much more. Every day people are finding new ways to circumvent the limitations of HTML and utilize HTML to present information in new ways the original authors could never have anticipated. So just because it was meant for structuring documents does that imply one can never use HTML for anything else?
If I am writing an article then the semantic meaning of the markup is important because an article is just that – a document meant to be searched, indexed and understood by computers.
If I am creating a fullblown GUI framework the semantical meaning changes. It is no longer a document but an application. That is certainly “misuse of HTML” from the point of view of its original meaning but should I just give up and wait for W3C to finish whatever recommendation which would allow for GUI elements? I would love to have such native browser capabilities but then I am probably in for a long wait…
I think it is foolish to constrain the use of any technology if it is clear that such constrains can be circumvented.

It’s actually not graphically accurate, due to position rounding and a lack of anti-aliasing.

No it is not accurate – but pretty close. The original purpose of the plot tool was merely to have an easy for of visualising functions for people not comming from a mathematical background – then I got carried away :)

There are better technologies available, which properly solve the above problems within their intended scope of use.

Probably – as I do not know VML, SVG or canvas I don’t know how complex making a plot tool would be. I would like to try just to do the comparison…how to learn those technologies first though.

I’d like to add that I think it’s a really cool proof of concept despite its problems.

Thank you.

Comment by Tavs — November 8, 2008

@tavs:
In comparison to SVG (Don’t use IE to view)
http://www.w3schools.com/svg/path2.svg
VML is a similar approach: (use IE)
http://samples.msdn.microsoft.com/workshop/samples/vml/shape/path/x_path.htm
.
“No it just looks like that from the way I structure my code. No internal objects are used – I merely extend the functionality of elements.”
.
Actually every tag is an instance of a underlying tag class in C++ each with its own instance of attributes and such attached to a massive DOM tree .

Comment by TNO — November 9, 2008

@Tavs:

I know. Which one would you recommend?

Flotr looks very capable (see
mouse tracking and axis examples).

should I just give up and wait for W3C to finish whatever recommendation which would allow for GUI elements?

Of course not, but there are certainly better technologies available than the ones you’re using now. Which was my point. I’m not an HTML purist either, but I’d much rather use vector graphics technologies for vector graphics.

I think it is foolish to constrain the use of any technology if it is clear that such constrains can be circumvented.

Agreed. I also think it’s foolish to use a technology beyond its intended uses when something exists that meets your intended needs.

Probably – as I do not know VML, SVG or canvas I don’t know how complex making a plot tool would be. I would like to try just to do the comparison…how to learn those technologies first though.

Well, obviously you’re welcome to pursue learning them, but I’d personally rather use a mature library for the purpose. :)

Comment by eyelidlessness — November 9, 2008

Tavs,

As much as I love SVG, I think that this is interesting work in terms of seeing what you can do without recourse to the SVG, VML and Canvas options.

This type of work was very popular several years ago, when people were seeing how far they could push HTML and CSS to create artwork.
Then with the addition of Javascript, various authors showed us how to create a Wolfenstein game with merely DHTML. When he did this nobody made negative comments about the uselessness of this in a commerical world or whether there were more appropriate technologies for creating Wolfenstein — because obviously there were. People loved it becasue everyone realized that sometimes people do things not just based on whether “it is the most appropriate approach in a commercial world” but often just out of curiousity or as means for personal learning. Let us not belittle people for such activities!

Further, the main criticism against Tavs for implementing graphics this way — that using DIVs puts an excessive and unnecceasry burden on the browser when more efficient alternatives exist — can actually be its strength. Let me explain further…

In one of my previous jobs, we did a fairly comporehensive graphics implementation using DIVs, just to see how much we could push the browser.

Initially we used a one DIV per pixel method, which was then refined to one DIV per horizontal/vertical line. We then added antialising just to see how much it would slow things down. Finally, we were able to devise quite efficient mechanisms for drawing lines and filled polygons using only DHTML. Eventually, we were able to develop algorithms that drew antialised lines with only 2 or 3 DIVs and filled polgons with about 20 DIVS. With such algorithms we could create moderately intricate 3D models which typically invovled a few hundered filled hexagons and a couple of thousand antialiased lines in under a second.

It turned out to be an excellent way to benchmark the speed of JavaScript and HTML rendering in each of the version releases of Firefox, Safari, Opera and IE.

Obviously this is far slower than many other methods, but sometimes developments at the extreme edge exist so we can have more faith that it can do ‘normal’ commerical things with reliability and without strain.

Martin

Comment by zarang — November 12, 2008

Leave a comment

You must be logged in to post a comment.